Divi Theme Modules - Overview and Details

Divi Theme Modules

There are lots of modules (or elements) in the Divi Theme library to help you create stunning websites fast.

The problem can be getting an overview of all of these modules, and knowing that they all do.

This Divi Theme Module overview is an effort to do that, and to help you see what is possible.​

Blurb Module

The Divi blurb module is simply an image/icon with text below it.

Such a module is typically used to display a service or feature, often side-by-side on a page.

Features:

  • Unlimited colors for the icons and surrounding circle
  • Over 300 icons
  • Upload an image instead of an icon
  • Add a circle around the icon
  • URL for clicking the icon (opening in a new window, or not)
  • Title and standard WordPress text below icon/image

Below is an example of 3 different blurbs on a page:

Divi Modules - Blurb

Testimonial Module

The Divi Testimonial module is an easy way to add a testimonial box to a testimonial page, sales page or even your home page.

Depending on the space you have available, you can use a full-width testimonial, or narrower box to display the testimonial information.

Features:

  • Name, Job Title, Company Name
  • URLS for company and image
  • Testimonial text
  • Quote icon on/off
  • Background color for testimonial box
  • Text color (lighter text needed for dark backgrounds - like some examples below)

Below is an example of various testimonial layouts and colors:

Narrow Testimonials (when less space like 2 columns)

Divi Module - Testimonial Narrow

Full Width Testimonials

Divi Module - Testimonial Wild Colors

Person Module

The Divi person module is stylish way to add your team members (or yourself) to a team or about page.

Similar to the testimonial module, it allows you to put a name, title, and description, along with a very large and prominent photo of the person.

Features:

  • Name, Job Title, Description
  • Social Media profile links (Facebook, Twitter, Google+, LinkedIn)
  • Photo (including control over animation on/off)
  • Full control over fonts, text color, icon color etc

Below is an example of two person modules:

Divi Module - Person

Pricing Module

If you have different levels of a product or service, it is often hard to show them in comparison to one another.

The divi pricing module is the perfect way for your buyers to compare prices and features.

Features:

  • Title and sub title for each pricing level
  • per (year, month etc) on/off
  • Label for currency (eg. $) in front of numbers
  • List of features (included, excluded) per level
  • Highlight one level as a featured product (shown blue below)
  • Label for button and URL when clicked
  • Full control over text, color, font etc.

Below is an example of the pricing module:

Divi Module - Pricing

Blog Module

If you want a specific blog layout on your blog page, the blog module gives you full control.

You can choose between two main layout types, Standard and Masonry (aka Pinterest) style.

Features:

  • Layout choice - Grid/Masonry or full width (shown in the images below)
  • Number of posts shown
  • Control over the information shown (author, date, category)
  • Blog Image (on / off)
  • Full post text or just excerpt
  • Read more button on/off
  • Which Categories to show
  • Pagination on/off

Below is an example of the both layouts of the blog module:

Full Width (Standard)

Divi Module - BLog Full Width Standard

Grid (Masonry) Layout

Divi Module - Blog Grid Masonry

Filterable Portfolio Module

The Portfolio Module from Divi is the perfect way to display your portfolio as a web designer or artist

You can choose between two main layout types, Standard and Grid/Masonry (aka Pinterest) style.

And it comes with a category filter above it for easy filtering of portfolio items.​

Features:

  • Layout choice - Grid/Masonry or full width (shown in the images below)
  • Number of portfolio items shown
  • Title of the module to display above the portfolio
  • Categories of items to display
  • Display category below portfolio on/off
  • Pagination on/off

Below is an example of the grid layout of the portfolio module:

Divi Module - Portfolio Grid

Contact Form Module

Every website needs a contact page, or perhaps just a contact form on a special page on your website.

And of course you could add it via a plugin, but with Divi it comes in a module that you can place right inside your pages!

Features:

  • Title of the form
  • Email address to send forms to
  • Captcha on/off
  • Full control over text, color, font etc.

Below is an example of the contact form module:

Divi Module - Contact Form

Number Counter Module

Need to display some numbers with a label on your site, then these animated number counters are stunning

The numbers increase until the specified value.

Features:

  • Colors of the Numbers and Title
  • Value to count up to
  • Whether to display the % sign

Below is an example of some numbers counters (with animation):

Divi Module - Numbers counter

Circle Counters Module

Great for showing a list of numbers that are easily comparable in a side by side display.

These icons appear as circles that are animated to the percentage given, and in the color of your choice.

Features:

  • Colors of the circular bar
  • Percentage for the bar to fill
  • Title of the counter
  • Whether to display the % sign

Below is an example of some circular counters:

Divi Module Circular Counter

Bar Counters Module

Great for showing a list of numbers that are easily comparable in a side by side display.

The current web trend is to use them for showing individual skills (although it is dubious if this adds any value).

Features:

  • Colors of background, text and bar
  • Set text per counter
  • Add numerous counters in a stack
  • Set percentage of each counter
  • Counters animate to full percentage when shown on screen

Below is an example of various testimonial layouts and colors:

Div Module Bar Counters

Countdown Timer Module

Perfect for a coming soon page or upcoming product launch or webinar.

The countdown timer is great for adding a sense of urgency to a page and priming your visitors for action.

Features:

  • Colors of background, text and bar
  • Date to end countdown
  • Title above countdown timer

Below is an example of a Countdown Timer:

Divi Module Countdown Timer

Social Media Follow Module

Growing your following on social media is super important, and with these icons you can easily do that.

Configure which social media sites you want to attract connections on and style the buttons almost any way you want!

Features:

  • Style of button, including standard social media colors, or your brands or any color per icon
  • Add the word "follow" next to the icon so people know it's not a share button
  • Choose from squares or cirlces

Below is are most of the options shown:

Divi Module Social Follow Icons

Slider Module (or Full Width Slider)

Sliders are very popular in web design right now and allow you to display a variety of images, one after another, anywhere on your website.

They are most popular on the top of the home page.

The Divi slider module is very simple to set up and configure, and allows you to easily place sliders on your website.

Features:

  • Image or video in each slide (including vertical alignment, background, alt text)
  • Parallax effect on/off (this is when the background stays still during scrolling)
  • Arrows and circles for next/previous slide on/off
  • Title, text and button/button url for each slide (similar to a call to action)
  • Background image or video for sliders that are not full-width

Below is a simple example of a slider with title and text (no button):

Divi Module Slider

Video Slider Module

Video Sliders are very useful if you have a series of videos to show and the user can choose them from a list below.

The videos can be selected from a sliding list as shown below.

Features:

  • Videos and image overlay for each
  • Arrows and circles for next/previous slide on/off
  • Slider controls light or dark (depending on color of background)

Below is an example of a video slider with four videos:

Divi Module - Video Slider

Google Maps Module (or Full Width Map)

Need a Google map in your contact page or similar?

This module has you covered, with an easy way to insert a Google map, with a pin at a specific location.

There is also a Full Width Map  module which is exactly the same as this one, only it spans the whole width of your page.​

Features:

  • Center of map address (where to center the map when loading for the first time)
  • Map Pin address (where to show the red pin on the map)
  • Pin Title and Content (text that appears when clicking on the pin

Below is an example of a Google map:

Divi Module - Google Map

Call To Action Module

Calls to action are very handy for getting sign ups to your newsletter, or driving traffic to a specific offer or page.

So the Call To Action module is an easy way to set up that within Divi.

Features:

  • Full control over Title, Text and Button
  • Left and Right alignment too, so that you can place it next to an image (see below)

Below is an example of some different Call to Action Modules:

Standard center aligned, full-width

Divi Module -Call To Action full

Left Aligned with Image

Divi Module - Call To Action With Image

Email Signup Module (Newsletter)

It's important to collect email addresses from your visitors and start sending them content, like a newsletter.

This Newsletter module is the simplest way to set that up.

Features:

  • ​Connects to Aweber and Mailchimp, giving you a choice of lists from there
  • Full control over Title, Text and Button

Below is an example of some different Email Signup Modules:

Standard Sign Up, full-width

Divi Module - Email Signup

Half Width

Divi Module - Newsletter

Toggles Module

This kind of module is perfect for display lots of information like in an FAQ page.

Each section has a title, which can be opened/closed to show the text that goes with it.

Also, when you open a section, it stays open if you open another one (different to the Accordion module below, which closes the other)​

Features:

  • Title and Content
  • Open or Closed when page loads
  • Color, Font, size of all elements (title, text, icon, background)

Below is an example of various testimonial layouts and colors:

Divi Module - Toggle / Accordion

Accordion Module

Similar to the Toggles module, except only one element can be opened at a time

It is also a great way to show/hide slabs of text with a title (such as an FAQ).

Features:

  • Title and Content
  • Open or Closed when page loads
  • Color, Font, size of all elements (title, text, icon, background)

Below is an example of an Accordion map:

Divi Accordion Module

Tabs Module

Tabs are another way of presenting large amounts of text, but this time in one location.

The tabs are layered on top of each other, and clicking on the Tab title opens the new text. 

They appear similar to folders in your office.​

Features:

  • Titles and text/content for each tab (add as many as you want)
  • Order of tabs can be changed by dragging and dropping tab elements
  • Advanced settings for all colors, fonts and sizes within the tabs

Below is an example of a Tab Module:

Divi Module - Tabs