Elegant Themes

Get yourself familiarized with Divi 5's Visual Builder

Divi 5 Visual Builder

Learn how to use the Visual Builder interface in Divi 5 so you can move around, edit, and design your pages with confidence.

Divi 5 Visual Builder Interface

Learn how to use Divi 5 Visual Builder keyboard shortcuts to work faster and stay focused while you design your pages.

Divi 5 Visual Builder Keyboard Shortcuts

Learn how to use Divi 5 Visual Builder right-click contextual menus to work faster, copy styles, and manage your layouts.

Divi 5 Visual Builder Right-Click Contextual Menus

Learn how to use the Divi 5 Library to save, reuse, and manage layouts, sections, rows, and modules across your site.

Divi Library in Divi 5

Learn how the Role Editor in Divi 5 lets you control what each WordPress user role can access and do inside the Visual Builder.

The Role Editor in Divi 5

Learn how to use the Divi 5 Wireframe View to efficiently manage content-heavy or complex Divi pages.

Wireframe View in Divi 5

Learn how to use the new Divi 5 Responsive System to ensure your design will display perfectly on all mobile devices.

How Responsive Options Work in Divi 5

Learn how to use the Left Options Sidebar to streamline the design process.

Divi 5 Visual Builder's Left Options Sidebar

Divi 5 Visual Builder Basics

Learn how to add, duplicate, and remove sections, rows, and modules in the Divi 5 Visual Builder.

Add, Duplicate, and Remove Elements in Divi 5 Visual Builder

Learn how to customize the Divi 5’s default breakpoints so your layouts look right on every screen size.

Customize the Divi 5's Default Breakpoints

Learn how to use the Responsive Editor in Divi 5 Visual Builder to quickly fine-tune your designs for all available breakpoints.

Responsive Editor in Divi 5 Visual Builder

Learn how to inspect element styles using the Divi 5 Style Inspector so you can see and edit all styles, content, and presets in one place.

Inspect Element Styles Using Divi 5 Style Inspector

Learn how to copy and paste elements and attributes in Divi 5 Visual Builder to reuse designs and keep styles consistent.

Copy/Paste Elements and Elements Attributes in Divi 5 Visual Builder

Learn how to find and replace attributes in Divi 5 Visual Builder to quickly update design values across your layouts.

Find and Replace Attributes in Divi 5 Visual Builder

Learn the Divi 5 Visual Builder's core concepts

Divi 5 Visual Builder Core Concepts

Learn how to use Global Variables in Divi 5 to control colors, fonts, spacing, and content from one place.

Global Variables in Divi 5

Learn how to use module presets in Divi 5 to build a reusable design system and style your site consistently.

Advanced Styling using Element Presets in Divi 5

Learn how to use Option Group Presets in Divi 5 to build consistent, reusable styles you can update in one place.

Advanced Styling using Option Group Presets in Divi 5

Learn how to use Dynamic Content in Divi 5 to pull real data from WordPress and custom fields into your designs automatically.

Advanced Content Management using Dynamic Content in Divi 5

Learn how to build custom loops in Divi 5 using Loop Builder to design dynamic lists of posts, products, and more.

Build Custom Loops using Loop Builder in Divi 5

Learn how to build custom templates with the Theme Builder in Divi 5 so your headers, footers, and page layouts stay consistent and automatic.

Build Custom Templates Using the Theme Builder in Divi 5

Learn how to edit your header, footer, and body templates from the front end in a single session with Divi 5's editable Theme Builder areas.

Editable Theme Builder Areas in Divi 5

Learn how to generate fluid sizing scales and complete color palettes automatically using the Variable Generator in Divi 5's Visual Builder.

Variable Generator in Divi 5

Learn how to use Divi 5's new gradient editor, gradient variables, and text effects to fill text with gradients or images and add strokes.

New Gradient Editor, Gradient Variables, Text Effects in Divi 5

Learn about Divi 5 Visual Builder's advanced options 

Divi 5 Visual Builder Advanced Concepts

Learn how to let visitors filter, search, and sort a loop on your page with the Divi 5 Post Filter module.

The Post Filter Module in Divi 5

Learn how to display and style a NextGEN Gallery inside Divi 5 with the Imagely Gallery module.

The Imagely Gallery Module in Divi 5

Learn how to embed and style a Gravity Forms form in Divi 5 with the Gravity Form module.

The Gravity Form Module in Divi 5

Learn how to use the Divi 5 Payment Button module to add a PayPal or Stripe checkout button to your pages.

The Payment Button Module in Divi 5

Learn how to add the Tooltip module in Divi 5 and style the hover, click, or on-load popups it shows next to any element.

The Tooltip Module in Divi 5

