We often talk about Divi modules, but we should talk about Divi Builder modules.
Indeed, the modules for build a page layout are available from the Divi Builder (Visual Builder) and not from the Divi theme (don't 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.
Note: As of Divi 3.29.x, the Divi Builder has integrated 16 new modules that you'll only find if you use WooCommerce. With the arrival of the Divi's WooCommerce Builder16 new modules have been added to the 46 modules 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
- Module Code
- Comments Module
- Bar Counter Module
- Circle Counter Module
- Counter Module Number
- Countdown module
- Posts Slider Module
- Video Scroll Cursor Module
- Slide module
- Email Optin Module
- Contact Form Module
- Gallery module
- Image Module
- Posts Navigation Module
- Tabs 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 Posts Scrolling 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 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 next to each other.
When you build a page with a page builder, you add sections in which you add modules.
Page builders revolutionized WordPress: thanks to them, you could get "complex" page layouts, since WordPress at the time only offered a classic editor.
Before the version 5 of WordPressIn the past, you 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 could turn to competing solutions. The issue is therefore crucial.
This is certainly why the Divi Builder has 46 modules natively on board while 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 fit 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 proposed for the "Full screen" sections.
Long story short:
- Modules 1 to 37 can be used in the "Normal" and "Specialty" sections (see the list in the summary)
- Modules 38 to 46 can be used in the "Full screen" sections only (see the list in the summary)
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. Thus you can insert a succession of information while making the reading 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 a part of your sales page.
The Divi Accordion module is fully customizable: colors, 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 color 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 color 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 offer a sidebar, so if you want to add one, you'll have to code it in a child theme.
The Divi Builder, on the other hand, offers a sidebar module: this means that you will be able to 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 customize 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, 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 > Reading tab), Divi's Blog module will allow you to add a series of posts on 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 in a grid, the categories to be displayed or excluded, the icons etc.
Module #7: Shop
The Shop module behaves in the same way as the Blog module. Instead of finding your store 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, the Divi Button Module will allow you to choose the background color, the color 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 go with some embedded features.
Attention, for security reasons, only a user with administrator status can add this kind of code.
Also, for this code to work, you will need to create it in a text editor and minify it (everything on the same line / no line breaks).
To find out more, discover how to use the Code module.
Module #12: Comments
The Divi 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 post 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 center. A "lazy load" animation allows you to fill the circle 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 won't 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 coffee buses, etc.
Module #16: Countdown Timer
The countdown module allows you to display a visual timer with countdown.
It's ideal for creating excitement on a "coming soon" page, during 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 multiple videos. As with the post sliderYou will be able to adjust some parameters to customize 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 plugin of ElegantTheme included in the license.
Bloom allows you to place a registration form in strategic places on your site while the Email Optin module will allow you to place this form anywhere on your page.
It is easy to use and is compatible with about 20 providers like 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 indicates, the Gallery module of Divi, 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 icon on hover.
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 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 customizable navigation links.
Thus, you will get a "back" 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 depending 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's 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 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 difference is that you will be able to display your projects in a categorized manner in tabs.
It's ideal if you are a graphic designer and you 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 on 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 to use this spacing 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 will be able to highlight one offer compared to the others and compare the included or excluded services 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), 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 will be able to add the client's name, position within 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 because it could make your website heavier) or a video hosted on YouTube for example (thanks to its link).
In addition to that, you can display a custom image that will cover your video while waiting for the user to click to start the 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 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).
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 yet, you could use this module to delete the main navigation of your site and move it further down your page.
So, 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 suggest you do in this tutorial: replace the main menu with a menu that is fixed to the scroll.
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've just seen all the modules that 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...
- Use a ShortCode plugin: shortcodes make it very easy to add content, by simply copying and pasting a code that looks like this [this is-my-shortcode]. To discover interesting extensions, read my magazine dedicated to shortcodes published on WPFormation.
- Even better! Use the Divi's hidden features for Gutenberg ! These are pre-configured shortcodes that you can make appear everywhere you want.
- Develop (or have developed) your own modules according to your needs: ElegantTheme has recently opened the possibility to develop its own modules. Of course, this is not for everyone because you must master many technologies and web languages to do so, 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 Divi dedicated marketplaces: there are quite a few marketplaces that provide tips, 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!