Homepage Layout 5 Documentation

Layout Demo URL: https://diviwp.com/ui/page-layouts/home-pages/homepage-5/

This perfect starting point for your homepage or landing page. 

It includes 12 versatile and beautifully designed sections you can mix and match to make your own.

Editing the demo content

Each DiviWP Layout 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 this Layout (scroll down for in-depth documentation)

  • Blurb Section 
    • CSS Code Module for Image Module
  • Feature Section
    • CSS Code Module for Image Modules
  • Feature Section 
    • CSS Code Module for Image Module
  • Interactive Section
    • CSS Code Module for Slider Module
  • Newsletter Section
    • CSS Code Module for Email Optin Module

Related documentation:

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. 

Blurb Section - Image 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.

In the Layers view, you can see the Custom CSS module which is targeting the Image Module with a custom class of .diviwp-blurb-14-portrait.  (You can view this in Module Settings → Advanced → CSS ID and Classes) 

The CSS is applying properties to maintain the image height 100% to it's parent column.

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, without distorting the image:

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.

Feature Section - 16:9 Aspect Ratio for Image Modules

In the Layers view, you can see the Custom CSS Code module which is targeting the Image modules with a custom class of .diviwp-image-16-9

The CSS that is targeting the classname .diviwp-image-16-9 and applying CSS properties to maintain the image aspect ratio to 16:9 for tablet and mobile. 

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
  • for users to upload any image without it distorting horribly or having inconsistent height. This means users can upload any image without having to reformat it to the dimensions 640x360 (of course you could formate your images to these dimensions too but we want to create layouts that are beautiful and optimal for as many use-cases as possible!)

Note: This does not produce a new image file, it merely uses an aspect-ratio friendly CSS trick at tablet and mobile breakpoints. 

Here's the section in action for tablets and mobile:

Notice how the image maintains it's proportional height to the card row and also crops to a perspective that maintains an aspect ratio of 16:9. This allows any image to be uploaded and dynamically resized correctly to the fill the correct height proportionately. 

Interactive Section - Slider Module

Tablet view

Mobile view

You can edit this slider module just like any normal slider module.

The slider is made up of 3 demo slides but you can remove, duplicate or add as many as you'd like!

To change the image, simply go the Image setting and upload your image.

The Slide description includes a quote graphic and uses h4 and h5 tags for the name and position. These can be optionally removed or you can edit the h4 and h5 styles in the custom CSS module. 

In the Layers view you can see the Slider CSS Code module is targeting the slider module which has a custom class of .diviwp-testimonial-slider. 

This CSS enables the unique design of the Slider Module that is not possible to achieve using only the Slider module settings. 

The CSS is using properties to create the diagonal line between the image and the body text as well as the transitions between the slides.  It should be edited with caution. 

Newsletter Section - 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-firstname-white-input

This CSS enables the unique design of the Email Optin Module 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