370+ world-class Divi Sections

Browse individual sections ready for import directly into your page via the Divi Builder. Mix and match various sections to suit your needs.

Click on any Section below to view all Sections.

Click on any Section above to view screenshots and demos.

← View all DiviWP Sections

Divi Header Layouts

20 x Divi Header Layouts with normal and Sticky options for each section.

View demos below ↓

DiviWP’s Header Section Layouts use the built-in Divi Menu Module for logo and menu functionality along with combinations of Blurb Modules, Button Modules and Social Follow Modules for secondary Menu content.

All DiviWP Headers are compatible with Stick-to-top Scroll Effects as well as Fixed Positioning. Everything is editable via the Visual Builder and fast efficient support is on-hand should you require it.

View the documentation for DiviWP’s Header Layout Sections →

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

  • Right-aligned Menu Module
  • Fade-in drop-down menu transitions for desktop
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • Right-aligned Menu Module
  • Fade-in drop-down menu transitions for desktop. Mega-menu styling demo.
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • Menu centered with last two items aligned right via custom menu class
  • Button CSS via custom menu class
  • Fade-in drop-down menu transitions for desktop. Mega-menu styling demo
  • Slide-in mobile menu transitions for tablet / mobileFade-in drop-down transitions for tablet and mobile sub-menu
  • Grouped sub-menu toggle for tablet / mobile with parent menu item not linked
  • Right-aligned Menu Module on dark background section
  • Fade-in drop-down menu transitions for desktop
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • Right-aligned Menu Module on dark background section
  • Sub-menu dark background styles
  • Fade-in drop-down menu transitions for desktop
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • 3/4 – 1/4 row columnΒ 
  • Button Module in 1/4 column and alongside hamburger for tablet / mobile
  • Fade-in drop-down menu transitions for desktop.
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • 3/4 – 1/4 row columnΒ Fade-in drop-down transitions for tablet and mobile sub-menu
  • Social Media Follow Module in 1/4 column and alongside hamburger for tablet / mobile
  • Fade-in drop-down menu transitions for desktop.
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • Top Row Single Column with Blurb Modules and Social Media Follow Module
  • Aligned via Custom CSS Code module using flexbox
  • Menu Row features as per Menu Header 1
  • Top Row Single Column with Menu Module and Social Media Follow Module
  • Aligned via Custom CSS Code module using flexbox
  • Menu Row features as per Menu Header 1
  • Top Row Single Column with Blurb Module and Social Media Follow Module and Button Module
  • Aligned via Custom CSS Code module using flexbox
  • Menu Row features as per Menu Header 1
  • Top Row Single Column with Social Media Follow Module and Blurb Modules
  • Aligned via Custom CSS Code module using flexbox
  • Menu Row features as per Menu Header 1
  • Top Row Single Column with Blurb Module, Menu Module, Social Follow Module and Button Module
  • Aligned via Custom CSS Code module using flexbox
  • Right-aligned Menu Module Row
  • Fade-in drop-down menu transitions for desktop
  • 2 column mega menu styling for desktop
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • Top Row Single Column with Blurb Module, Menu Module, Social Follow Module and Button Module
  • Aligned via Custom CSS Code module using flexbox
  • Right-aligned Menu Module Row
  • Fade-in drop-down menu transitions for desktop
  • 3 column mega menu styling for desktop
  • Fade-in mobile menu transitions for tablet / mobile
  • Grouped sub-menu toggle for tablet / mobile with parent menu item linked
  • Top Row 4 columns with Blurb Modules
  • Menu Module Row features as per Menu Header 13
  • Top Row 4 columns with Blurb Modules
  • Menu Module Row features as per Menu Header 13
  • Top Row Single Column with Social Media Follow Module and Blurb Modules
  • Aligned via Custom CSS Code module using flexbox
  • Menu Module Row features as per Menu Header 13
  • Top Row Single Column with Social Media Follow Module and Blurb Modules
  • Aligned via Custom CSS Code module using flexbox
  • Menu Module Row features as per Menu Header 13
  • Top Row Single Column with 2 Blurb Modules, Button Module and Social Media Follow Module
  • Aligned via Custom CSS Code module using flexbox
  • Menu Module Row features as per Menu Header 3
  • Top Row Single Column with 2 Blurb Modules, Button Module and Social Media Follow Module
  • Aligned via Custom CSS Code module using flexbox
  • Menu Module Row features as per Menu Header 3

