Listing Layout 2 Documentation

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

This layout uses a card based design to list rows of content: courses, services or anything you'd like!

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)

Listing Card Section
- CSS Code Module - Image Modules

Card Section
- CSS Code Module - Image Module
Contact Section
- CSS Code Module - Contact Form Module
Newsletter Section
- CSS Code Module - Email Optin Module

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.

Listing Card Section

Let's look at an example via the Layer View (Learn more about the Layer View here)

Note: Each module starts with what it is and then describes the html hierarchy of the elements in use.

For example, the image module, listed in the screenshot above, and labeled "Image .diviwp-image-16-9 640x360" is describing:

An image module
With a custom class name diviwp-image-16-9 (You can view this in Module Settings → Advanced → CSS ID and Classes)
And with suggested image dimensions of 640x360 (WxH) proportions (these are suggested, you may of course use your own image dimensions)

Above the image module, you'll a see Code Module labeled "CSS Code for .diviwp-image-16-9 to crop image module aspect ratio to 16:9"

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-image-16-9 and applying CSS properties to maintain to crop the image to a 16:9 aspect ratio a thereby preserving the "card" design of the row at various responsive breakpoints.

This allows editors to upload any image dimension without worrying about the images all being the same height and ratio.

This same technique is used on the the card section:

Contact Section - Contact Form Module

In the layers view, you can see the Custom CSS module which is targeting the Contact Form:

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

Newsletter Section - Email Optin Module