Divi includes 63 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. Some are only available if you have WooCommerce enabled. 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, but it would also 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.
Table of Contents
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.
1. Accordion
Accordions are a great way to show a lot of information in a small space and are often used to show instructions, FAQs, lists, features, or any information that can be revealed when needed.
More Information
Table of Contents
2. Audio
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.
More Information
Table of Contents
3. Bar Counters
Bar Counters provide an interesting way to display as many stats as you want with lazy-loading animation to make those stats stand out.
More Information
Table of Contents
4. Blog
The blog module displays posts from your blog, either all or by category, and with either a single or multi-column format.
More Information
Table of Contents
5. Blurb
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.
More Information
Table of Contents
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.
More Information
Table of Contents
7. 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.
More Information
Table of Contents
8. Circle Counter
The Circle Counter displays a single statistic with an animated counter that counts up to a certain number or percentage as the visitor scrolls.
More Information
Table of Contents
9. Code
The Code module provides an easy way to add code, such as static HTML or shortcodes from a third-party plugin, to a page.
More Information
Table of Contents
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.
More Information
Table of Contents
The Contact Form makes it easy to create forms with multiple fields that display according to the logic that you determine.
More Information
Table of Contents
12. Countdown Timer
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.
More Information
Table of Contents
13. Divider
Use Dividers to create a horizontal line, vertical space, or both at the same time to add structure and visual elements to your designs.
More Information
Table of Contents
14. Email Optin
The Email Optin module supports 20 providers and is a great way to create your newsletter signup form.
More Information
Table of Contents
15. Filterable Portfolio
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.
More Information
Table of Contents
16. Fullwidth Code
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.
More Information
Table of Contents
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.
More Information
Table of Contents
18. Fullwidth Image
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.
More Information
Table of Contents
19. Fullwidth Map
The Fullwidth Map lets you embed custom Google Maps anywhere on your page, but only within fullwidth sections.
More Information
Table of Contents
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.
More Information
Table of Contents
21. Fullwidth Portfolio
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.
More Information
Table of Contents
22. 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.
More Information
Table of Contents
23. 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.
More Information
Table of Contents
24. Fullwidth Slider
The Fullwidth Slider lets you build slides using content and either images or video and display them within a fullwidth section.
More Information
Table of Contents
25. Gallery
The Gallery module shows a collection of images with pagination in either a grid layout or as a slider.
More Information
Table of Contents
26. Image
The Image module displays an image with lazy-loading, a lightbox, filters, animation, an overlay with icons, and more.
More Information
Table of Contents
27. Login
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.
More Information
Table of Contents
28. Map
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.
More Information
Table of Contents
The Menu module lets you place any menu within any location in your layout. It’s especially useful when building custom headers and footers in the Divi Theme Builder.
More Information
Table of Contents
30. Number Counter
The Number Counter lets you display statistics, such as the number of clients you have or the number of projects you’ve completed, with a separate title and text styling and an optional percent sign.
More Information
Table of Contents
31. Person
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.
More Information
Table of Contents
32. Portfolio
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.
More Information
Table of Contents
33. Post Navigation
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.
More Information
Table of Contents
34. Post Slider
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.
More Information
Table of Contents
35. Post Title
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.
More Information
Table of Contents
36. Pricing Tables
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.
More Information
Table of Contents
37. Search
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.
More Information
Table of Contents
38. Shop
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.
More Information
Table of Contents
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.
More Information
Table of Contents
40. Slider
Sliders can display as many slides as you want with arrows and controls, images with parallax backgrounds, video backgrounds, buttons, and content.
More Information
Table of Contents
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.
More Information
Table of Contents
42. Tabs
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.
More Information
Table of Contents
43. Testimonial
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.
More Information
Table of Contents
44. Text
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.
More Information
Table of Contents
45. Toggle
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.
More Information
Table of Contents
46. Video
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.
More Information
Table of Contents
47. Video Slider
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.
More Information
Table of Contents
48. Woo Add to Cart
The Woo Add to Cart module places a button on any page and allows visitors to add the product to their shopping cart. Choose the product and elements to show, and style them with the module’s controls. Elements include the quantity field and stock levels. Adjustments include the text, fields, dropdown menus, the button, etc. You can also display a background.
More Information
Table of Contents
49. Woo Additional Info
The Woo Add Additional Info module allows you to choose the product to show information for. It also includes the option to enable or disable the product’s title. Display a background and adjust the styling for each of the elements including the title and attribute text.
More Information
Table of Contents
50. Woo Breadcrumb
The Woo Breadcrumb module displays the WooCommerce breadcrumbs for improved navigation. Select the product, enter the home text, home link, and the separator. This module also includes the background option and styling features.
More Information
Table of Contents
51. Woo Cart Notice
The Woo Cart Notice module provides a message to inform the visitor that they’ve successfully added a product to their shopping cart. Choose the product and create a background that’s independent of the message background. Style the text, background, and button.
More Information
Table of Contents
52. Woo Description
The Woo Description module displays the description of the product. Select the product and description type (choose between full or short description). It includes a background option and all of the standard Divi module settings for the text, heading text, etc.
More Information
Table of Contents
53. Woo Gallery
The Woo Gallery module displays all of the images that are assigned to a product. Choose the product to display, set a background, choose the layout type, adjust the images, and style the module with the standard Divi settings including the title text, caption text, pagination text, and more. The layout choices include slider and grid.
More Information
Table of Contents
54. Woo Images
The Woo Images module displays the image of any product you select. Select to display the featured image, gallery images, and a sale badge. Force full-width for the image and adjust the corners, border, etc. You can also adjust the sale badge styling. This module also includes a background.
More Information
Table of Contents
The Woo Meta module display’s the meta information for the product you choose. You can enter the separator you want it to display. Select the elements you want to display including the SKU, categories, and tags. Choose to show the meta information inline or stacked. Set a background a style the elements using the standard Divi controls.
More Information
Table of Contents
56. Woo Price
The Woo Price module displays the price of any product you choose. Add a background and adjust the font styling using the standard Divi module settings. Text styling options include the price text, sale old price text, and sale new price text.
More Information
Table of Contents
57. Woo Rating
The Woo Rating module displays a star rating system for the product you choose. You can enable the star rating and show the customer reviews count. Choose an inline or stacked layout. Adjust the styling for the star rating and text, and add a background.
More Information
Table of Contents
The Woo Related Product module displayed products that are similar to another product on the page. Display the latest product or select the product to display. Choose the product count, number of columns, and order. Style the overlay, choose the icon, style the image, star rating, price text, sale badge, set a background, and more.
More Information
Table of Contents
59. Woo Reviews
The Woo Reviews module displays the reviews for any product you choose. You can select to show the author’s avatar and the comment count. You have full control over the styling for the fields, review elements, images, text, star rating, meta, button, backgrounds, etc.
More Information
Table of Contents
60. Woo Stock
The Woo Stock module displays the product stock count for any product you choose. Style the in-stock text, out-of-stock text, and back-order text separately. You can also add a background and use the standard Divi module styling options.
More Information
Table of Contents
61. Woo Tabs
The Woo Tabs module adds a WooCommerce product tab anywhere in the layout. You can select the product and select the tabs to include. Adjust the styling for the body text, tab text, and more. Add a background and perform all of the standard styling options.
More Information
Table of Contents
62. Woo Title
The Woo Title module displays the title of the WooCommerce product that you choose. You have control over the design using the standard Divi module styling options. Add a background, adjust the text, and more.
More Information
Table of Contents
63. Woo Upsell
The Woo Upsell module lets you choose products to display for the upsell. Choose the number of products to display, the column layout (from 1-6), and select the order to display them. You have styling control for the overlay icon and background, images, star rating, text, product title, price text, sale badge text, sale badge price, etc.
More Information
Table of Contents
[dc-affiliatedisclosure]
Ending Thoughts
Well, that’s our quick look at each
Divi module. Most have the same customizations which include 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.
Originally published in June of 2018, this post has been updated by Randy A Brown to includes Divi’s latest modules, which include the menu module and 16 WooCommerce modules. Some of the spelling and punctuation have also been updated.