← View all DiviWP Sections

Divi Footer Layouts

20 x Divi Footer Layouts packed with features.

These Footer Section Layouts use the built-in Divi Menu Module for the menu functionality along with combinations of Image Modules, Text Modules, Blurb Modules and Social Follow Modules.Β 

Custom Code Modules are including in each Footer Section for the CSS necessary to implement Menu Modules that do not collapse into hamburger mobile menus.Β 

View the documentation for DiviWP’s Footer Layout Pack β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Footer Section 1

live demo β†’

Footer Section 2

live demo β†’

Footer Section 3

live demo β†’

Footer Section 4

live demo β†’

Footer Section 5

live demo β†’

Footer Section 6

live demo β†’

Footer Section 7

live demo β†’

Footer Section 8

live demo β†’

Footer Section 9

live demo β†’

Footer Section 10

live demo β†’

Footer Section 11

live demo β†’

Footer Section 12

live demo β†’

Footer Section 13

live demo β†’

Footer Section 14

live demo β†’

Footer Section 15

live demo β†’

Footer Section 16

live demo β†’

Footer Section 19

live demo β†’

Footer Section 20

live demo β†’

← View all DiviWP Sections

Divi Pricing Section Layouts

23 x Divi Pricing Sections Layouts.

We’re huge fans of Divi’s Blurb, Text and Button Modules because they provide so much design and layout versatility.

That’s why we’ve combined these modules with interesting column layouts to produce beautiful, clean and conversion optimizedΒ Pricing SectionsΒ that can be used in a variety of contexts and use-cases.

Everything is editable via the Visual Builder which means you can also mix and match various elements to create your own unique designs.

View the documentation for DiviWP’s Pricing Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Pricing Section 1

live demo β†’

Pricing Section 2

live demo β†’

Pricing Section 3

live demo β†’

Pricing Section 4

live demo β†’

Pricing Section 5

live demo β†’

Pricing Section 6

live demo β†’

Pricing Section 7

live demo β†’

Pricing Section 8

live demo β†’

Pricing Section 9

live demo β†’

Pricing Section 10

live demo β†’

Pricing Section 11

live demo β†’

Pricing Section 12

live demo β†’

Pricing Section 13

live demo β†’

Pricing Section 14

live demo β†’

Pricing Section 15

live demo β†’

Pricing Section 16

live demo β†’

Pricing Section 17

live demo β†’

Pricing Section 18

live demo β†’

Pricing Section 19

live demo β†’

Pricing Section 20

live demo β†’

Pricing Section 21

live demo β†’

Pricing Section 22

live demo β†’

Pricing Section 23

live demo β†’

← View all DiviWP Sections

Divi Hero Section Layouts

16 x Divi Hero Section Layouts.

A Hero section is generally the first visual section or block on a page.Β 

Because of their prominence in the visual hierarchy of a page, Hero Sections are used to present a succinct overview and to capture and sharpen a visitors attention towards specific actionable elements like clicking a button, watching a video, or filling out a quick form.Β 

Large readable typography, short, clear and concise sentences and quality visuals allows users to efficiently scan and understand the information presented, giving them a quick understanding of the page and guiding them to interact with content – these are powerful conversion tools!

Each Hero Section uses a combination of Divi’s built-in Text, Contact Form, Email Optin, Blurb, Slider, Video and Button Modules, providing a range of options you can experiment with within your own page design.Β 

Everything is editable via the Visual Builder which means you can also mix and match various elements to create your own unique designs.

