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
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%
- Your Title Goes Here 50%
Blog
This module is for a blog landing page and displays blog posts in a line or grid.
Post example 3
Lorem ipsum dolor sit amet, consectetuer...
Post example 2
Lorem ipsum dolor sit amet, consectetuer...
Post example 1
Lorem ipsum dolor sit amet, consectetuer...
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.
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
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.
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
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.
Table Title
Subtitle goes Here- This feature is included
- This feature is included
- This feature is included
- This feature is included
- This feature is not included
- This feature is not included
Table Title
Subtitle goes Here- This feature is included
- This feature is included
- This feature is included
- This feature is included
- This feature is not included
- This feature is not included
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.
Slider
This module adds slides that can have images behind the text and buttons. This is not a full width slider.
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.
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.
Note: for the sake of the speed loading of this page, I’ve used an image of the video module not the actual module. Adding embedded videos to your page will slow the loading of that page.
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.
Note: I’ve used an image of the video gallery module not the actual module for the same reason as above.
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.
0 Comments