Elegant Themes Tutorials Layouts

Explore the World of Divi with Beautiful Free Layouts

Here you will find selected Elegant Themes Divi tutorials as downloadable json files you can import into the Divi Library

Join Today and download the Premium Divi Theme

Bold Fullwidth Toggle Modules

Bold Fullwidth Toggle Modules

Dynamic Content to Create a WooCommerce Product Info Accordion

Dynamic Content to Create a WooCommerce Product Info Accordion

WooCommerce Account Page with a Featured Product Section

WooCommerce Account Page with a Featured Product Section

Keep Modules Fixed in Their Column Container

Keep Modules Fixed in Their Column Container

Split-Image Product Info Sections

Split-Image Product Info Sections

Responsive Accordion Slider in Divi

Responsive Accordion Slider in Divi

Unique Column FAQ

Unique Column FAQ

Automatic Price Calculations Using JQuery

Automatic Price Calculations Using JQuery

Image Replacement Hover Options

Image Replacement Hover Options

Advanced Client Showcase Hover/Click

Advanced Client Showcase Hover/Click

Add Interchanging Sticky Questions to Your FAQ

Add Interchanging Sticky Questions to Your FAQ

Low Z Index Module Borders as Backgrounds

Low Z Index Module Borders as Backgrounds

Blend Images to Create a Custom Background

Blend Images to Create a Custom Background

Dynamic & Vibrant Product Grid

Dynamic & Vibrant Product Grid

Create a Segmented Circular Menu

Create a Segmented Circular Menu

Countdown ‘Deal of the Day’ Product Section

Countdown ‘Deal of the Day’ Product Section

Clean & Bold Product with WooCommerce Modules

Clean & Bold Product with WooCommerce Modules

Minimal Product Page with WooCommerce Modules

Minimal Product Page with WooCommerce Modules

Create an Automatic Carousel with Divi & Slick.js

Create an Automatic Carousel with Divi & Slick.js

Module Backgrounds to Display Inline Parallax Images

Module Backgrounds to Display Inline Parallax Images

Creative Divi Blurb Icon Background

Creative Divi Blurb Icon Background

Change Content on Hover to Create Unique CTAs

Change Content on Hover to Create Unique CTAs

CTA Column Swipe Hero Section

CTA Column Swipe Hero Section

Combine Hover Effects with CSS Parallax Backgrounds

Combine Hover Effects with CSS Parallax Backgrounds

Transparent Images to Create CTA Column Overlaps

Transparent Images to Create CTA Column Overlaps

Place Hover Tooltips Anywhere

Place Hover Tooltips Anywhere

Create a Split Blend Mode Headline

Transparent Images to Create CTA Column Overlaps

Create Background Image Border

Create Background Image Border

Polaroid Hero Section

Polaroid Hero Section

Add Image Markers

Add Image Markers

Inline Scroll Reveals
Inline Scroll Reveals
ET’s Click Video Walkthrough

ET’s Click Video Walkthrough

Column Filters to Create Blending Effects
Column Filters to Create Blending Effects
Combine Animations and Parallax

Combine Animations and Parallax

Reveal Images Using Horizontal Hover Grids
Reveal Images Using Horizontal Hover Grids
Unique Toggle and Accordion Content
Unique Toggle and Accordion Content
Turning Columns Into Pricing Plans

Turning Columns Into Pricing Plans

Multiple Sliders to Showcase Services

Multiple Sliders to Showcase Services

Pop Out Service Descriptions on Hover
Pop Out Service Descriptions on Hover
Multiple Targeted Contact Forms on Hover

Multiple Targeted Contact Forms on Hover

Eye-Catching CTA with Hover Effects
Eye-Catching CTA with Hover Effects
3-Step Blurb Reveal on Hover
3-Step Blurb Reveal on Hover
Gradient Background Hover Transitions
Gradient Background Hover Transitions
Unique Broken Grid Designs
Unique Broken Grid Designs
Row Borders to Create Hero Section
Row Borders to Create Hero Section
Fan-Out Hover Effects
Fan-Out Hover Effects
Create Beautiful Blurred Backgrounds
Create Beautiful Blurred Backgrounds
Unique Multi-Column Hero Sections
Unique Multi-Column Hero Sections
Labeling Image Corners in a Gallery Grid
Labeling Image Corners in a Gallery Grid
Vertical Slider Elements in Slider Module
Vertical Slider Elements in Slider Module
CTA that Reveals Multiple Options on Hover
CTA that Reveals Multiple Options on Hover
Section Divider Height Hover Effects to Reveal Content
Section Divider Height Hover Effects to Reveal Content
Hiding Your Copy Below Section Dividers
Hiding Your Copy Below Section Dividers
Adding Transformed Shadows to Your Copy
Adding Transformed Shadows to Your Copy
Multipurpose Sales Banner Design for Divi

Multipurpose Sales Banner Design for Divi

Divi Hover Options to Emphasize CTAs

Divi Hover Options to Emphasize CTAs

