Testimonial Sections

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

Testimonial Sections are key for credibility and help establish trust in your company, product or service.

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)

Testimonial Section 1 - Image Module
Testimonial Section 2 - Image Module
Testimonial Section 11 - Testimonial Module
Testimonial Section 12 - Testimonial Module
Testimonial Section 13 - Testimonial 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.

Testimonial Sections 1 and 2 - Image Module

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

Testimonial Sections 11, 12, 13 - Testimonial Modules

In order to get the Person Module image on the left of the Name and Position, some small Custom CSS within the module is necessary.

By clicking on Module Settings → Advanced → Custom CSS you will see these values applied:

This CSS float the image to left of the Name and Position fields.