Are you looking for a comprehensive guide to using the Divi Modules?
On this page, you will find the official documentation and tutorials for each available Divi module.
This guide is here to help. I’ve compiled tutorials for every single module available in the Divi builder, so you can easily find the one that fits your needs and style preferences.
Whether it’s a basic text box or something more complex like a slider, I am here to offer step-by-step instructions so you can make sure your Divi website looks just how you want it to.
Click on the module below to jump down to the module information section and find the available tutorials and documentation.
Accordion module
The Accordion module displays vertical sections of hidden content that are revealed upon clicking, one section at a time. When a new section is opened, the previously-opened section is closed, ensuring that only one section is open at a time.
Tutorials and documentation
Audio module
The audio module simplifies sharing audio files with your website’s visitors. It’s useful for allowing users to play music while they browse, host a podcast, or showcase an original song.
Tutorials and documentation
Bar counters module
The bar counter module is an engaging and fun method of displaying statistics for your visitors. When users browse through the page, animations are triggered using lazy loading that makes the experience truly fascinating.
Tutorials and documentation
Blog module
With the blog module, you can showcase blog posts anywhere on your website and customize their appearance beyond the default blog page.
Tutorials and documentation
- Official Elegant Themes documentation
- The best Divi blog layouts
- Blog layout tutorial by Elegant Themes
Blurb module
The blurb module combines text and imagery in an elegant and straightforward way. Blurbs are excellent for showcasing small, essential things and are typically used in rows for displaying skills or features.
Tutorials and documentation
Button module
You can add a fully customizable button to any page with the Button module. Use the Divi Advanced Design Settings to create countless unique button styles.
Tutorials and documentation
- Official Elegant Themes documentation
- How to create a custom Divi button
- How to create a call to action button
Call to action module
For your website visitors, it’s crucial to have a clear call to action. Be it buying your product or getting in touch for a quote, the call-to-action module is the surefire way to gain clicks.
Tutorials and documentation
Circle counter module
Use the circle counter module to display the stats you want in a fun and effective way. It generates a single number or % in an animated circle graph, with the animation triggered by lazy loading.
Tutorials and documentation
Code module
The code module in Divi helps you add HTML, JavaScript, and CSS code to your page. You can easily write your own code with Divi’s built-in editor and syntax highlighter. This makes it simple to integrate third-party scripts or to customize your website using development skills.
Tutorials and documentation
Comments module
With the Comments module, you can easily add a comment from any location on your post or page. This offers greater flexibility than having comments solely displayed at the bottom of your post, enabling you to manipulate the order of elements using the Divi Builder. Additionally, the contact form may be customized with Divi’s advanced design settings in creative ways.
Tutorials and documentation
Contact module
The contact form module within Divi’s visual builder lets you design custom forms using various field types. You can even hide and show fields based on certain conditions. Build your own contact forms with ease using the contact form module.
Tutorials and documentation
- Official Elegant Themes documentation
- How to style the Divi contact form message
- How to create a custom form message pattern
- How to make contact form 7 look like Divi
Countdown timer module
You can inform your visitors about upcoming launches or events by setting a countdown timer with the specified date and time. That way, you create anticipation and excitement for the big day.
Tutorials and documentation
Divider module
The divider module can effortlessly create empty space anywhere on your page. To give something some breathing room, add a divider for clear separation.
Tutorials and documentation
Email opt-in module
Divi’s email opt-in module simplifies the process of increasing your mailing list. Utilizing this tool, you can create custom opt-in forms and collect emails from 20 distinct email marketing platforms.
Tutorials and documentation
Filterable portfolio module
Present your portfolio in a visually appealing gallery and allow visitors to sort your projects by categories. The page won’t need reloading since the filters work on the fly.
Tutorials and documentation
Gallery module
The gallery module allows you to showcase a variety of images in distinct formats. You can customize the orientation of images and the overlay style. It’s an excellent way to exhibit a gallery of artwork or photos on your website.
Tutorials and documentation
Icon module
The Divi Icon Module allows you to add hundreds of icons with customizable sizes and colors to your website. You can use the native icons included in Divi or choose from hundreds more icons in the Font Awesome icon set.
Tutorials and documentation
Image module
With the Divi image module, you can easily add images to your website and control image size, box-shadow, and borders. You can also choose from various overlay styles. As images are an integral part of any website, Divi simplifies the process of adding them to your pages.
Tutorials and documentation
Login form module
Use the Divi Login Form Module to add a custom login form with ease for registered users with different roles. Place the form anywhere on your website, customize the design, and enable redirect to the current page for a better user experience after login.
Tutorials and documentation
Map module
You can let your visitors know your location using the Divi Map module on your website. It allows you to embed interactive Google Maps with customized pinned location and location descriptions, particularly on contact or about pages.
Tutorials and documentation
Menu module
With the menu module, you can effortlessly put a navigation menu on your site. Create your own navigation bar and include it in your Divi header template. Divi lets you build your website from top to bottom.
Tutorials and documentation
- Official Elegant Themes documentation
- How to create a Divi menu
- How to create a Divi mega menu
- Divi header layout pack
Number counter module
Animated number counters are an excellent way to display statistics to your visitors. They are triggered using lazy-loading which provides an engaging browsing experience while browsing the page.
Tutorials and documentation
Person module
Use the person module to showcase your team members on your About page. Each team member includes a name, bio, photo, and links to social profiles.
Tutorials and documentation
Portfolio module
The portfolio module displays a stunning art or design gallery. Clicking on an image opens a project page with more information on the work.
Tutorials and documentation
Post navigation module
With the Post Navigation module, you can add automatic links to your next and previous blog posts. This encourages users to explore your site further.
Tutorials and documentation
Post slider module
The Post Slider is a simple solution to showcase your top blog posts in a standard slider format at the top of your page. It works great in tandem with the Divi Blog Module.
Tutorials and documentation
Post title module
The post title module shows the title of the current post and meta information (like the post author, date, and comment count). You can choose which elements to display and adjust their appearance.
Tutorials and documentation
Pricing table module
Creating pricing tables for your online products is simpler than ever. You can now generate and manage several tables according to prices and features. On top of that, you have the ability to highlight a particular plan to boost conversions.
Tutorials and documentation
Search module
Using the search module, you can add a search form anywhere on your website (instead of being limited to using the WordPress search widget in your sidebar and footer).
If you want to improve the search functions on your Website, check out this post about the best WordPress search plugins available.
Tutorials and documentation
Sidebar module
Divi lets you create an unlimited number of widget-ready areas on the fly. Sidebars can then be added to any page, allowing you to create unique sidebars for different sections of your website.
Tutorials and documentation
- Official Elegant Themes documentation
- How to build a service sidebar menu
- How to remove the Divi sidebar
Slider module
Divi sliders have no restrictions on their placement, size, or width. They offer parallax backgrounds, and you can even use full-width video backgrounds.
Tutorials and documentation
Social follow module
Having a strong social media following is crucial in today’s world. With our module, you can display icons and links to all your social profiles, making it easier for you to build followers.
Tutorials and documentation
Tabs module
Tabs can help you condense information and better the user experience on your website. Divi enables the creation of tabs to your liking, no matter the column size.
Tutorials and documentation
Testimonials module
Adding testimonials to your join and sales pages is a simple and effective way to earn the trust of your visitors. Utilize the Divi testimonial widget to add customer feedback quickly.
Tutorials and documentation
Text module
You can add text to any part of your page, placing text modules within any column type. When combined with other modules, this creates an engaging and dynamic page.
Tutorials and documentation
Toggle module
Toggles can consolidate information and enhance user experience on your page. By using Divi, you can effortlessly create any number of toggles that will look fabulous inside any sized column.
Tutorials and documentation
Video module
The Video Module makes it easy to put a single video anywhere on your site, using any layout. Just upload a video or enter a video URL, and Divi will embed it on your page, no matter the column size.
Tutorials and documentation
Video slider module
With the help of a video slider module, you can display a collection of videos in a single slider, making it easier to feature numerous videos of different sizes on one page.
Tutorials and documentation
Conclusion
Divi Modules are powerful tools that can help you to create a professional and eye-catching website. With this comprehensive guide, you will have the resources you need to understand all of the available modules, how they work, and how to use them.
Whether you need a detailed tutorial on creating anchors or styling the blurb module this guide will have the answers.
Explore each module, learn about its features, and start building your dream website today! Enjoy the creative journey and don’t forget to share the result with us.
