Hero Sections

Layout Demo URL: https://diviwp.com/ui/sections/hero-sections/all-hero-sections/

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 - they are powerful conversion tools!

For those interested, Sitepoint has a nice primer on the etymology of the word "Hero" and how it applies to web design in a story telling context: https://www.sitepoint.com/exploring-hero-section/

Editing the demo content

Each DiviWP Section can be edited using the Visual Builder. 

You can make your changes to various module settings, upload new images, change colors, toggle between the desktop, tablet and mobile views and publish your page to achieve the look in the demo.

In some sections outlined below, Custom CSS is necessary to achieve a desired affect or an optimal responsive user experience and where the Divi Builder was unable to do it with it's Module settings alone. 

Why Custom CSS is used in Sections

Divi is an incredible builder and you can certainly do a ton of things with its built-in settings. 

We're sure we'll see the introduction of even more new settings in time, but for now, we believe it does not (yet) have the ability to configure the necessary settings to create a particular interface design or effects. 

So by including Custom CSS in a seperate Code Module or labeled within the Row, Column or Module, you can learn how we've used various CSS properties to achieve a desired effect. 

How to view Custom CSS

When you are editing in the Visual Mode and building on the front-end of your website, Custom CSS Code Modules or Custom CSS configured within a Row, Column or Module is not visible.

Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.

Custom CSS in use in sections (scroll down for in-depth documentation)

• Hero Sections 1 - Contact Form Module
• Hero Sections 2 - Contact Form Module
• Hero Sections 3 - Email Optin Module and Slider Module
• Hero Sections 4 - Email Optin Module and Slider Module 
• Hero Sections 5 - Email Optin Module
• Hero Sections 6 - Email Optin Module
• Hero Sections 7 - Video Module
• Hero Sections 8 - Video Module
• Hero Sections 9 - Image Module
• Hero Sections 10 - Image Module
• Hero Sections 11 - Image Module
• Hero Sections 12 - Image

Related documentation:

• Can I edit Module labels?
• Can I modify Layouts or Sections?
• Custom CSS - How and Why It's Used in Sections
• How are admin labels used in Sections, Rows, Columns and Modules?
• What if I don't want to use any Custom CSS?

Support is always on hand

You can rest assured that support is always on-hand and we'll be able to guide you as far as possible should you require assistance with any custom CSS we have included in our layouts, templates or sections. 

Hero Section 1 and 2 - Contact Form Module

Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.

Let's look at the above section via the Layer View below. You can see the Custom CSS module which is targeting the Contact Form Module with a custom class of .diviwp-contact-form-gray-input. (Custom Classes are applied in Module Settings → Advanced → CSS ID and Classes) 

This CSS enables the Contact Form Module to format beautifully across various responsive breakpoints. 

Screenshots below display the Contact Form Module in tablet and mobile views:

Tablet view

Mobile view

Hero Sections 3 and 5  - Email Optin Module

In the layers view below, you can see the Custom CSS module which is targeting the Email Optin Module with a custom class of .diviwp-optin-form-white-input.

This CSS enables the unique design of the optin form that is not possible to achieve using only the Email Optin Module settings. The CSS enables the form to format beautifully across various responsive breakpoints:

Tablet view

Mobile view

Hero Section 4 and 6 - Optin Module

In the layers view for these sections, you can see the Custom CSS module which is targeting the Email Optin Module with a custom class of .diviwp-optin-form-gray-input.

Hero Section 3 and 4 - Slider Module

Notice how the Custom CSS module which is labeled: Slider CSS Code for .diviwp-card-slider. (Custom Classes are applied in Module Settings → Advanced → CSS ID and Classes) 

This means the code is targeting the slider module with a custom class diviwp-card-slider. 

In the second Column, you can see the Slider module is labled: Slider .diviwp-card-slider. This means the Slider module has a custom class of diviwp-card-slider applied. 

The CSS used enabled the look and feel of the card slider and maintains the design beautifully at various responsive breakpoints:

Tablet view

Mobile view

You can edit each slide like you normally would with Slider Module:

Hero Section 7 and 8 - Video Modules

Accessing the Layer View or Wireframe mode gives you access to your page and section structure, displaying all elements in an organized, nested hierarchy list that clearly showcases your page structure. Learn more about Layer View and Wireframe mode.

Let's look at the above section via the Layer View below.

For example, the Video Module labeled "Video .diviwp-video-height-100" is describing:

• A Video Module
• With a custom class name diviwp-video-height-100 (You can view this in Module Settings → Advanced → CSS ID and Classes) 

Below the Video Module you'll a see Code Module labeled "CSS Code for .diviwp-video-height-100 to make video 100% height for screen sizes 980px - 1310px".

The Code Module admin label is describing what the CSS properties within it's module are targeting and describes what it is used for. 

In this case, the code module contains CSS that is targeting the classname .diviwp-video-height-100 and applying CSS properties to maintain the video height 100% to it's parent column, thereby preserving the "card" design of the row at various responsive breakpoints.

Here's an example of this in action at 1055px screen width: 

Notice how the video takes up 100% of the "card" row while maintaining it's proportions. 

If we removed the CSS Code module, here's what the row would look like at 1055px screen width:

Without the custom CSS, the video does not scale vertically proportionately. This doesn't make the design feel as "polished".

Hero Section 9 - 12 - Image Modules

Let's look at the above section via the Layer View below.

In this section, the code module contains CSS that is targeting the Image Module with a custom classname of .diviwp-image-10-portrait and applying CSS properties to maintain the image height 100% to it's parent column.  (You can view the custom classes in in Module Settings → Advanced → CSS ID and Classes) 

The CSS Code module also contains CSS to that will maintain the image aspect ratio to 16:9 tablet and mobile breakpoints. This enables images to have a smaller height while cropping the image automatically without distorting it. 

The reason this technique is used is to reduce the overall height of the image at tablet and mobile breakpoints. 

Notice how the section below looks correct and easy to digest.

Tablet view

If we didn't use the aspect ratio CSS trick, the image would take up a huge portion of the screen unnecessarily and wouldn't feel as polished. Here's an example below:

Tablet view

Notice how much vertical space the image takes up unnecessarily - that's crazy huge! I had to zoom out just to make sense of it! 

A few alternative solutions you might be interested in or want to try yourself:

• Upload different images for Desktop, Tablet and Mobile views in the builder. 

We don't like this solution because it triples the amount of work you're doing for yourself, having to create the images and then upload them individually for each change. 

• Duplicate the row and make the "Desktop" row invisible and the "Tablet" row visible.

We don't like how this solution doubles your time to make a change. Any change you make to the first row, you'll have to remember to make for the second. We like striving for a "single source of truth" as far as possible.

• Use the image as a background image of it's parent column and leave the column empty

The card design in the template is optimised for usability so the ability to click on the image is important. You can't click on background images. 

You might say that you can set the  column to be clickable which would "mimic" the same effect as having a clickable image. This is true and is an alternative option, however, setting the background image in the column is not an intuitive editing experience for users who might be updating the layout on a regular basis. There are also SEO sacrifices such as the background image not being indexed for Google Image.