Divi Theme – The Person Module

 In Divi Theme, Wordpress Training
  1. The Person module is used to create personal profile blocks and is a way to display your team members in a neat and visually appealing way. You may want to edit or add a new Person module if you gain a new team member or would like to change any personal details.
  2. To add a new Person module, find the column that you would like to add it to and simply click on the ‘Insert Module(s)’ link.
  3. Once you have clicked this link you will be taken to an ‘Insert Module’ popup box, find the ‘Person’ button (it will have an icon of a person to the left), and you will be taken to the ‘Person Module Settings’ box.
  4. Here you can insert all of the information and details you would like to appear in your team member’s personal profile. I will go through the different settings from top to bottom:

The ‘Name’ and ‘Position’ fields allow you to insert the team member’s name and position within the company. The next section allows you to upload an image of the team member. You can either copy and paste the URL for the image if it is already online, or you can upload an image from your computer by clicking the ‘Upload an image’ button, then choosing the ‘Upload Files’ tab from the top of the pop-up box, followed by selecting your file and clicking the ‘Set As Image’ button.

The ‘Animation’ section allows you to change the animation direction of the image that you chose as it appears on the page when the user scrolls down, you can make it fade in or come in from the right, left, top or bottom.

For text colour, the rule is if your text is being placed onto a dark background the Text Color should be set to ‘Dark’. Vice versa, if your text is being placed onto a light background, the Text Color should be set to ‘Light’.

Below the text colour option are 4 different fields for social media profile URLs, if you choose to put a link to the team member’s or companies profile in here a logo of the social media website will display under the person’s description and will link to the profile URL.

The description section is where you put type the information about your team member. There are some tools along the top that you can use to format the text, these are similar to Microsoft Word such as bullet points and options to align, bold, and italicize the text and more.

Finally the ‘Admin Label’ is where you can give your module a name for easy identification when you are editing your page, you can give this any name you like to help you recognize the content in the module, such as ‘About Jim’. The CSS ID and CSS Class are for backend code purposes only and you do not need to worry about this as we have already preset this information for you.

  1. Now you just need to click ‘Save’ and then ‘Update’ the page and your new team member profile will appear when you view the page!
Recent Posts