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!