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.
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.
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.
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.
4. Blog
The blog module displays posts from your blog, either all or by category, and with either a single or multi-column format.
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.
6. Button
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.
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.
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.
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.
10. Comments
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.
11. Contact Form
The Contact Form makes it easy to create forms with multiple fields that display according to the logic that you determine.
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.
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.
14. Email Optin
The Email Optin module supports 20 providers and is a great way to create your newsletter signup form.
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.
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.
17. Fullwidth Header
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.
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.
19. Fullwidth Map
The Fullwidth Map lets you embed custom Google Maps anywhere on your page, but only within fullwidth sections.
20. Fullwidth Menu
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.
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.
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.
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.
24. Fullwidth Slider
The Fullwidth Slider lets you build slides using content and either images or video and display them within a fullwidth section.
25. Gallery
The Gallery module shows a collection of images with pagination in either a grid layout or as a slider.
26. Image
The Image module displays an image with lazy-loading, a lightbox, filters, animation, an overlay with icons, and more.
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.
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.
29. Menu
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
39. Sidebar
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.
40. Slider
Sliders can display as many slides as you want with arrows and controls, images with parallax backgrounds, video backgrounds, buttons, and content.
41. 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
55. Woo Meta
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.
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.
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.
58. Woo Related Product
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.
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.
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.
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.
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.
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.
Note: We find and review products to help you make better decisions when buying the things you need. Our opinions are our own, and in no way are influenced by an affiliate commission. If you use one of our affilite links below, we may earn a small share of the revenue. Thank you for your support. Let us know if you have any questions.
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.
0 Comments