We often talk about Divi modules, but we should talk about Divi Builder modules.
Indeed, the modules for constructing a page layout are available from the Divi Builder (Visual Builder) and not from the Divi theme (not to confuse the Divi theme with the Divi Builder).
Good news: this means you can use the Divi Builder with any theme, not just Divi.
For example, you could very well use the Divi Builder with Automattic's Twenty Nineteen theme (the 2019 WordPress theme) for example.
Please note: Since Divi 3.29.x, the Divi Builder has integrated 16 new modules that you will only find if you use WooCommerce. With the arrival of the Divi's WooCommerce BuilderIn addition, 16 new modules have been added to the 46 already present. You can now build your product sheets with the Visual Builder.
In this article, I propose you to discover the complete list of the 46 Divi modules... Here is the program:
- What is a module?
- Divi modules differ depending on the Divi Section used
- The 46 modules available to build your pages :
- Accordion Module
- Call to Action Module
- Audio Module
- Side Bar Module
- Toggle 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 module
- Post Slider Module
- Video Scroll Cursor Module
- Slide module
- Email Optin Module
- Contact Form Module
- Gallery module
- Image Module
- Posts Navigation Module
- Tab Module
- Person Module
- Portfolio Module
- Filterable Portfolio Module
- Summary Module
- Log in module
- Follow us on Social Networks
- Separator Module
- Tariff Table Module
- Text Module
- Module Job title
- Testimonial Module
- Video Module
- Full Screen Map Module
- Full Width Code Module
- Full-width Post Slider Module
- Full-width scroll cursor module
- Full Screen Header Module
- Full Width Image Module
- Full Screen Menu Module
- Full Screen Portfolio Module
- Post title module in full screen
- Alternatives to Divi's modules
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.
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 next to each other.
When building a page with a page builder, you add sections in which you add modules.
Page builders revolutionised WordPress: with them, you could get "complex" layouts, since WordPress at the time only offered a classic editor.
Before the WordPress version 5In the past, one could only add text, images, shortcodes and HTML to the CMS pages.
Modules are the strength of page builders. If these page builders do not offer effective or "trendy" modules , users may turn to competing solutions. The issue is therefore crucial.
This is certainly why the Divi Builder has 46 modules natively on board, whereas the other page builders 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
Divi modules differ depending on the Divi Section used
As I said, modules are inserted into 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 offered 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 table of contents)
- Modules 38 to 46 can be used in the "Full screen" sections only (see list in the table of contents)
The 46 modules available to build your pages :
Without further ado, let's discover the list of 46 modules available in the Divi Builder...
Module #1: Accordion (Accordion)
An accordion allows you to add content that is only visible if the user clicks on it. This way you can insert a succession of information, making the reading process more fluid for the user.
When an accordion opens, the previous one closes. This is ideal for building a FAQ (Frequently Asked Questions) page or for enhancing part of your sales page.
Divi's Accordion module is fully customisable: colours, icons, titles, rounded corners etc.
Module #2: Call to Action
What would a website be without a CTA (call to action)? A call to action should make the user want to click on it.
A simple button is often not enough, so Divi's Call to Action module will allow you to add a title + text + button. You can customize the background with an attractive colour or even with an inspiring image.
Module #3: Audio (Audio)
Divi's audio module is simple and elegant. It's a must-have if your blog or site is music-related or if you offer podcasts.
You will be able to add a cover image (album cover), choose the background colour and various layouts.
Module #4: Sidebar
The sidebar is also known as the "Sidebar". This is a native feature of WordPress.
A sidebar is a location that is usually on the blog side of a WordPress site (on the blog page and on each post) and displays your Widgets ( Appearances tab > Widgets).
However, the location of the sidebar(s) depends on the theme.
For example, the latest WordPress theme (Twenty Nineteen) does not have a sidebar, so if you want to add one, you'll have to code it in a child theme.
The Divi Builder offers a sidebar module: this means that you can add a sidebar wherever you want. You can place it on the right, on the left, on a page etc.
You will be able to customise its appearance but also change its content each time you insert this module (which is not the case with a classic sidebar).
Module #5: Toggle
Divi's Toggle module is very similar to the Accordion module. You add content in 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, whereas 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 > Reading tab), 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, categories to be displayed or excluded, icons etc.
Module #7: Shop
The Shop module behaves in the same way as the Blog module. Instead of finding your shop's products on the Store page only (page generated and/or suggested by WooCommerce), you will be able to display all or part of your products on any page, or even within your posts (if you use the Divi Builder)!
Module #8: Button
What would a web page be without a button? Without a call to action? Indispensable in a sales page for example, Divi's button module will allow you to choose the background colour, the colour and thickness of the border, add an animation and even an icon. Not to mention the shape of the corners: square, rounded or completely round.
Module #9: Map
Divi's map module allows you to display a custom Google Map. Sometimes you won't need this module and you can simply embed a map using its URL in a textmodule... try it!
Module #10: Search
The Search button offers the "search on site" functionality. By adding this module to your layout, you will allow your visitors to search your content by keyword. In addition, you can exclude inappropriate content.
Module #11: Code (Code)
Divi's Code module will allow you to do this easily. This can be a great asset when you want to import/export layouts ready to use with some embedded features.
Please note that, for security reasons, only a user with administrator status can add this type of code.
Also, for this code to work, you will need to create it in a text editor and minify it (all on the same line / no line breaks).
To find out more, discover how to use the Code module.
Module #12: Comments
Divi's Comments module allows you to insert a comment feature anywhere on your page. This saves your reader from having to scroll down to the end of the article to leave you a message. Is this a good idea? We'll see...
Module #13: Bar Counters
Module #14: Circle counter
This is another way to display 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 centre. A "lazy load" animation allows the circle to be filled in a clockwise direction.
Module #15: Number counter
This alternative way of displaying your skills will allow you to display any other number as well. You do not have to use percentages.
For example, a web agency could use it to display the number of projects completed, the number of clients, the number of café busses etc.
Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE
Module #16: Countdown Timer
The countdown module provides a visual timer with countdown.
It's ideal for creating excitement on a "coming soon" page, at a product launch or to announce the upcoming opening of your site.
Module #17: Post Slider
It is a kind of slider that scrolls some of your articles. You can set the type of article to be displayed, the automatic animation, the speed etc.
You can also add options such as the parallax effect which gives a nice effect to the slider.
Module #18: Video Slider
The Video Slider module allows you to display a slider of several videos. As with the slider of postsYou will be able to adjust certain parameters to customise its display.
Module #19: Slideshow
The Slide module is simply a "Slider". You can place it wherever you want and above all, you can mix images with videos.
You can also activate the parallax option which always gives a very nice effect. On each slide, you can add text and a call to action button.
Module #20: Email Optin
The Email Optin module offers the same functionality as Bloomthe ElegantTheme plugin included in the license.
Bloom allows you to place a registration form in strategic places on your site, while the Email Optin module allows you to place this form anywhere on your page.
It is easy to use and is compatible with over 20 providers 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 but you can still create custom fields.
The Contact Form module is sufficient if you just want to be contacted. The advantage is that it fits perfectly into your page (from a design point of view).
Module #22: Gallery
As its name suggests, Divi's Gallery module allows you to insert several images presented as a gallery.
You will be able to choose various options to improve the appearance of the display: add a caption, a shadow, make the corners rounded and even change the hover icon.
When the user clicks on a photo, it will open in a lightbox.
Module #23: Image (Image)
Divi's Image Module looks like the gallery module. It offers the same types of customisation except that you can only insert one image instead of several.
You will also be able to add an animation and a link (URL) to the destination of the image.
Module #24: Post Navigation
This module allows you to insert fully customisable navigation links.
For example, you will get a "previous" and "next" button that will allow the user to navigate freely between certain category or blog pages.
You will be able to set up this module according to several criteria based on the content or thanks to advanced parameters.
Module #25: Tabs
Divi's Tabs module allows you to display content as tabs separated by dividers. A bit like in a binder.
You can name each tab with a title and add text, images, videos, shortcodes and more!
Module #26: Person
Divi's 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 is only useful if you use Divi's 'projects.
Projects behave like blog posts but in a portfolio fashion. This is ideal if you want to display your various achievements.
Thus, this module will display your latest achievements wherever 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 difference is that you will be able to display your projects in a categorized manner in tabs.
This is ideal if you are a graphic designer and have a lot of work to display such as logos, packaging, flyers, business cards etc.
Module #29: Summary (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 (thanks to the insertion of a link on this module).
Module #30: Login
Divi's Login module allows you to insert a login form anywhere within your page.
This is ideal if your site has a section that is only accessible to member users or to certain restricted users.
Module #31: Social Media Follow
The Social Media Follow module 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: Divider
The Divider module allows you to insert a space between two sections.
This space can take the form of a line, the colour and thickness of which you can choose. You can also decide whether you want to use this space horizontally or vertically.
Module #33: Princing Table
Divi's Pricing Table module allows you to display your prices in a unique and professional way.
This is ideal if you offer your services in 3 different packages. You can highlight one offer in relation to the others and compare the services included or excluded thanks to a visually different display.
You will be able to choose the location of the currency icon, add a suffix to offer a subscription rate and a call-to-action button.
Module #34: 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 setting options.
Module #35: Post Title
The Item Title module allows you to display the title of the article/page in which you are inserting it.
There are options to display the highlight image (above or below the title), to add custom metas etc. Thus, your page will get a unique layout.
Module #36: Testimonial
With Divi's Testimonial module, you can easily display your customers' reviews in an original way.
You can add the client's name, position in the company, the company name, a link to a website, a profile picture etc.
Module #37: Video
The Divi Video Module is very interesting because it allows you to add more than just a video.
You can insert a video available in your library (this is not really recommended as it could make your website more cumbersome) or a video hosted on YouTube for example (thanks to its link).
In addition to this, you can display a custom image that will cover your video while waiting for the user to click to start playback.
Module #38: Fullwidth Map
With the Fullwith Map module, you will be able to insert a Google Map in a Fullscreen section (purple section). As with the card module you will need to be in possession of a API Key Google Developerto be able to use this module.
Module #39: Fullwidth code
The Fullwidth Code module works in the same way as the Code module but it can only be inserted in one section Full width (purple section).
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
Module #40: Fullwidth Post Slider
The Full-Width Post Slider module allows you to simply add a slider of your latest articles.
This module can only be inserted in a full width section (purple) and has the same function as the module Scrolling post slider 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 call to action 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 will be able to use it within 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 other types of sections.
This module will allow you to add a new navigation to your pages, different from your main navigation.
Better still, you could use this module to delete the main navigation of your site and move it further down your page.
For example, you could first add a header hero" section 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.
In fact, that's what I propose to do in this tutorial: replace the main menu with a scrollable menu.
Module #45: Fullwidth Portfolio
The Full Screen Portfolio module offers the same functionality as the Portfolio module classic. You will be able to 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 Title of the post module. However, like the other "full screen" modules, you will only be able to use it in a full screen section (purple section).
Alternatives to Divi's modules
We have just seen all the modules that the Divi Builder offers. The list is impressive... However, it may not be enough depending on the needs of your project.
So how do you enrich Divi's 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...
- Add 49 new modules with Divi Supreme Pro.
- Use a ShortCode plugin: the shortcodes allow you to add content very easily, by simply copying and pasting code that looks like this [this is-my-shortcode].
- Even better! Use the Divi's hidden features for Gutenberg ! These are pre-configured shortcodes that you can make appear anywhere 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. Of course, this is not for everyone because you need to master many technologies and web languages to do this, but a seasoned developer should be able to do it with ease. 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, tutorials, 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 the ElegantThemes blog which is full of ideas and tutorials!