View the documentation for DiviWP’s Hero Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Hero Section 1

live demo β†’

Hero Section 2

live demo β†’

Hero Section 3

live demo β†’

Hero Section 4

live demo β†’

Hero Section 5

live demo β†’

Hero Section 6

live demo β†’

Hero Section 7

live demo β†’

Hero Section 8

live demo β†’

Hero Section 9

live demo β†’

Hero Section 10

live demo β†’

Hero Section 13

live demo β†’

Hero Section 14

live demo β†’

Hero Section 15

live demo β†’

Hero Section 16

live demo β†’

← View all DiviWP Sections

Divi Blog Section Layouts

27 x Divi Blog Section Layouts.

We’re huge fans of the Divi Blog Module because it has the ability to display blog posts OR any Custom Post Type you’ve defined on your website.

This means you can take advantage of DiviWP’s Blog Section designs to display anything from Projects, to Courses or even Products!

The Divi Blog Module’s built-in design options are unfortunately very restrictive in their capabilities in that they don’t allow you to target certain design elements individually or provide design or layout options to achieve our desired layouts.

That’s why we’ve used Custom CSS in a seperate Code Module to create the Card, Grid and List style interfaces of these sections and to manipulate the Post Featured Image, Post Meta and Post Content into custom positioning.

View the documentation for DiviWP’s Blog Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Blog Section 1

live demo β†’

Blog Section 2

live demo β†’

Blog Section 3

live demo β†’

Blog Section 4

live demo β†’

Blog Section 5

live demo β†’

Blog Section 6

live demo β†’

Blog Section 7

live demo β†’

Blog Section 8

live demo β†’

Blog Section 9

live demo β†’

Blog Section 10

live demo β†’

Blog Section 11

live demo β†’

Blog Section 12

live demo β†’

Blog Section 13

live demo β†’

Blog Section 14

live demo β†’

Blog Section 15

live demo β†’

Blog Section 16

live demo β†’

Blog Section 17

live demo β†’

Blog Section 18

live demo β†’

Blog Section 19

live demo β†’

Blog Section 20

live demo β†’

Blog Section 21

live demo β†’

Blog Section 22

live demo β†’

Blog Section 23

live demo β†’

Blog Section 24

live demo β†’

Blog Section 25

live demo β†’

Blog Section 26

live demo β†’

Blog Section 27

live demo β†’

← View all DiviWP Sections

Divi Card Section Layouts

45 x Divi Card Section Layouts.

A Card is a User Interface (UI) design pattern that organises and groups content or information in an easily scannable manner. These specific chunks of information mimic a physical card-like appearance which users appreciate because it aids for scannability. Users don’t read, they scan.

We’ve designed a range of Divi Card Sections which include individual Divi Module cards, Divi Row cards and Divi Column cards.

They use a combination of built-in Divi Image, Blurb, Text and Button Modules to present content in a cognitively-friendly way because the user doesn’t have to exert effort reading vast amounts of text and can process information faster.

View the documentation for DiviWP’s Card Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Card Section 1

live demo β†’

Card Section 2

live demo β†’

Card Section 3

live demo β†’

Card Section 4

live demo β†’

Card Section 5

live demo β†’

Card Section 6

live demo β†’

Card Section 7

live demo β†’

Card Section 8

live demo β†’

Card Section 9

live demo β†’

Card Section 10

live demo β†’

Card Section 11

live demo β†’

Card Section 12

live demo β†’

Card Section 15

live demo β†’

Card Section 16

live demo β†’

Card Section 17

live demo β†’

Card Section 18

live demo β†’

Card Section 19

live demo β†’

Card Section 20

live demo β†’

Card Section 23

live demo β†’

Card Section 24

live demo β†’

Card Section 27

live demo β†’

Card Section 28

live demo β†’

Card Section 29

live demo β†’

Card Section 30

live demo β†’

Card Section 31

live demo β†’

Card Section 32

live demo β†’

Card Section 33

live demo β†’

