Earlier this month our DIVI Person Plus Module has become available for sale. This plugin offers a very versatile alternative to the standard, rather limited DIVI Person Module that is part of the DIVI Page Builder / DIVI Theme for WordPress. Our DIVI Person Plus Module module gives you more social icons, more content options, and more design options. In this post we will show you how to get started with the module, while also making optimal use of the features that DIVI offers.
In the introduction video to the DIVI Person Plus Module we already showed you the content and design features of this module. In this post we will show you how to get started in a way that makes the most of some standard DIVI features that can also be applied to this module. We will show you how to implement the module on your site using the following scenario:
- You have a page where you want to display all team members
- You have project pages where you want to show just the team members working on that project
We will assume that you want to implement this in such a way that:
- One design is automatically applied to all team members, and later changes in that design will be automatically applied to all team members wherever they are on your site. To achieve this, we will make use of the DIVI feature of default presets.
- A team member is displayed at multiple places on the site, and later changes in that person’s data – for example, the addition of a new social media link – will automatically be applied wherever that person appears on your site. To achieve this, we will make use of the DIVI feature of global modules.
Read below how to do this, or watch the video on top of this post if you prefer that!
1. Apply One Design to All Team Members
The steps to take are the following:
1. Add the first person to your team page and design that module according to your wishes.
In the video we create this design, using the following options in the design tab:
- Networks toggle: set a custom network icon color
- Spacing toggle: set the padding to 15px for top, bottom, left and right
- Column Layout toggle: select ‘2 columns + (pre)bio underneath’
- Box Shadow toggle: select the first box shadow option
You may also want to change the design options for the name and position. By default, these are displayed in the standard design for h3 (name) and h5 (position) headings on your site.
Prof. dr. Jane Doe
Professor of Applied ethics
2. Make your design the default preset for the module
- Go to the preset settings, which you can find at the top of the module settings
- Select ‘create new preset from current styles’
- Give your preset a name that makes sense to you (e.g. ‘my standard team member’)
- Turn on ‘Assign Preset to Default’ to make your design the default for every new person that you add to the site with the DIVI Person Plus Module
That is all! From now on, every team member that you add to your website will automatically be displayed in this design. You can:
- Still adjust the design for each individual person without consequences for the other team members
- Create more presets if you want to easily apply different designs on different parts of your site
- Make adjustments to the preset, which will automatically be applied to all persons on the site to which that preset has been applied (see next step)
3. Optional: make adjustments to the preset later on
- Click on the pencil icon to edit the preset styles
- You are taken to the preset settings (grey background instead of purple)
2. Display One Team Member on Multiple Pages
1. Save the persons on the team page to the DIVI Library as a global modules
- Click on the ‘Save Module to Library icon in the grey module options bar
- Add it under the person’s name to easily find it back in the library later on, and make sure to select ‘Save as Global’
- The grey module options bar becomes lime green to indicate that the module is now global
- Repeat this process for each team member, saving each to the library under their own name
- Save the page so that from now on it will use the global modules
2. Add the newly created library items to other pages where you want the persons to appear
- Click the ‘Add New module’ icon as you normally would when adding an empty module
- Go to the ‘Add From Library’ tab and find + add the person
That is all! From now on, if you change or add data for the person, those changes will automatically applied to all instances on the website where the global module has been added!
0 Comments