Learn how to use Divi's Accordion Module to organize content in collapsible sections for a cleaner, more user-friendly design.

The Accordion Module in Divi 5

Learn how to use Divi’s Audio Module to add music, podcasts, or voiceovers to your site with a sleek, customizable design.

The Audio Module in Divi 5

Learn how to use the Divi Bar Counters Module to showcase progress or stats with animated, customizable bar graphs.

The Bar Counters Module in Divi 5

Learn how to use the Divi Blog Module to display your posts dynamically with customizable layouts and styles.

The Blog Module in Divi 5

Learn how to use Divi's Blurb Module to combine text and visuals, creating engaging highlights for services, features, or key information.

The Blurb Module in Divi 5

Learn how to use the Divi Button Module to create customizable, attention-grabbing buttons that drive user engagement on your site.

The Button Module Divi 5

Learn how to use the Divi Call to Action Module to create engaging prompts that drive user interaction and conversions.

The Call to Action Module Divi 5

Learn how to use Divi's Circle Counter Module to display animated stats and data with lazy loading for an eye-catching, interactive design.

The Circle Counter Module in Divi 5

Learn how to use the Divi Code Module to add custom HTML, CSS, or JavaScript to your site for advanced functionality and design.

The Code Module Divi 5

Learn how to use Divi's Comments Module to style and customize comment sections, boost engagement, and add them anywhere in your layout.

The Comments Module in Divi 5

Learn how to use Divi's Contact Form Module to create customizable forms with spam protection, allowing your visitors to reach you.

The Contact Form Module in Divi 5

Learn how to use Divi's Countdown Timer Module to create dynamic timers for events, launches, sales, or coming soon pages on your site.

The Countdown Timer Module in Divi 5

Learn how to use the Divider module to add visual separation in your page's design.

The Divider Module in Divi 5

Learn how to use the Divi Email Optin Module to grow your mailing list with customizable forms and seamless email integration.

The Email Optin Module in Divi 5

Learn how to use the Divi Filterable Portfolio to showcase and organize your projects with customizable filters and layouts.

The Filterable Portfolio Module in Divi 5

Learn how to use the Divi Gallery Module to display stunning image galleries with customizable layouts and features.

The Gallery Module in Divi 5

Learn how to showcase multiple modules in a sliding, scrollable format using the Divi Group Carousel module.

The Group Carousel Module in Divi 5

Learn how to use the Group module to group different modules and nested rows.

The Group Module in Divi 5

Learn how to use the Divi Heading Module to create impactful, customizable headings that enhance your site's design and readability.

The Heading Module in Divi 5

Learn how to use the Divi Fullwidth Header Module to create impactful headers with customizable text, images, and design options.

The Hero Module in Divi 5

Learn how to create custom bullet lists with icons in Divi using the Icon List module for clear, engaging content display.

The Icon List Module in Divi 5

Learn how to use the Divi Icon Module to add eye-catching icons to your site with customizable styles and designs.

The Icon Module in Divi 5

Learn how to use the Divi Image Module to add and customize images on your site with ease, enhancing your design and visual appeal.

The Image Module in Divi 5

Learn how to use the Divi Login Module to create custom login forms with personalized designs for your website users.

The Login Module in Divi 5

Learn how to use Divi's Lottie Module to add animated SVG or JSON files to your designs.

The Lottie Module in Divi 5

Learn how to use the Map Module to add interactive, customizable maps to your site with ease.

The Map Module in Divi 5

Learn how to use the Divi Menu Module to create customizable navigation menus that enhance your site's design and user experience.

The Menu Module in Divi 5

Learn how to use the Divi Number Counter Module to display animated stats or milestones with customizable design options.

The Number Counter Module in Divi 5

Learn how to use the Divi Pagination Module to add customizable links for seamless navigation between posts.

The Pagination Module in Divi 5

Learn how to use the Divi Person Module to showcase team members or profiles with customizable layouts and design options.

The Person Module in Divi 5

Learn how to use the Divi Portfolio Module to display your projects in a customizable grid or carousel layout.

The Portfolio Module in Divi 5

Learn how to use the Divi Fullwidth Portfolio Module to display your projects in a sleek, full-width layout with customizable options.

The Post Carousel Module in Divi 5

Lean how to use the Post Content module, to unify your design and layout for all post types.

The Post Content Module in Divi 5

Learn how to use the Divi Post Slider Module to showcase your posts in an engaging, customizable slider format.

The Post Slider Module in Divi 5

Learn how to use the Divi Post Title Module to display dynamic post titles with customizable styles and layouts.

The Post Title Module in Divi 5

Learn how to use the Divi Pricing Tables Module to showcase pricing options with customizable layouts and features.

