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.
The contents tab includes what will be displayed within the module.
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.
Link the URL or upload the picture that will be displayed in the bio.
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.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
Control the color of the social media icons.
Define the corner, borders, shadow, and tone of the image.
Control how your text is displayed in terms of alignment and text shadow.
Define the font, color, alignment, line height, and other settings for the title of the module.
You can also adjust the font settings for the body text.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
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.
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!