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 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 →

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 →

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 →

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 →

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 →

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 →

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 →

Interactive Sections group and display information in a visually pleasing and interactive manner. Grouping content and visuals makes for excellent scanability and readability and the user can often be delighted by the visual feedback of their actions on a page. 

These sections use a combination of built-in Slider, Blurb, Text and Image Modules along with custom jQuery and CSS Code Modules which are included within the sections along with detailed instructions.

Interacting with the Layers View or Wireframe Mode makes it easy to update images or blurb content.

Our documentation outlines steps to edit all hidden rows or modules in the Visual Builder.

View the documentation for DiviWP’s Interactive Section Layouts →

Videos of your product, services, customers, demos or testimonials are huge credibility building blocks.

These Video Section layouts beautifully showcase Divi’s built-in Video Modules providing you with a range of options you can experiment with within your own page design.

Using combinations of built-in Text, Image, Blurb and Button Modules, these sections put the focus on the video element in a visually interesting and clean manner. 

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.

View the documentation for DiviWP’s Video Section Layouts →

Frequently Asked Questions (FAQ) are key sections that address your customers questions or pain points. They can be used to elaborate information or address specific questions. 

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

Titles 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. 

Each section uses a combination of Divi’s built-in Text and/or Blurb 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.

View the documentation for DiviWP’s Title Section Layouts →

These designs beautifully showcase Divi’s built-in Contact Form Modules providing you with a range of options you can experiment with within your own page design. Each form element is carefully designed to produce elegant and clear input fields. 

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.

Documentation is provided where Custom CSS is in use to achieve a desired look and feel across desktop, tablet and mobile.

View the documentation for DiviWP’s Form Section Layouts →

Beautiful form design increases conversions. These Sections beautifully showcase Divi’s built-in Email Optin Modules providing you with a range of options you can experiment with within your own page design. Each form element is carefully designed to produce elegant and clear input fields. 

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.

Documentation is provided where Custom CSS is in use to achieve a desired look and feel across desktop, tablet and mobile.

View the documentation for DiviWP’s Newsletter Section Layouts →