Card Section 34

live demo β†’

Card Section 35

live demo β†’

Card Section 36

live demo β†’

Card Section 37

live demo β†’

Card Section 38

live demo β†’

Card Section 39

live demo β†’

Card Section 40

live demo β†’

Card Section 41

live demo β†’

Card Section 42

live demo β†’

Card Section 43

live demo β†’

Card Section 44

live demo β†’

Card Section 45

live demo β†’

← View all DiviWP Sections

Divi Button Modules

400+ Divi Button Modules.

These Button Sections are packed with Divi’s built-in Button Modules that you can simply copy and paste into your designs using Divi’s Copy Module functionality.

These include pills and badges along with a range of styles which each include options for icons positioned left or right or with no icons at all.

We’ve also included subtle hover effects that offer visual queues to the visitor that the button is clickable and can be dropped into your existing designs just by copy and pasting.

View the documentation for DiviWP’s Button Modules β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Button Section 1

Pills

live demo β†’

Button Section 2

Badges

live demo β†’

Button Section 3

Small Rounded

live demo β†’

Button Section 4

Large Rounded

live demo β†’

Button Section 5

Small

live demo β†’

Button Section 6

Large

live demo β†’

Button Section 7

Small Rounded with module custom css width

live demo β†’

Button Section 8

Large Rounded with module custom css width

live demo β†’

Button Section 9

Small with module custom css width

live demo β†’

Button Section 10

Large with module custom css width

live demo β†’

Button Section 11

Small Rounded with hover effect

live demo β†’

Button Section 12

Large with hover effect

live demo β†’

Button Section 13

Small with hover effect

live demo β†’

Button Section 14

Large with hover effect

live demo β†’

Button Section 15

Card design with button module custom css width

live demo β†’

Button Section 16

Card design with button module custom css width

live demo β†’

← View all DiviWP Sections

Divi Feature / Content Section Layouts

50 x Divi Feature / Content Section Layouts.

Feature / Content Sections are powerful combinations of text, images, photography and icons and are used to highlight your product, service, features and/or benefits.Β 

These sections include Divi’s built-in Image, Text, Video, Counter, Button and Blurb Modules to create visually interesting and readable blocks and provide you with a range of options you can experiment with within your own page design.Β 

You can pick and choose which Section to use and either create your own preset from it or copy/paste the section into your own pages and then customize it within your own system.

Everything is editable via the Visual Builder which means you can also mix and match various elements to create your own unique designs

View the documentation for DiviWP’s Feature / Content Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Feature Section 49

live demo β†’

Feature Section 50

live demo β†’

Feature Section 47

live demo β†’

Feature Section 48

live demo β†’

Feature Section 45

live demo β†’

Feature Section 46

live demo β†’

Feature Section 43

live demo β†’

Feature Section 44

live demo β†’

Feature Section 41

live demo β†’

Feature Section 42

live demo β†’

Feature Section 39

live demo β†’

Feature Section 40

live demo β†’

Feature Section 37

live demo β†’

Feature Section 38

live demo β†’

Feature Section 35

live demo β†’

Feature Section 36

live demo β†’

Feature Section 31

live demo β†’

Feature Section 32

live demo β†’

Feature Section 25

live demo β†’

Feature Section 26

live demo β†’

Feature Section 23

live demo β†’

Feature Section 24

live demo β†’

Feature Section 21

live demo β†’

Feature Section 22

live demo β†’

Feature Section 19

live demo β†’

Feature Section 20

live demo β†’

Feature Section 17

live demo β†’

Feature Section 18

live demo β†’

Feature Section 15

live demo β†’

Feature Section 16

live demo β†’

Feature Section 13

live demo β†’

Feature Section 14

live demo β†’

Feature Section 9

live demo β†’

Feature Section 10

live demo β†’

Feature Section 7

live demo β†’

Feature Section 8

live demo β†’

Feature Section 5

live demo β†’

Feature Section 6

live demo β†’

Feature Section 3

