With the Person module, you can create personal profiles of individual people, displaying together a small biography, combined with a picture and social media links. This is especially useful for sections like the About Me or to show the members of a team.
Modules can be added inside rows, so be sure to create a row first where you want the module to appear. Then, add a new module by clicking on the gray plus sign. Choose the person module from the list. If you prefer to find the module automatically, it’s also possible to type “person” in the search bar on top.
Define contents
The contents tab includes what will be displayed within the module.
Text
Here you can customize the following options:
- Name: the name of the person. It will appear on top of the module.
- Position: this field can be used to type the job description of the person.
- Facebook profile URL: paste the URL to the Facebook page or leave it blank.
- Twitter profile URL: paste the URL to the Twitter page or leave it blank.
- Google+ profile URL: paste the URL to the Google+ page or leave it blank.
- LinkedIn profile URL: paste the URL to the LinkedIn page or leave it blank.
- Description: write the content of the bio here.
Image
Link the URL or upload the picture that will be displayed in the bio.
Link
If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Background
Add a background color, gradient, image or video to your module.
Admin label
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
Icon
Control the color of the social media icons.
Image
Define the corner, borders, shadow, and tone of the image.
Text
Control how your text is displayed in terms of alignment and text shadow.
Title Text
Define the font, color, alignment, line height, and other settings for the title of the module.
Body Text
You can also adjust the font settings for the body text.
Sizing
Adjust the width of the module.
Spacing
Customize margins and padding sizes.
Border
Define the border’s corner, style, color and width for your module.
Box Shadow
Here you can enable box shadow.
Filters
Adjust the hue of the module as a whole.
Animation
Give an animation style to the module, like fading or sliding when it appears.
Advanced settings
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Use Case
Let’s create a bio for two members of a team.
First, we add a row with two columns, since we are going to copy the module for both bios, just changing the picture and text but keeping the same design.
We are using the following options:
Name: [Person’s Name]
Position: [Person’s Job Position]
Social media profile URLs
Description: [short bio]
Icon Color: #12876f
Text orientation: right
Header Font Size: 18px
Header Text Color: #000000
Body Font Size: 14px
Custom Padding: 15px Top, 15px Right, 15px Bottom, 15px Left
This is the final result!
