CTA Sections

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

CTA (Call to Action) Sections focus the users attention on performing a specific action.

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)

CTA Section 2 (Flexbox version) - Button Modules
CTA Section 4 (Flexbox version) - Button Modules

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.

CTA Section 2 and 4 (Flexbox versions) - Button Modules

Flexbox properties allow the buttons modules to be positioned side-by-side at Desktop and Tablet views and stacked in Mobile view,

Let's look at the above section via the Layer View below:

In this instance the second column has Custom CSS applied in the form of flexbox properties. Here are the settings at Desktop, Table and Mobile and their corresponding effect on the design: