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

Learn more about the Divi Builder.

In this article, I propose you to discover the complete list of the 46 modules of Divi... Here is the program :

Executive Summary

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.

Recently, Gutenberg has given us a greater flexibility but he has not yet buried the builders pages known until now: Divi Builder, Elementor or even Beaver Builder.

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.

The Divi modules differ according to the sections
The Divi modules differ according to the 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...

Learn more about the Divi Builder.

Module #1: Accordion (Accordion)

module 1: 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #2: Call to Action

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #3: Audio (Audio)

module 3: 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #4: Side Bar (Sidebar)

module 4: 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).

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #5: Toggle

module 5: switchover

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #6: Blog (Blog)

module 6: 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.

See official documentation | Back to the summary

more resources for Divi

Module #7: Shop (Shop)

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

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #8: Button button

module 8: 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #9: Map

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!

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #10: Searching

module 10: search

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #11: Code (Code)

module 11: code

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

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #12: Comments (Comments)

module 12: 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....

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #13: Bar Counters

module 13: bar counter

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. Rendering will be optimized if your percentages are different.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #14: Circle counter

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #15 : Number counter

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #16: Countdown Timer

module 16: countdown counter

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #17: Posts Scroll Slider (Post Slider)

module 17 : post scroll cursor

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #18: Video Slider

module 18: video scrolling cursor

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #19: Slider (Slider)

module 19: slide

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #20: Email Optin (Email Optin)

module 20: 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #21: Contact Form

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

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #22: Gallery (Gallery)

module 22: 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".

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #23: Image (Image)

module 23: 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.

See official documentation | Back to the summary

get Divi - get Divi

Module #24: Navigation in Posts (Post Navigation)

module 24: navigation in posts

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #25: Tabs

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!

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #26: Person (Person)

module 26: 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #27: Portfolio

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.

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

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #28: Filtrable Portfolio

module 28: filterable 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #29: Abstract (Blurb)

module 29: Summary

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

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #30: Login

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.

See official documentation | Back to the summary

beginner tutorial to learn how to use Divi

Module #31: Follow us on Social Media Follow

module 31: Follow us on Social Networks

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #32: Separator (Divider)

module 32: Separator

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #33: Princing Table

module 33: Tariff Tables

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #34: Text (Text)

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

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #35: Post Title

module 35: Position 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #36: Testimonial

module 36: Testimony

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #37: Video (Video)

module 37: 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.

See official documentation | Back to the summary

more tips for Divi

Module #38: Full-screen map

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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #39: Fullwidth code

module 39: Full width 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).

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

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #40: Fullwidth Post Slider

module 40 : Full width Posts scroll 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.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #41: Fullwidth Slider

module 41 : Full width video scroll slider

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

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #42: Fullwidth Header

module 42 : Full Screen 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).

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #43: Fullwidth Image

module 43: Full Width Image

The full-width image module works like the Image module classic. You can use it in a Full Screen section (purple section) only.

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #44: Fullwidth Menu

module 44: full width 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.

See official documentation | Back to the summary

Try Divi

Module #45: Fullwidth Portfolio

module 45: Full Screen 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).

See official documentation | Back to the summary

Divi Tips: the blog dedicated to the Divi theme (tips, tutorials, resources etc)

Module #46: Fullwidth Post Title

module 46: Full width job 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).

See official documentation | Back to the summary

more resources for Divi

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!

The ultimate list of 46 Divi modules
The modules of the Divi Builder
libero ultricies diam in ipsum Praesent ipsum

Pin It on Pinterest

Shares
Share This