Divi Modules

This page shows all the Elegant Themes Divi Builder Modules with a description of what they do on the left (on top if viewed on a mobile) and an example (on the right or below description if on mobile).

They are in alphabetical order as they are shown when you click to add a module.

In most cases the styling has been left as the default styling that comes with the module.

The Woocommerce modules are at the bottom of the page. They will not show as options unless you have the Woocommerce plugin activated.

Example products have been made to populate the Woocommerce modules.

Accordion

This module has a title and body text.

The first one is always open and the rest are closed with just the title showing.

They work well if you have questions and answers.

As you click on one the open one closes. So only one is open at any one time.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Audio

This module allows you to link to an audio file.

You can add an image, a Title, Artist Name and Album Name

Your Title Goes Here

by Artist Name | Album Name

Bar Counter

This module allows you to have bars with percentage count.

Styling allows for a Title and coloured bar.

  • Your Title Goes Here 50% 50%
  • Your Title Goes Here 50% 50%

Blog

This module is for a blog landing page and displays blog posts in a line or grid.

Blurb

This module has a title, space for body text and either an image or an icon.

Images area always on the top of the text.

For icons, you can choose for it to be above or to the left of the text.

 

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. 

Button

This module is a button for a link.

Buttons can have hover styling or an icon on hover.

Call to Action

This module is a call to action that has a title, body text and a button all in one module.

The default styling shown isn’t the best!

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Circle Counter

This module is a counter in a circle.

It has a title and a counter in the middle of the circle. You can toggle the percentage sign off. The number range is 0 to 100.

%

Your Title Goes Here

Code

This module allows you to add code to a page.

It can take shortcodes or an iframe code for an embedded form.

Comment

This module allows you to display comments on a page or post.

0 Comments

Contact Form

This module allows you to have a simple contact form on a page.

The disadvantage of Divi’s native contact form is that it doesn’t store submissions in the database so if submitted forms don’t get to you, you have no way of knowing and could miss out on valuable messages.

Title

4 + 1 =

Countdown timer

This module allows you to have a countdown to a specific date and time.

It can be styled nicely (default styling shown).

Your Title Goes Here

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Divider

This module is a line that can be used as a spacer.

It can be styled in lots of ways. Solid, dash and dotted shown.

Email Optin

This module allows you to add a sign up form to your website.

Filterable Portfolio

If you are using Divi’s Project post type you can make a filterable portfolio with this module.

Gallery

This module will make a gallery of images.

You can choose a grid or slider and whether to show or hide titles.

Gallery Slider
Gallery Grid

Icon

This module allows you to place an icon on a page.

You can style and size it as you wish. There are many icons available.

Image

This module adds images to the page.

Login

This module allows you to add a custom login page and style to your site.

Map

This module adds a Google Map to the page. You will need a Google API key for this module to work.

Menu

This module adds a menu to your page.

Number Counter

This module adds a number counter to your page.

You can choose to have just the number with or without the title. 

%

Your Title Goes Here

Person

This module has a space for a photo, Name, Position and a paragraph block for details.

It has social media links built in but is missing Instagram!

Another down side is that you cannot centre the image!

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Portfolio

This module is the same as the filterable portfolio excluding the filter facility!

Post Navigation

This module works on the blog and gives you navigation buttons at the bottom of a post. 

Pricing Tables

This module adds a table for offering pricing to your page.

The styling shown is default, this module can be styled much better!

You can add as many columns as you need.

Search

This module adds a search facility to your site. It only works with pages and posts. 

Sidebar

This module adds a sidebar that works with WordPress widgets.

Recent Comments

    Slider

    This module adds slides that can have images behind the text and buttons. This is not a full width slider.

    Your Title Goes Here

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Your Title Goes Here

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Social Media Follow

    This module adds icons and links for your social media sites.

    This is the list of social media sites available. 

    Amazon, Bandcamp, Behance, BitBucket, Buffer, codePen, DeviantArt, Dribble, Facebook, Flickr, Flipboard, Foursquare, GitHub, Goodreads, Google, Google+, Houzz, Instagram, iTunes, Last.fm, Line, LinkedIn, Medium, Meetup, Myspace, Odnoklassniki, Patreon, Periscope, Pinterest, Quora, Reddit, ResearchGate, RSS, Skype, Snapchat, SoundCloud, Spotify, Steam, Telegram, TikTok, TripAdvisor, Tumblr, Twitch, Twitter, Vimeo, VK, Weibo, WhatsApp, XING, Yelp, YouTube.

     

    Tabs

    This module gives you a box with tabs. Tabs have titles and a space for paragraphy text.

    These can be clicked between. You can add as any tabs as you like.

    Default styling shown. 

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Testimonials

    This module gives you a testimonial with space for an image (this can be removed). 

    Person’s name and paragraph for review. You can remove the name and the quotes at the top of the box. 

    Default styling shown. 

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Name Goes Here

    Text

    The text module allows you to have blocks of text on the page. 

    It’s also used for headers. 

    It always contains dummy text. 

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Toggle

    Toggle modules work the same way as the Accordion, but they are independant of each other. 

    So they open individually and can all be open or all be closed. 

    Default styling shown.

    Your Title Goes Here

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Your Title Goes Here

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Your Title Goes Here

    Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

    Video

    The video module allows you to add a video to the page without having to host the video on the website. 

    You add the video via a url link. 

    You can also host the video on the site if you wish. 

    Video Slider

    The module is the same as the video but allows you to add more than one video in the slider.

    You add the video via a url link or host the video on the site if you wish.

    Woocommerce modules

    Woo Breadcrumbs

    The module gives you the navigation information for the product.

    In this example you can see that the sample product is in the Divi Modules category. 

    Woo Cart Products

    This gives you a cart module.