Divi includes 46 modules to place within rows to build your layouts. That’s a lot of Divi modules! Some of them are easier to understand than others. It’s sometimes difficult to know which module to use. In this article we’ll look at every Divi module and describe what they do.
Table of Contents
Every Single Divi Module
What are Divi Modules?
A Divi module is a content element that’s represented visually by a block. We can drag and drop that block anywhere within sections, rows, and columns to build our layouts. Each module has individual settings that can be adjusted with visual adjustments such as color selections, slider controls, or switches. They can be customized even further with CSS.
Without modules we would have to handle the code itself – pasting it into the location we want it to appear and customizing each element within the code. Not only would this be messy and confusing, it would have a high learning-curve and would limit the use of Divi to programmers.
The purpose of Divi is to bring that high-level of development to the masses so anyone can build a website. Modules are the result of that goal.
The Ultimate List of Divi Modules
There are 46 Divi modules built into the Divi Builder. 37 are regular width (which work in Standard and Specialty sections) and 9 are full-width (which are versions of regular modules and work in Fullwidth sections).
In this article we’ll take a look at each module. I’ve also provided links to see a detailed tutorial about each module from Elegant Themes’ documentation. A few of the fullwidth versions don’t have tutorials, so I’ve linked those to the regular versions.
Accordions are a great way to show a lot of information in a small space, and are often used to show instructions, FAQ’s, lists, features, or any information that can be revealed when needed.
The audio module lets you embed an audio file complete with a custom player that’s great for single tracks of albums, complete albums (use multiple modules for more than one track), podcasts, or any type of audio sample.
Bar Counters provide an interesting way to display as many stats as you want with lazy-loading animation to make those stats stand out.
The blog module displays posts from your blog, either all or by category, and with either a single or multi-column format.
Blurbs are great for showcasing small pieces of information, such as skills, features, or services, and can include icons or images, and it has a content area just like the standard WordPress editor.
Buttons include text, links, icons, backgrounds, etc., and work great as stand-alone modules or as the button for another module to create calls to action.
Call To Action
The Call To Action module combines a title, body text, and a button, and is great for drawing attention to your offer and enticing your visitors to click to get a quote, contact you, or purchase your products.
The Circle Counter displays a single statistic with an animated counter that counts up to a certain number or percentage as the visitor scrolls.
The Code module provides an easy way to add code, such as static HTML or shortcodes from a third-party plugin, to a page.
Use the Comments module to place a blog commenting feature anywhere on your page, rather than just under the post, and style it to match your website’s design.
The Contact Form makes it easy to create forms with multiple fields that display according to logic that you determine.
The Countdown Timer creates a timer that counts down to a date that you specify, making a great visual for a coming soon page in maintenance mode, product release, or an event.
Use Dividers to create a horizontal line, vertical space, or both at the same time to add structure a visual elements to your designs.
The Email Optin module supports 20 providers and is a great way to create your newsletter signup form.
The Filterable Portfolio module makes it easy to display your recent project in either a standard layout or within a grid, and it uses AJAX loading when projects are filtered by category to seamlessly display any category your visitors want to see.
The Fullwidth Code module provides an easy way to add code, such as static HTML or shortcodes from a third-party plugin, to a page just like the standard code module, but this module works within the fullwidth sections.
The Fullwidth Header module lets you create headers that can be placed anywhere on your page just like the standard header module, only this one works within fullwidth sections.
The Fullwidth Image module lets you add images within fullwidth sections, complete with filters and a lightbox feature to open the image within a lightbox.
The Fullwidth Map lets you embed custom Google Maps anywhere on your page, but only within fullwidth sections.
The Fullwidth Menu makes it easy to place a navigation menu anywhere on the page, such as below the hero area or below the splash page image, within fullwidth sections.
The Fullwidth Portfolio module lets you display your recent projects in either a carousel layout or within a grid, but within a fullwidth section instead of a standard section.
Fullwidth Post Slider
The Fullwidth Post Slider displays blog posts from any of your categories with controls and a read more button, but instead of the standard section this one displays within a fullwidth section.
Fullwidth Post Title
The Post Title Module displays the title of your latest post with the featured image and meta, just like the standard module, but this one works within the fullwidth section.
The Fullwidth Slider lets you build slides using content and either images or video and display them within a fullwidth section.
The Gallery module shows a collection of images with pagination in either a grid layout or as a slider.
The Image module displays an image with lazy-loading, a lightbox, filters, animation, an overlay with icons, and more.
The Login module lets you display a WordPress login form with a title, content area, redirects, and field styling to create a login form that matches the styling of your website, making it a great choice for membership websites.
The Map module lets you embed a custom Google Map that’s zoomable using the mouse scroll wheel or draggable (for mobile devices), and has a custom starting location, unlimited pins, a grayscale filter, and custom map styling.
The Number Counter lets you display statistics, such as the number of clients you have or the number of projects you’ve completed, with separate title and text styling and an optional percent sign.
The Person module combines text, an image, and social media links to create a personal profile or individual bio for About Me and Team Member pages.
The Portfolio module makes it easy to display any number of projects in either a full-width or grid layout, and lets you display any category with title, category, and pagination text.
Post Navigation adds fully customizable previous and next links to your posts in either the same category or any category and as text or buttons.
The Post Slider module displays posts from the blog in any or all categories with custom ordering, read more button text, excerpt or complete post, custom arrows and controls, and as just text or with a featured image with custom overlay.
The Post Title module shows the title of the current post and includes the option to show the featured image above, below, or behind the title complete with meta and text customizations to create some interesting blog designs.
Pricing Tables lets you show as many prices as you want within cards that show the product’s or service’s features with custom bullets, centered or offset items, custom background colors, and a drop shadow.
The Search module adds a customizable form with placeholder and backgrounds to your website that allows visitors to search your content while giving you the ability to exclude specific pages, posts, and categories.
The Shop module lets you add WooCommerce products to any page or post and includes content type, product count, a 1-6 column layout, with sorting options, pagination, custom product overlays, and a custom sales badge.
The Sidebar module lets you choose any widget area to display within your content and display it as left or right orientation and with or without a border separator, and customize it like any Divi module with custom text, backgrounds, borders, animation, and more.
Sliders can display as many slides as you want with arrows and controls, images with parallax backgrounds, video backgrounds, buttons, and content.
Social Media Follow
Social Media Follow lets you create links to your social profiles for up to 14 networks with their social icons, with or without a follow button, and with all the customizations you’d expect from a Divi module.
Tabs lets you create content using a regular WordPress editor and display that content on its own tab with customized tab text and background that displays horizontally in wide rows and stacked vertically in ¼ rows, with each tab having its own customized text, backgrounds, and content.
The Testimonial module displays the author name, job title, company name, image, links, customizable quote icon, and testimonial using the regular WordPress content editor to display quotes from clients, readers, shoppers, and more for your sales and join pages.
The Text module provides a WordPress text editor complete with Divi customizations for the background, body and heading text, border, sizing, box shadow, filters, and animation.
Toggles are a great way to display a lot of information within a small space by displaying content created in a standard WordPress editor, choosing either open or closed as the normal state, and then customizing the icon and toggle text and background.
Video allows you to embed videos from just about any source including those you upload or a URL, and it displays the video’s image or lets you customize it with an image as an overlay, and lets you customize the play icon color.
The Video Slider is a great way to organize collections of videos from just about any source with arrows, thumbnail track or dot navigation controls, custom overlay, custom slider control color, icon color, thumbnail overlay color, and a custom image and arrows for each video.
Well, that’s our quick look at each Divi module. Most have the same customizations which includes text, box shadow, border, filters, animation, and custom CSS fields. Combined, they provide the tools to create almost any website you can imagine.
If you need something that isn’t provided within Divi already, you can even add your own through code or plugins. For more information, see the article Divi Custom Modules (Beginner’s Guide).
We want to hear from you. Which Divi modules do you use the most? Let us know about it in the comments.