5 Ways to Get Creative with Divi’s Person Module

How to Create Responsive Tables in WordPress That Don’t Suck
July 9, 2016
5 Stunning Divi Site Makeovers And What Makes Them Super Effective
July 10, 2016
Show all

Welcome to Day 40 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


Divi-Person-Module-Default

An example of the default Divi Person Module

The Divi Person Module is an easy way to create a personal profile block for you or an individual on your team. It combines text, imagery and social media links into a single module and is commonly used on About Me or Team pages. But there are a few other less obvious instances in which you might want to use Divi’s person module on your website:

  • Community members: Showcase the people that make up your social group or community.
  • Notable people: Does your organization have key historical people, such as founders, who you want visitors to know about?
  • Awardees/nominees. Showcase those you have singled out for acclaim by giving them a spot on your website.
  • Speakers/presenters. If you have an event website, you could use the Person Module to showcase your speakers and provide some information about them to your attendees.

As you can see the Person Module is a useful and highly versatile tool that you will likely want to use over and over again. But you may not always want to use it in the same way. That’s why in today’s post we’re going to show you five ways that you can get creative when it comes to styling Divi’s Person Module.

5 Ways to Get Creative with Divi’s Person Module

Subscribe To Our Youtube Channel

1. Abstract Background Image & Custom Padding

Divi-Person-Module-Abstract-Background-Image-with-Custom-Padding

The Divi Person Module with an abstract image background and custom padding.

To achieve this style of Person Module on your own Divi site there are a few simple steps to follow. First, navigate in the Person Module Settings to the Advanced Design Settings tab. Scroll down to the “Background Image” setting and click the “Upload An Image” button. Select whatever image you prefer. I would recommend something subtly abstract so as not to be too distracting but still provide some texture.

Next, navigate in your Person Module Settings to the Custom CSS tab. In the code box labeled “Member Description” place the following CSS:

padding-right: 20px;

And in the code box labeled “Title” place this CSS:

padding-top: 50px;

When you’ve done this click the green “Save & Exit” button at the bottom of the Person Module Settings modal. Save or update your page and then view the result on the front-end.

2. Outset Border & Custom Padding

Divi-Person-Module-Outset-Border-with-Custom-Padding

The Divi Person Module with an outset border and custom padding.

To achieve this style of Person Module, open up the module settings and navigate to its Advanced Design Settings tab. Scroll down until you see the option to “Use Border”. Flip that switch to “yes” and set your border width to 5px. Set your border style to “Outset” and match your background color to your border color. I chose white for both in my example.

Next, we need to repeat the custom padding we used for the example above. Navigate in your Person Module Settings to the Custom CSS tab. In the code box labeled “Member Description” place the following CSS:

padding-right: 20px;

And in the code box labeled “Title” place this CSS:

padding-top: 50px;

When you’ve done this click the green “Save & Exit” button at the bottom of the Person Module Settings modal. Save or update your page and then view the result on the front-end.

As a side note, if you’d like to experiment with other border styles there are eight to choose from including the outset option used above. Depending on the project and how you use them there are quite a few ways you can achieve interesting and beautiful styles with the Person Module’s built-in border style options.

3. CSS Clip Paths

The Rhombus Clip Path

Divi-Person-Module-Clip-Path-1-Rhombus

The Divi Person Module with a CSS clip path applied in the shape of a rhombus.

CSS clip paths are like clipping masks in photoshop but with CSS. To use them on your Person Module as I have in these examples you will simply need to add a short snippet of code in your Person Module Settings’ Custom CSS tab in the box labeled “Member Image”.

For the rhombus shape, add this to the Custom CSS tab in the box labeled “Member Image”:

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

The Circle Clip Path

Divi-Person-Module-Clip-Path-2-Circle

The Divi Person Module with a CSS clip path applied in the shape of a circle.

For the circle shape, add this to the Custom CSS tab in the box labeled “Member Image”:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);

The Message Box Clip Path

Divi-Person-Module-Clip-Path-3-Message-Box

The Divi Person Module with a CSS clip path applied in the shape of a message box.

For the message box shape, add this:

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

If you would like to easily find and add even more shapes using clip paths I recommend using this css clip path shape generator.

4. Subtle Box Shadow

Divi-Person-Module-Subtle-Box-Shadow

The Divi Person Module with a subtle box shadow applied.

This style is great because it accomplishes the same thing as a border, but it’s much more subtle and (in my opinion) sophisticated. And it’s easy to implement!

Simply add the code snippet below to your Person Module’s Custom CSS tab under “Main Element”:

box-shadow: 0 0 20px rgba(0,0,0,.1);

5. Custom Profile Card

Divi-Person-Module-Custom-Profile-Card

The Divi Person Module with multiple customizations applied to achieve a profile card.

With our final Person Module style we’ve really pulled out all the stops. Not only do we have custom styling for the person module itself but we’ve added a button module and column styles you’ll have to add in the row settings. But don’t worry, it’ll still be simple when you follow along step-by-step. Here we go!

Divi-Person-Module-Custom-Profile-Card-Row-Settings

First, open up your row settings and navigate to the Custom CSS tab. In the code boxes labeled “Column 1 Main Element”, “Column 2 Main Element”, and “Column 3 Main Element” place the following code:

position: relative;

Next, open up your Person Module and navigate to its Advanced Design Settings tab. Set the header front to bold and all caps. Set your background color to white and add 40px of padding to all sides.

Then, jump over to the Custom CSS tab. Under “Main Element” enter the following:

box-shadow: 0 0 20px rgba(0,0,0,.1);

Under “Member Image” enter this:

border-radius: 200px;
overflow: hidden;
margin-top: -100px;
box-shadow: 0 0 20px rgba(0,0,0,.1);
border: 2px solid #fff;

When you’re finished, click the green “Save & Exit” button at the bottom of the Person Module Settings modal. Now we need to add our button module.

Add your Button Module directly beneath your Person Module. Open up its settings and navigate to its Advanced Design Settings tab. Flip the switch for “Use Custom Styles for Button” to yes. Set the button text color to white. Set the button background color to green (#7cda24). Next to the button font select the bold and all caps options. Choose no for “Add Button Icon”. Slide the “Button Hover Border Radius” to three.

Hop over to the Custom CSS tab. Under “Main Element” add the following CSS:

box-shadow: 0 0 20px rgba(0,0,0,.1);
margin-top: -50px;
left: 50%;
transform: translate(-50%,0);
position: absolute;
z-index: 2;

When you’re finished, click the green “Save & Exit” button at the bottom of the Button Module Settings modal. Save your draft or update the page and view the results on the front-end. You should now have a beautiful custom profile card created with Divi’s Person Module. If you want more than one, simply duplicate the modules you’ve created and swap out the content per person.

Wrapping Up

The Divi Person Module can be used very creatively to show the human side of your website. With a few simple customizations you can (literally) put a face to the people behind your organization in a way that’s true to your brand.

Are you using the Divi Person Module on your website? If not, hopefully we’ve given you some ideas to get started. Feel free to use the customizations we’ve shared above directly or as inspiration for your own unique customizations.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Article thumbnail image by Anna Frajtova / shutterstock.com.

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 40

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Ways to Get Creative with Divi’s Person Module appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar