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:
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)
Full Width Testimonials
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:
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:
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)
Grid (Masonry) Layout
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:
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:
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):
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:
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:
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:
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:
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):
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:
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:
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
Left Aligned 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
Half Width
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:
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:
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:
