We often talk about Divi modules, but we should rather talk about Divi Builder modules.
Indeed, the modules for build a layout are available from the Divi Builder (Visual Builder) and not from the Divi theme (do not confuse the Divi theme with the Divi Builder).
Good news: this means that you can use the Divi constructor with any theme and not just with Divi.
For example, you could very well use the Divi Builder with Automattic's Twenty Nineteen theme (WordPress theme 2019).
In this article, I propose you to discover the complete list of the 46 modules of Divi... Here is the program :
- What is a module?
- The Divi modules differ according to the Divi Section used
- The 46 modules available to build your pages:
- Accordion Module
- Call to Action Module
- Audio Module
- Side Bar Module
- Switching module
- Blog Module
- Shop Module
- Button Module
- Card Module
- Search module
- Code Module
- Comments Module
- Bar Counter Module
- Circle Counter Module
- Counter Module Number
- Countdown Counter Module
- Posts Scroll Slider Module
- Video Scroll Slider Module
- Slide module
- Optin Email Module
- Contact Form Module
- Gallery module
- Image Module
- Posts Navigation Module
- Tabs Module
- Person module
- Portfolio Module
- Filterable Portfolio Module
- Summary Module
- Login module
- Follow us on Social Networks module
- Separator Module
- Tariff Table Module
- Text module
- Position Title Module
- Testimonial Module
- Video Module
- Full Screen Map Module
- Full-width Code Module
- Full width Posts scroll slider module
- Full width scrolling slider module
- Full Screen Header Module
- Full Width Image Module
- Full Screen Menu Module
- Full Screen Portfolio Module
- Full screen Post Title Module
- Alternatives to Divi modules
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
What is a module?
A module is a small block that is added to a section to build the layout of a web page (layout). Thus, a layout is a succession of small blocks one after the other and/or one next to the other.
When you build a page using a builder page, you add sections in which you add modules.
Page builders revolutionized WordPress: thanks to them, it was possible to obtain "complex" page layouts, since WordPress at the time only offered a classic editor.
Before the version 5 of WordPressIn the case of the CMS, it was only possible to add text, images, shortcodes and HTML to the CMS pages.
Modules are the strength of builders pages. If these page builders do not offer efficient or "trendy" modules, users may turn to competing solutions. The issue is therefore crucial.
It is certainly for this reason that the Divi Builder natively embeds 46 modules while the other builders pages offer add-ons to compensate for their limited modules.
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"
The Divi modules differ according to the Divi Section used
As I was saying, the modules are inserted in sections. Divi offers 3 types of sections:
- the "Normal" sections
- the "Specialty" sections
- the "Full screen" sections
Depending on the sections used, Divi will offer you different modules.
The "Normal" and "Specialty" sections share the same modules. However, specific modules are available for the "Full Screen" sections.
To make a long story short:
- Modules 1 to 37 can be used in the "Normal" and "Specialty" sections (see list in the summary)
- Modules 38 to 46 can only be used in the "Full screen" sections (see the list of contents)
The 46 modules available to build your pages:
Let's discover without further delay the list of 46 modules available in the Divi Builder...
Module #1: Accordion (Accordion)
An accordion allows you to add visible content only if the user clicks on it. This way you will be able to insert a succession of information by making the reading more fluid for the user.
When an accordion opens, the previous one closes. It is ideal to build a FAQ page (Frequently Asked Questions) or to improve part of your sales page.
Divi's "Accordion" module is fully customizable: colors, icons, titles, rounded corners, etc.
Module #2: Call to Action
What would websites be without CTA (call to action)? A call to action should make the user want to click on it.
A simple button is often not enough, the Divi module "Action call" will allow you to add a title + text + button. You can customize the background with an attractive color or even with an inspiring image.
Module #3: Audio (Audio)
Divi's audio module is simple and elegant. It will be necessary or even essential if your blog or site is about music or if you offer podcasts.
You can add a cover image (album cover), choose the background color and various layouts.
Module #4: Side Bar (Sidebar)
The sidebar is also known as a "Sidebar". This is a native feature of WordPress.
A sidebar is a location that is usually located on the blog side of a WordPress site (on the blog page and on each article) and displays your Widgets (Appearances tab > Widgets).
However, the location of the sidebar(s) depends on the theme.
For example, the last theme in WordPress (Twenty Nineteen) does not have a sidebar, if you want to add it, you will have to code it into a children's theme.
The Divi Builder, on the other hand, offers a sidebar module: this means that you can add a sidebar wherever you want. You can place it on the right, left, on a page etc.
You will be able to customize its appearance but also change its content with each new insertion of this module (which is not the case with a classic sidebar).
Module #5: Toggle
The Divi Toggle module (also called "Toggle") is very similar to the Accordion module. You add content to tabs that the user can open or close.
The difference with the accordion is that when you open an accordion, the previous one closes automatically while the Toggle tabs remain open, unless the user closes them.
Module #6: Blog (Blog)
While WordPress allows you to define a page as "the page to host blog posts" (in the Settings tab > Reading), Divi's Blog module will allow you to add a series of posts to the pages of your choice.
This module is very interesting! Some customization options are available such as the choice of displaying items in a list or grid, the categories to be displayed or excluded, icons etc.
Module #7: Shop (Shop)
The Shop module behaves in the same way as the Blog module. Instead of finding your store's products on the Store page only (page generated and/or suggested by WooCommerce), you can display all or part of your products on any page, or even within your items (if you use the Divi Builder) !
Module #8: Button button
What would a web page be without a button? Without a call to action? Essential in a sales page for example, the Divi button module will allow you to choose the background color, the color and the thickness of the border, to add an animation and even an icon. Not to mention the shape of the corners: square, rounded or totally round.
Module #9: Map
Divi's map module allows you to display a personalized Google Map. Sometimes, you won't need this module and you can integrate a card simply by using its URL into a text module... to be tested!
Module #10: Searching
The Search button provides the "search on site" functionality. By adding this module to your layout, you will allow your visitors to do a keyword search within your content. In addition, you can exclude some inappropriate content.
Module #11: Code (Code)
The Divi Code module will allow you to do this easily. This can be a major asset when you want to import/export layouts ready-made with some embedded features.
Attention, for security reasons, only a user with administrator status can add this type of code.
In addition, for this code to work, you will need to create it in a text editor and minimize it (all on the same line / no line breaks).
To learn more, discover how to use the Code module.
Module #12: Comments (Comments)
The Divi Comments module allows you to insert a comment feature anywhere on your page. This prevents your reader from going down at the end of the article to leave you a message. Is that a good idea? To see....
Module #13: Bar Counters
Module #14: Circle counter
It's another way to showcase your skills. Instead of displaying them as a bar, this Divi module allows you to display them as a circle, with the percentage in the center. A "lazy load" animation is used to fill the circle clockwise.
Module #15 : Number counter
This other way of displaying your skills will also allow you to display any other number. You will not be required to use percentages.
For example, a web agency could use it to display the number of projects completed, the number of customers, the number of coffee buses etc.
Module #16: Countdown Timer
The countdown module allows you to display a visual timer with countdown.
It is ideal to create excitement in a "coming soon" page, during a product launch or to announce the upcoming opening of your site.
Module #17: Posts Scroll Slider (Post Slider)
It's a kind of slider that scrolls through some of your articles. You will be able to set the type of item to display, automatic animation, speed etc.
You can also add options such as the parallax effect that gives a nice effect to the slider.
Module #18: Video Slider
The Video Scroll Slider module allows you to display a slider of several videos. As with the post slideryou will be able to adjust some settings to customize its display.
Module #19: Slider (Slider)
The Slide module is simply a "Slider". You can place it where you want and most importantly, you can mix the images with the videos.
You can also activate the parallax option which always gives a very nice effect. On each slide, you can add text and a action call button.
Module #20: Email Optin (Email Optin)
The Email Optin module offers the same functionality as Bloom, the ElegantTheme plugin included in the license.
Bloom allows you to place a registration form at strategic locations on your site while the Email Optin module will allow you to place this form at any location on your page.
It is easy to use and is compatible with about twenty suppliers such as MailChimp, Aweber, FeedBurner, MailPoet and many others.
Module #21: Contact Form
This module offers you the possibility to insert a contact form easily and quickly. You won't have hundreds of possibilities either, but you can still create custom fields.
The Contact Form module is sufficient if you simply want to be contacted. The advantage is that it fits perfectly into your page (from a Design point of view).
Module #22: Gallery (Gallery)
As its name suggests, the Divi Gallery module allows you to insert several images presented as a gallery.
You can choose various options to improve the appearance of the display: add a legend, a shadow, make corners rounded and even change the icon when hovering.
When the user clicks on a photo, it will open in a "lightbox".
Module #23: Image (Image)
The Divi Image module looks like the gallery module. It offers the same types of customizations except that you can only insert one image instead of several.
You can also add an animation and a link (URL) to the image destination.
Module #24: Navigation in Posts (Post Navigation)
This module allows you to insert fully customizable navigation links.
This will give you a "back" and "next" button that will allow the user to navigate freely between certain category or blog pages.
You will be able to configure this module according to several criteria depending on the content or thanks to advanced parameters.
Module #25: Tabs
The Divi Tabs module allows you to display content as tabs separated by dividers. Kind of like a filing cabinet.
You can name each tab with a title and add text, images, videos, shortcodes and more!
Module #26: Person (Person)
The Divi Person module allows you to add a kind of "identity card" to introduce a person.
It is ideal for posting your profile or introducing your team members. You can add a photo, text and links to social networks.
The presentation is rather basic. If you wish to add your bio at the end of your articles, read this tutorial instead.
Module #27: Portfolio
The Divi Portfolio module will only be useful if you use the Divi "projects".
Projects behave like blog posts but in a portfolio way. This is ideal if you want to display your various achievements.
Thus, this module will display your latest achievements where you want, within your page. You will have access to various settings that will allow you to choose certain categories, display in grid or full screen mode etc.
Module #28: Filtrable Portfolio
The Filtrable Portfolio module offers the same functionality as the Classic Portfolio module It allows you to display your completed projects (portfolio).
The difference is that you will be able to display your projects in a categorized way in tabs (tabs).
It is ideal if you are a graphic designer and you have many creations to display such as logos, packaging, flyers, business cards etc.
Module #29: Abstract (Blurb)
The Divi Summary module (Blurb) is a module that can be used in many cases.
It allows you to add text as well as images or icons. If you place these modules on a line divided into 3, 4 or 5 columns, you can align several icons / texts to present your services or summaries pointing to other pages of your site (by inserting a link on this module).
Module #30: Login
The Divi Login module allows you to insert a login form anywhere within your page.
This is ideal if your site offers a part accessible only to member users or some restricted users.
Module #31: Follow us on Social Media Follow
The "Follow us on social networks" module (Social Media Follow) allows you to add up to 14 social network icons.
All you have to do is set them up with your social network links (Facebook page, Twitter account etc.) so that your users become loyal followers!
This module can be inserted anywhere in your page using the Divi Builder.
Module #32: Separator (Divider)
The Divider module allows you to insert a space between two sections.
This space can take the form of a line of which you can choose the color and thickness. You can also decide to use this spacing horizontally or vertically.
Module #33: Princing Table
The Divi Pricing Table module allows you to display your rates in an original and professional way.
It is ideal if you offer your services under 3 different offers. You can highlight one offer over the others and compare the included or excluded services with a visually different display.
You can choose the location of the currency icon used, add a suffix to suggest a subscription rate and a call to action button.
Module #34: Text (Text)
The Divi Text module is certainly the most used module on a site.
By adding it anywhere on your page, you will get a text editor similar to the one offered by WordPress before the Gutenberg version.
In addition, you will have many configuration options.
Module #35: Post Title
The Position Title module displays the title of the article/page in which you insert it.
Options are available to display the highlighting image (above or below the title), add custom metas etc. This will give your page a unique layout.
Module #36: Testimonial
With Divi's Testimonial module, you can easily display your customers' opinions in an original way.
You can add the customer's name, his position within the company, the company's name, a link to a website, a profile picture etc.
Module #37: Video (Video)
The Divi video module is very interesting because it allows you to add much more than just a video.
You can insert a video available in your library (it is not really recommended because it could make your website heavier) or a video hosted on YouTube for example (thanks to its link).
In addition to this, you can display a personalized image that will cover your video while waiting for the user to click to start playback.
Module #38: Full-screen map
With the Fullwith Map module, you can insert a Google Map into a Full Screen section (purple color section). As with the Card module you will need to be in possession of a Google Developer Key APIto be able to use this module.
Module #39: Fullwidth code
The Fullwidth Code module works in the same way as the Code module classic but it can only be inserted in one section Full width (purple section).
Module #40: Fullwidth Post Slider
The Full Width Post Scroll Slider module simply allows you to add a slider of your latest articles.
This module can only be inserted in a full width section (purple) and has the same operation as the module Post scrolling slider module classic.
Module #41: Fullwidth Slider
Module #42: Fullwidth Header
The Fullwith Header module is the ideal module to create a "Header Hero". You can add a large image, text, logo and one or two action call buttons.
This module can only be inserted in a Full width section (purple).
Module #43: Fullwidth Image
The full-width image module works like the Image module classic. You can use it in a Full Screen section (purple section) only.
Module #44: Fullwidth Menu
This is an interesting feature. The Full Screen Menu module is a module only available for Full Screen sections (purple section). That is, there is no "classic version" available in the other types of sections.
This module will allow you to add a new navigation in your pages, different from your main navigation.
Better yet, you could use this module to delete the main navigation of your site and move it down your page.
So, you could first add a section "header hero" followed by the menu (instead of the other way around).
This module will allow you to build original layouts that are out of the ordinary.
By the way, that's what I suggest you do in this tutorial: replace the main menu with a menu that attaches to the scroll.
Module #45: Fullwidth Portfolio
The Full Screen Portfolio module offers the same features as the Portfolio module classic. You can insert your portfolios in a Full Screen section (purple section).
Module #46: Fullwidth Post Title
The full screen post title module works like the module Post title classic. However, like the other "full screen" modules, you can only use it in a Full Screen section (purple section).
Alternatives to Divi modules
We have just seen all the modules that the Divi Builder offers. The list is impressive... Yet it may not be enough according to the needs of your project.
How then to enrich the Divi modules? There are many solutions:
- Add a plugin/addon for Divi: read my article listing the free plugins for Divi. There will certainly be features you are looking for and it's free...
- Use a ShortCode plugin: shortcodes make it very easy to add content, by simply copying and pasting code that looks like this[i.e. my-shortcode]. To discover interesting extensions, read my review dedicated to shortcodes published on WPFormation.
- Even better! Use them to Divi's hidden features for Gutenberg ! These are pre-configured shortcodes that you can display wherever you want.
- Develop (or have developed) your own modules according to your needs: ElegantTheme has recently opened up the possibility of developing its own modules. Certainly, it's not given to everyone because you need to master many technologies and web languages to achieve this, but a seasoned developer should be able to do it easily. Especially when you see the quality of the documentation provided by ElegantThemes.
- Browse through the marketplaces dedicated to Divi: there are quite a few marketplaces that provide advice, tutos, layouts, free or paid plugins... The best known are AspenGrove, DiviCake, DiviBooster, DiviSpace, DiviDen, DiviExtended and I suppose there are still as many...
Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!