Animated Titles Using Divi’s Hover Options

Animated Titles Using Divi’s Hover Options

Unique Social Follow Design

Unique Social Follow Design

5 Free Border Images for Divi

5 Free Border Images for Divi

10 Free Fluid Section Backgrounds

10 Free Fluid Section Backgrounds

Add One-Sided Box Shadows in Divi

Add One-Sided Box Shadows in Divi

Create Slide-in CTAs using Divi

Create Slide-in CTAs using Divi

Vibrant Section Titles with Divi

Unique Column Layouts in Divi

Vibrant Section Titles with Divi

Vibrant Section Titles with Divi

Responsive Five Column Showcase Layout

Responsive Five Column Showcase Layout

Horizontal Pricing Tables with Divi

Horizontal Pricing Tables with Divi

Vertically Align Content in Divi

Vertically Align Content in Divi

Add Motion to Your Section Dividers

Add Motion to Your Section Dividers

3 Image Gallery Designs

Sleek Header Design with Parallelograms

Sleek Header Design with Parallelograms

Bold & Colorful Websites with Divi

Bold & Colorful Websites with Divi

Flat Web Design with Divi

Flat Web Design with Divi

Unique Feature Section in Divi with Icons

Unique Feature Section in Divi with Icons

Minimal Website Layout for Divi

Minimal Website Layout for Divi

Divi’s Text Module for Creative List Designs

Divi’s Text Module for Creative List Designs

Divi Blog Page Grid Layout with Background

Divi Blog Page Grid Layout with Background

Creative Product Comparison Chart with Divi

Creative Product Comparison Chart with Divi

Attractive Subscribe Sections with Divi

Attractive Subscribe Sections with Divi

Add a Payment Calculator to Your Divi Site

Add a Payment Calculator to Your Divi Site

Geometric Grid Layout in Divi

Geometric Grid Layout in Divi

Create a Unique Overlapping Effect with Background Images

Create a Unique Overlapping Effect with Background Images

Creatively Use Symbols in Your Divi Web Design

Creatively Use Symbols in Your Divi Web Design

Stunning Gallery Testimonials with Divi

Stunning Gallery Testimonials with Divi

Abstract Lines to Frame Your Content in Divi

Abstract Lines to Frame Your Content in Divi

Selectively Show Section Background Image

Selectively Show Section Background Image

Creatively Highlight your Membership Deals

Creatively Highlight your Membership Deals

Divi Box Shadows

Think Outside the Box with Divi Box Shadows

Use Empty Sections to Create Unique Designs

Use Empty Sections to Create Unique Designs

Creative Navigation Header

Creative Navigation Header

Elegant Process Page with Timeline

Elegant Process Page with Timeline

Full Screen Layout with Animated Scroll Button

Full Screen Layout with Animated Scroll Button

Unique Diagonal Layout

Unique Diagonal Layout

Full Screen Sections with Scroll Links

Full Screen Sections with Scroll Links

Indirectly Apply Divi Section Dividers To Rows

Indirectly Apply Divi Section Dividers To Rows

Indirectly Apply Divi Section Dividers To Modules

Indirectly Apply Divi Section Dividers To Modules

Emphasize Image Colors with Patterns

Emphasize Image Colors with Patterns

Effective Use of Letter Spacing Layout

Effective Use of Letter Spacing Layout

6 Abstract Gradient Hero Sections

6 Abstract Gradient Hero Sections

Product with image perspective layout

Product with image perspective layout

Layered Divi Modules

Layered Divi Modules – opacity, Padding & Negative Margins

Slider Module for Testimonials

Slider Module for Testimonials

Products Layout

Products Layout for woocommerce

Subtle & Animated Shapes

Subtle & Animated Shapes

Standout Work Experience Section

Standout Work Experience Section

Timeline Layout with Labeled Dot Navigation

Timeline Layout with Labeled Dot Navigation

4 Creative Headers

4 Creative Headers

Create Background Textures with Divi’s Section Dividers

Create Background Textures with Divi’s Section Dividers

Fill Text with Images for Creative Backgrounds

Fill Text with Images for Creative Backgrounds

Overlapping Contact Module

Overlapping Contact Module

8 Section Dividers

8 Section Dividers

5 Hero Sections

Five Abstract Hero Sections with Background Textures

Combine Divi Column Backgrounds With Blend Modes

Combine Divi Column Backgrounds With Blend Modes

Stunning Team Section with Opacity Filters

Stunning Team Section with Opacity Filters

Creative Image Layout with Overlapping and Vertical Text

Creative Image Layout with Overlapping and Vertical Text

Image Borders

8 IMAGE BORDERS

10 Fun Dividers

10 FUN DIVIDERS

Scrollable Text Preview Tablet

SCROLLABLE TEXT PREVIEW TABLET

Inline Contact Form

INLINE CONTACT FORM

Join Today and download the Premium Divi Theme

Want to know when free Divi layouts are added?

You have Successfully Subscribed!

Pin It on Pinterest