5 Ways to Get Creative with Divi’s Person Module

Posted on July 9, 2016 by in Divi Resources | 79 comments

5 Ways to Get Creative with Divi’s Person Module

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-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.

Learn More About Divi 3.0


79 Comments

  1. Very helpfull like every your resources, thanks guys. I have a question. Does exist a method to use divi’s person module into a slider to create a very beautiful testimonials box?

    • Nathan B. Weller

      Short answer: probably. But I’d have to look into it detail to figure out how to do it and decide then whether or not I’d recommend it. Sorry I don’t have a better answer at the moment 🙁

    • The simple way to do this is to make each “person” a separate post. Then make all those posts use the same category. (“testimonials”).

      Then on the page you want to display them, add the post slider module. Select the post category and boom!

      If you want to show multiple testimonies on the same row, create those rows in the post instead of one per post.

      Hope that makes sense.

  2. This video has some good tips.

  3. I really wish there were fields for email and phone number. Then this module would be great on company websites as part of a staff directory.

    • +1

    • Exactly! What is a person without an email or phone? I’ve been adding those in the details/text section, which then must be styled to look right. I hope they add those fields soon.

    • Would be nice indeed

    • Nova – Couldn’t you just as easily add a TEXT module or 2 to do the exact same thing that you are looking for?

        • +1

      • +1

    • Well Nova that is a very easy fix through the code for the person module and not many lines of code either.

      I would love to see that in DIVI 3.0 although I have done that before.

    • +1

      • +1

  4. Love the use of clip-path to make the image circular, I’d stupidly be using border-radius.

  5. These are great looking variations and the tips are very useful. What I am hoping for is that the person module will be driven by a custom post type in the future. DIVI will be ever so much more powerful once we can use the builder to create templates like this. Of course we will also need a grid view that goes with it 🙂

  6. What Nova said.

    Saving this post to refer to again and again. This blog, more than anything else I see on a regular basis, gets me charged up about web design.

    Still, what Nova said.

  7. These are great. I have a site and want to implement the team profile but have many members to add. Any suggestions on the best way to import a spreadsheet (in Google Sheets) to populate these member profiles?

    • Nathan B. Weller

      I think that would require a plugin of some kind.

    • I have a similar issue and decided to try out Custom Post Types for this. It might not have an import function, but it will allow me (hopefully) to make entries faster.

      Does anyone have on opinion on this?

  8. How do you get the counter to look like the one above please?

  9. Was just setting up a divi person module this morning, so shall be trying some out these out later. Many thanks 🙂

  10. Great Tips! Thank You!

  11. position: relative;

    The explanation of why your adding the above is vague, or missing entirely. This is not uncommon in divi videos or text explanations.

    • Nathan B. Weller

      This bit of code is so that your buttons display correctly when the size of the browser changes.

    • The reason for the position: relative; is that an absolute element is always calculating its position by looking at the next element with a relative position that is hierarchically “above” it. Or in other words: The absolute-positioned element is looking for the next parent element that is using position: relative;

      So by defining it, we make sure that the child-element which we’re trying to manipulate and which we’re setting to position: absolute; is not using the page container or some other parent element to calculate it’s position, but rather the parent-element in which it belongs. Hope that helps. 🙂

  12. Yes, there could be more linking options. I personally would like to know how I can add a link to my kickstarter support at Patreon.com

    • Nathan B. Weller

      You could use the same concept behind the button module addition we’ve done above to add an effective cta button to the person module.

  13. I love the profile cards, is there a way to add this as a widget so it shows up in my sidebar?

    • Nathan B. Weller

      Sort of. You can create a full-width page and then use a “special” layout option that includes a sidebar. That way you will be able to use any module you’d like in the sidebar. If you’re worried about this not working on all pages, you are able to save your sidebar elements as global modules and quickly insert them across your site.

  14. Really usefull. Thank’s Nathan

    Alberto

  15. I love the good tips like this.

  16. Is there a way to add a video loop of the team member. I have seen this type on other websites.

    • +1

    • Nathan B. Weller

      Yeah sure, the easiest way to do this would simply be to us an animated gif as your image.

  17. I use the person module to list the gods of my fictional universe:

    It’s a great way to make a fictional “dictionary-style” page look professional and entertaining.

  18. One of your industrious customers has prolly just rocked these snippets into a nifty Divi plugin.

  19. Very good tipps in yiour post!
    But how made you, that the image is to the left of the text? In my person module the image appears always on top of the text.

    • Nathan B. Weller

      If you have the person module in a row with other columns then it will automatically reformat to a vertical layout like our final example. So if you want it to display differently give it two or more columns.

  20. Yes! +1 on adding email and phone icons

  21. Nice Tips Tom, bookmarked this page already

  22. Good useful information.

    Interesting to see what can be done with customising the button with very little CSS. I will revisit the site I am presently working on and put some of this i9nto effect.

  23. I like Divi very much.
    But as housewife, I don’t have time or good sense of design for to built nice website. Right now, I use ePhoto for my theme…
    I hope ePhoto would evolve like Divi or Extra Theme.

    • Nathan B. Weller

      Hi Sprei, honestly that is not likely to happen. However, you could install the Divi Builder Plugin on that site to get the best of both worlds.

  24. Number 5 is really nice but seems to not be responsive on mobile landscape view. The circle ain’t a circle on my iPhone 6s landscape view it gets flat at the top and bottom. Any ideas why?

    • I have this same concern. I created #5, but does not work well on mobile. Any code that could make this work for mobile as well? Basically keeping the circle shape around the photo is what is needed. Thank you for any help! This is the page I am comping up and have this feature towards the bottom of the page: http://brandnew.selmarq.com

  25. Grouping, tagging and filtering on People would be a nice addition; just like Projects. Several kinds of directories would make good use of these features.

  26. Really cool: was just looking for how to make the photos appear in a circle…

    But I could not solve this: in order for the Person’s module to look nice when presenting team members, for each member you need to have same size pictures. Otherwise some pictures is bigger than the others and it does not look “coherent”.

    Would there be a way to make different sized pictures have the same dimensions in the Person’s Module?

    • Here’s how I worked around that, Attila.

      First, for any Person module with an image that isn’t the right size, go to Custom CSS and add this to Member Image:

      max-height: 220px;
      max-width: 220px;

      and replace “margin-top: -100px;” with “margin: -100px auto 12px auto”

      You may need to play with the height, width, and margins a bit. If the heads in your pictures don’t align in the center (they may be too low or high), then you’ll need to add a custom CSS class to the Person module and add this to the Divi Page Settings (hamburger button in top right corner of the Divi Builder):

      .custom-pic img { margin-top: -30px; }

      Again, adjust the margin as needed. Hope this helps!

  27. Thank you Nathan, I’m going to use this very soon!

  28. great article . is divi builder theme is perfect for blogging in which i review some products with affiliate links?

    • Nathan B. Weller

      Yeah it can be. Just depends on how you use it 🙂

  29. Useful! Thank you! Almost half way there!

  30. I’m sorry, perhaps I’m too Dummie but I cannot make circle or roumbos images…any suggestion? The test is extremely clear ma do not work…what mistake?

  31. I’m sorry again but do not work on Firefox!

  32. I’ve been trying to use the circle setup, but it’s not working at all. Any other options?

  33. Cool effects. It would be nice to be able to download a layout with all these examples!

  34. Do this not work in all browsers? I use firefox and can’t get it to work.

  35. Hey guys,

    Thanks for this awesome trick. I was wondering if there is a way to have those same effects for Firefox and IE since they don’t support -webkit.

    Thanks.

  36. Thanks for sharing the tips and tricks. I intended to do the person module’s “Subtle Box Shadow”. But there’s a bit of dilemma. My image is not showing rather it’s showing on the top. Can you please explain what to do regarding this matter?
    Thanks in Advance.

  37. To 5. 5. Custom Profile Card
    If I load an image into the circle (either square or rectangular …) is the circle never quite filled? What size should the image have – pixels x pixels. Thank you!

  38. I saw another comment here too, but no response yet regarding mobile friendliness. I created an updated contact page based on 5. Custom Profile Card but the mobile overlaps and changes circle placement. I have updated the custom padding repeatedly but don’t see any difference on the mobile side. Any suggestions?

    • Hi Jamey-I am having the same issue with the profile cards that you mentioned in your post here. When I clicked on your website for Miles Franklin and reduced the screen size for your cards it appears that you solved the problem-nice work! Would you mind telling me what you did to fix? Thank you so much! Lisa

      • I am having the same problem with mobile. I love how you made it work for mobile Jamey. Would you mind sharing how I could get this to work? Thank you!

  39. I’ve been setting up the #5 custom profile card and so far so good. But I want the name and position to be centered under the person image. How do I get that?

  40. Great showcase! Is it possible to have a horizontal person module with the image to left when using an equal 2 column section?

    Thank you.

  41. I love it…. Will. apply it to my website later

  42. Thanks for the great post!

    I am having trouble with the css clip paths. I paste in the code from the blog, save and update, and no results.

    What am I doing wrong? Does it require the image to be a certain size or a minimum size?

    • I just checked another browser and the css clip paths aren’t working in Firefox 47 on Windows.

      Anyone have suggestions for using css clippaths that works in Chrome, Safari, and Firefox?

  43. No one responding to the questions how to put the image to the left. Great service ;(

  44. Thank you for this. I was having a little trouble at first but when I finally realized that my image needed to be a square everything worked perfectly.

  45. Great blog, as always!

    I’m setting up profile number 5 and when using three different profiles with different amounts of text, even though I have the columns set to equal in the row settings, and added the code you provided, all three are different heights and the View Profile buttons are not lined up.

    Any help is appreciated, and thanks again!

    Greg

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest