Divi's modules: the complete list of 46 modules and their functionality

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.

Learn more about the Divi Builder.

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:

Contents

• What is a module?
• Divi modules differ depending on the Divi Section used
• The 46 modules available to build your pages :
  1. Accordion Module
  2. Call to Action Module
  3. Audio Module
  4. Side Bar Module
  5. Toggle Module
  6. Blog Module
  7. Shop module
  8. Button Module
  9. Card Module
  10. Search Module
  11. Code Module
  12. Comments Module
  13. Bar Counter Module
  14. Circle Counter Module
  15. Counter Module Number
  16. Countdown module
  17. Post Slider Module
  18. Video Scroll Cursor Module
  19. Slide module
  20. Email Optin Module
  21. Contact Form Module
  22. Gallery module
  23. Image Module
  24. Posts Navigation Module
  25. Tab Module
  26. Person Module
  27. Portfolio Module
  28. Filterable Portfolio Module
  29. Summary Module
  30. Log in module
  31. Follow us on Social Networks
  32. Separator Module
  33. Tariff Table Module
  34. Text Module
  35. Module Job title
  36. Testimonial Module
  37. Video Module
  38. Full Screen Map Module
  39. Full Width Code Module
  40. Full-width Post Slider Module
  41. Full-width scroll cursor module
  42. Full Screen Header Module
  43. Full Width Image Module
  44. Full Screen Menu Module
  45. Full Screen Portfolio Module
  46. 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.

Gutenberg has recently given us greater flexibility, but it has not yet buried the previously known page builders: Divi Builder, Elementor or even Beaver Builder.

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...

Learn more about 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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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).

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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)!

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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!

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

Module #11: Code (Code)

Sometimes you will need to add bits of code within your content. This can be HTML, CSS or even Javascript. The kind of code that is usually inserted in the header of a web page.

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.

See the official documentation | Back to summary

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...

See the official documentation | Back to summary

Module #13: Bar Counters

This module allows you to display progress bars with a "lazy-load" animation. This is ideal for displaying skills as a percentage bar. For example: WordPress 90%, Javascript 80%, HTML 95%, CSS 95% etc. The rendering will be optimised if your percentages are different.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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).

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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!

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

If you wish to change the size of the images in your portfolio, read this detailed article.

See the official documentation | Back to summary

Module #28: Filtrable Portfolio

The Filterable 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 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.

See the official documentation | Back to summary

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).

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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).

This module is ideal for developers or to integrate third party code, add Javascript, HTML, CSS etc.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

Module #41: Fullwidth Slider

The Full Width Scroll Slider module fits only into a Full Width section (purple section) and offers the same functionality as the module Classic slide.

See the official documentation | Back to summary

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).

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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.

See the official documentation | Back to summary

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).

See the official documentation | Back to summary

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).

See the official documentation | Back to summary

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!