Homepage Layout 1 Documentation

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

This perfect starting point for your homepage or landing page. 

It includes 15 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 Contact Form Module
  • Newsletter Section
    • CSS Code Module for Email Optin Module
  • Interactive Section 
    • CSS Code Module
    • Javascript Code Module
  • Features Section Newsletter
    • CSS Code Module for Email Optin Module
  • CTA Section
    • Custom CSS to align Button Modules side-by-side

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

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 optin form 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 at the top of the image, the blurb labels indicate they have an ID of image-showcase-item- digit. 
Further down you can see each image module listed also has an ID of blurb-image-showcase- digit. 
  • The blurb ID of image-showcase-item-1 is therefore displaying the image module with ID blurb-image-showcase-1.
  • The blurb ID of image-showcase-item-2 is therefore displaying the image module with ID blurb-image-showcase-2.
  • The blurb ID of image-showcase-item-3 is therefore displaying the image module with ID blurb-image-showcase-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. 

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

CTA Section - Button Modules side-by-side

Here is the Layers view of the section above:

The Row label is describing how Column 2 in the row has Custom CSS flexbox properties enabled. 

The Column label mentions the custom css flexbox for easy reference: Column with custom css flexbox.

Side Note: We have a tutorial on understanding the basics of flexbox and how you can use it with Divi which will be published soon!

Back to the example above, if we click on the  Settings → Advanced → Custom CSS editor, here's what we'd see.

In this particular example, enabling the use of: 

  • display: flex;
  • justify-content: center; 
  • align-items: flex-start;

...on the Column Main Element enables us to order the button modules side-by-side on the same row in the column. 

Side note: For those of you curious, the "-" prepended to the property e.g -webkit-box-pack: center in the custom css are known as vendor prefixes which allows designers to target all browser variations to make sure they are fully supported. This article is a good primer on prefixes if you're interested, and check out autoprefixer.github.io if you're looking for an excellent tool.

There are slight tweaks to the Tablet and Phone versions which take advantage of stacking the modules vertically for mobile. 

For more CTA sections with and without custom CSS, you can check out the CTA sections gallery