live demo β†’

Feature Section 4

live demo β†’

Feature Section 1

live demo β†’

Feature Section 2

live demo β†’

← View all DiviWP Sections

Divi Blurb Section Layouts

26 x Divi Blurb Section Layouts.

Blurbs are fundamental to modern web design because they convey information in a concise and visually pleasing manner making scanability and readability easy for the user.

These Blurb Sections include a combination of built-in Blurb, Text and Button Modules, providing a range of options you can experiment with within your own page design.

You can pick and choose which Section to use and either create your own preset from it or copy/paste the section into your own pages and then customize it within your own system.

Everything is editable via the Visual Builder which means you can also mix and match various elements to create your own unique designs

View the documentation for DiviWP’s Blurb Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Blurb Section 1

live demo β†’

Blurb Section 2

live demo β†’

Blurb Section 3

live demo β†’

Blurb Section 4

live demo β†’

Blurb Section 5

live demo β†’

Blurb Section 6

live demo β†’

Blurb Section 9

live demo β†’

Blurb Section 10

live demo β†’

Blurb Section 11

live demo β†’

Blurb Section 12

live demo β†’

Blurb Section 15

live demo β†’

Blurb Section 16

live demo β†’

Blurb Section 17

live demo β†’

Blurb Section 18

live demo β†’

Blurb Section 19

live demo β†’

Blurb Section 20

live demo β†’

Blurb Section 21

live demo β†’

Blurb Section 22

live demo β†’

Blurb Section 23

live demo β†’

Blurb Section 24

live demo β†’

Blurb Section 25

live demo β†’

Blurb Section 26

live demo β†’

← View all DiviWP Sections

Divi Testimonial Section Layouts

19 x Divi Testimonial Section Layouts.

Testimonial Sections are key for credibility and help establish trust in your company, product or service.

These sections include combinations of built-in Image, Text, Person, Testimonial and Button Modules to create visually interesting and scannable blocks, providing you with a range of options you can experiment with within your own page design.

You can pick and choose which Section to use and either create your own preset from it or copy/paste the section into your own pages and then customize it within your own system.

Everything is editable via the Visual Builder which means you can also mix and match various elements to create your own unique designs.

View the documentation for DiviWP’s Testimonial Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.

Testimonial Section 1

live demo β†’

Testimonial Section 2

live demo β†’

Testimonial Section 3

live demo β†’

Testimonial Section 4

live demo β†’

Testimonial Section 5

live demo β†’

Testimonial Section 6

live demo β†’

Testimonial Section 7

live demo β†’

Testimonial Section 8

live demo β†’

Testimonial Section 9

live demo β†’

Testimonial Section 10

live demo β†’

Testimonial Section 11

live demo β†’

Testimonial Section 12

live demo β†’

Testimonial Section 13

live demo β†’

Testimonial Section 14

live demo β†’

Testimonial Section 15

live demo β†’

Testimonial Section 16

live demo β†’

Testimonial Section 17

live demo β†’

Testimonial Section 18

live demo β†’

Testimonial Section 19

live demo β†’

← View all DiviWP Sections

Divi CTA Section Layouts

11 x Divi CTA Section Layouts.

CTA (Call to Action) Sections focus the users attention on performing a specific action.

These sections include a combination of built-in Text and Button Modules, providing a range of options you can experiment with within your own page design.

You can pick and choose which Section to use and either create your own preset from it or copy/paste the Section into your own pages and then customize it within your own system.

Our attention to detail makes each Section consistent within an overall design system. However, you’ll be able to tweak colors, copy, images, icons, basically anything within the layout or section in a matter of minutes using Divi’s built in productivity tools.

View the documentation for DiviWP’s CTA Section Layouts β†’

ξ€³ ξ€³ ξ€³ ξ€³ ξ€³

We’re extremely proud to be rated 5 stars as a creator on the official Divi Marketplace.

These reviews reflect our commitment to delivering an exceptional product and standard of professional support to customers worldwide.