The Pricing Tables Module in Divi 5

Learn how to use Divi Rows to structure your layouts, organize modules, and customize designs with flexible settings.

The Row in Divi 5

Learn how to use the Divi Search Module to add a customizable search bar that enhances navigation and user experience.

The Search Module in Divi 5

Learn how to use Sections to structure your page layout and create visually distinct areas for better organization and user experience.

The Section in Divi 5

Learn how to use the Divi Sidebar Module to display widgets and dynamic content in a customizable sidebar anywhere on your site.

The Sidebar Module in Divi 5

Learn how to use the Divi Slider Module to create engaging slideshows with customizable content, effects, and styles.

The Slider Module in Divi 5

Learn how to use the Divi Social Media Follow Module to add customizable social icons and links, boosting your online presence.

The Social Media Follow Module in Divi 5

Learn how to use the Divi Tabs Module to organize content into customizable, user-friendly tabbed sections on your site.

The Tabs Module in Divi 5

Learn how to use the Divi Testimonial Module to showcase customer reviews with customizable layouts and design options.

The Testimonial Module in Divi 5

Learn how to use the Divi Text Module to add and style text content with full control over fonts, colors, spacing, and alignment.

The Text Module in Divi 5

Learn how to use the Divi Toggle Module to display collapsible content sections with customizable styles and layouts.

The Toggle Module in Divi 5

Learn how to use the Divi Video Module to embed and customize videos with ease, enhancing engagement on your site.

The Video Module in Divi 5

Learn how to use the Divi Video Slider Module to showcase multiple videos in a customizable, interactive slider format.

The Video Slider Module in Divi 5

Learn how to create flexible menu and navigation links in Divi 5 using the Link module and dynamic content.

The Link Module in Divi 5

Learn how to use the Dropdown module and all its settings. The  Dropdown module can be used to build mega menus in Divi 5.

The Dropdown Module in Divi 5

Learn how to compare two images in Divi 5 using the Before/After Image Slider module with a draggable reveal handle.

The Before/After Image Module in Divi 5

Learn how to use the Contact Form 7 Styler module in Divi 5 to style Contact Form 7 forms so they match the look and feel of your Divi site.

The Contact Form 7 Styler Module in Divi 5

Learn how to use the Canvas Portal module and all its settings. The Canvas Portal displays Divi 5 canvases anywhere in your layout.

The Canvas Portal Module in Divi 5

Learn how to add, configure, and style the new Breadcrumbs Module in Divi 5 to give visitors a clear navigation path back through your site.

The Breadcrumbs Module in Divi 5

Learn how to add and style sharp, infinitely scalable vector graphics on any Divi 5 page by pasting valid SVG code or uploading an SVG file.

The SVG Module in Divi 5

Learn how to build a dated event timeline in Divi 5, with alternating-side layouts powered by the (Even) option groups.

The Timeline module in Divi 5

Learn how to add, connect, and style the Instagram Feed module in Divi 5 to display your latest posts on any page.

The Instagram Feed Module in Divi 5

Learn how to add and style the Table of Contents module in Divi 5, which auto-builds a linked list of your page's headings.

The Table of Contents module in Divi 5

Learn about different Post Filter Items that can be used inside the Post Filter module.

The Post Filter Items in Divi 5

Learn how to use the Divi 5 Chart module to turn a simple data table into a line, bar, pie, scatter, or bubble chart.

The Chart Module in Divi 5

Learn how to use the Divi 5 Slot module to give each copy of a component its own content while the rest stays in sync.

The Slot Module in Divi 5

Divi 5 Modules

Learn how to use the Woo Notice module, to display WooCommerce notification when a product is added to the cart.

The Woo Notice Module in Divi 5

Learn how to add navigational breadcrumbs with the Woo Breadcrumbs module to improve store navigation and user experience.

The Woo Breadcrumbs Module in Divi 5

Learn how to use the Woo Add to Cart module in Divi 5 to create custom, conversion-focused buttons for your WooCommerce store.

The Woo Product Add to Cart Module in Divi 5

Learn how to use the Woo Product Description module in Divi 5 to display short or long product descriptions anywhere.

The Woo Product Description Module in Divi 5

Learn how to use the Woo Product Gallery module in Divi 5 to showcase product images with full design and layout control.

The Woo Product Gallery Module in Divi 5

Learn how to use the Woo Product Images module in Divi 5 to display and style your main product image anywhere on the page.

The Woo Product Images Module in Divi 5

Learn how to use the Woo Product Meta module in Divi 5 to display SKU, categories, and tags with full styling control.

The Woo Product Meta Module in Divi 5

Documentation for all D5 WooCommerce Modules

Collections