Homepage Layout 2 Documentation

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

This perfect starting point for your homepage or landing page. 

It includes 13 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)

  • Hero Section 
    • CSS Code Module for Slider Module
    • CSS Code Module for Email Optin Module
  • Service Section
    • CSS Code Module for Email Optin Module
  • Interactive Section 
    • CSS Code Module
    • Javascript Code Module
  • Testimonial Section 
    • CSS Code Module for Image Module
  • Video Section
    • Custom CSS to make the Video Module 100% at various screen widths
  • 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. 

Hero Section - Slider 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.

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 - Email Optin Module

In the layers view above, 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

Service 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-gray-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.

Interactive Section

This Interactive section displays and hides images depending on which blurb module is clicked. 

Each blurb module can be customised along with the corresponding image. Interactive Sections like the one in this layout (and including all the interactive sections) above rely on jQuery to hide or show elements on-click.

The Visual Builder renders the jQuery code on the front-end making it impossible to view or edit the hidden Sections, Rows or Modules. For those sections you will need to access the  Layer View or  Wireframe Mode to edit them.
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.
Here is the Layer view of this interactive section:
As you can see from the layer view, the image labels indicate they have an ID of blurb-image-showcase-left-vertical- digit. 
Further down you can see each blurb module listed also has an ID of blurb-image-showcase-right-vertical-item- digit. 
  • The blurb ID of blurb-image-showcase-right-vertical-item-1 is therefore displaying the image module with ID blurb-image-showcase-left-vertical-1
  • The blurb ID of blurb-image-showcase-right-vertical-item-2 is therefore displaying the image module with ID blurb-image-showcase-left-vertical-2
  • The blurb ID of blurb-image-showcase-right-vertical-item-3 is therefore displaying the image module with ID blurb-image-showcase-left-vertical-3

To replace the images all you need to do is click on the settings icon:and then make your changes like you would any other image module. 

All the jQuery Code and CSS Code is included in the the custom modules below the images. These are not visible on the front-end and should be edited with caution. 

Most users simply tweak the blurb design and replace the images to make it suit their look and feel. 

You can view more variations on the interactive sections page. 

Testimonial Section

You can easily change any of the text and image using Divi's normal editing tools from within each module via the Visual Builder: 

In the layers view below, you can see a few things going on:

The first is that column 2 is labeled "Column .diviwp-col-flex". This means the column has a custom class applied called diviwp-col-flex.

The image module is labeled "Image 510x340 .diviwp-image-height-100 with custom css diagonal :before pseudo-element"

This label indicates the image module has suggested dimensions of 510x340, has a custom class applied called diviwp-image-height-100 and has custom CSS within it's module which is creating the diagonal effect. 

The CSS Code module is targeting the image module custom class of .diviwp-image-height-100.

What all of the above does is enable the look and fee of the section to be beautifully responsive across tablet and mobile devices:

Tablet view

Mobile view

Video Section - Video 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.

Let's look at the above example via the Layer View:

The Video Module is labeled "Video .diviwp-video-14-height-100" is describing:

  • A Video Module
  • With a custom class name diviwp-video-14-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-14-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-140height-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 1027px 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".

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