Pricing Sections

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

Pricing Sections use a combination of Blurb, Text and Button Modules to produce beautiful, clean and conversion optimized Pricing Sections that can be used in a variety of contexts and use-cases.

The standard Divi Pricing Module is just too restrictive for this, especially if you want to get creative in your layout configurations and combine interesting blurb and text modules within column layouts and card designs.

Everything is editable via the Visual Builder which means you can also mix and match various elements to create your own unique designs.

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.

Editing Pricing Section 17 - Interactive Switch/Toggle

Pricing Section 17 relies on jQuery code to hide or show Row on-click. Detailed documentation is provided further down below.

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 these 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. Learn more about Layer View and Wireframe mode.

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.

Editing Ribbons via the Visual Builder

We've included a variety of ribbons you can use to illustrate sales, discounts, best deals or any other tag.

These ribbons are Text Modules positioned absolutely via the Visual Builder and are fully editable.

The diagonal ribbons use the Transform Rotate CSS property via the Module's Design settings (Module Settings → Design → Transform) . 

It is therefore best to use the Layer View to edit these ribbons. 

The highlighted module above describes the text module and it's absolute position in relation to the column. 

IMPORTANT: If you want to change the text, you will need to adjust the text modules padding percentages to align it accordingly. 

You can edit this via the Module Settings → Design → Spacing

Be sure to adjust your percentages in Tablet and Mobile modes too!

IMPORTANT: In Mobile mode, there is a slight discrepancy between how the Visual Builder displays the diagonal ribbons and how they are rendered on the front-end. Here's an example illustrated side-by-side:

The first image is the Visual Builder and the second an actual mobile phone. 

You will just need to fine tune your padding percentages in mobile mode and flip between the Visual Builder and your device to make sure you're 100% happy. 

For circular ribbons, when you first view the section in the Visual Builder, they will appear below the column content. 

Once you hover your mouse over the Module, they will appear as they do on the front-end. 

Here's a side-by-side example of this:

Make sure your overflow settings are set to visible within your row and columns if you want to use these within your own column designs.

Editing Ribbons via Custom CSS Option

If you don't want to use a Module for ribbons then you can refer to the helper modules provided in Pricing Section 23. 

Each of these columns uses the :before and :after pseudo classes via the columns Custom CSS option: Columns Settings → Advanced → Custom CSS → Before / After input fields. 

You can adjust any of the text, colors and padding values here. 

A note on Button Module Custom CSS

One of the current limitations with the Button Module is the inability to set the button width via the Visual Builder settings controls. 

We can get around that by using custom css to define a button's width via Button Settings → Advanced → Custom CSS → Main Element.

Here's an example:

Setting the Button Module width allows us to create buttons with icons that do not shift onto two lines and aligns within a design system or card based interface. 

Button Module labels will indicate if they have custom css set but you can always use the "Modified Styles" filter to review any of the settings. 

IMPORTANT: You will need to adjust the button padding percentages if you change your button text or decide not to use an icon.  

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 or jQuery we have included in our layouts, templates or sections. 

Pricing Section 17 - How to edit each Row 

The switch effect is achieved by settings two custom class names to two seperate rows via Row Settings → Advanced → CSS ID & Classes → CSS Class

The first row is the row that is displayed by default and has the class:

section-1-switch 

The second row is hidden in the Visual Builder and has the class:

section-2-switch

This class uses Custom CSS  display:none so that it is only displayed when the switch is in the "on" position. 

Here's a look at the structure of the section in Layers View:

The fastest way to edit each row in the Visual Builder:

Enable Layers View, scroll down to the second Row, click he settings icon, navigate to Row Settings → Advanced → CSS ID & Classes → CSS Class and then change the class name from 

section-2-switch

to

section-2-swtich-editing

The second row will then display in the Visual Buidler and you will then be able to edit both rows within the Visual Builder:

When you're finished editing, you can change the class name back to 

section-2-switch

Digging deeper

The "Toggle Switch HTML Code Module" contains the html text before and after the toggle switch and includes the html for the checkbox input of the toggle switch: 

To update the actual text you'll need to edit the "Toggle Switch HTML Code" module.

If you want to edit the colors and active classes you can refer to the various commented CSS properties in the "Toggle Switch CSS Code" module.

For example, let's say you want to change the color of the demo text "The current Way".

Opening up the "Toggle Switch CSS Code" module, you can edit the color hex code on line 33:

You can edit these styles as far you'd like to customise the look and feel of the switcher text and colors. 

You can move all CSS and jQuery into Divi's Theme Options or your child theme. 

All you'd need to do is copy the Custom CSS classes and their properties and paste them into one of the options above. 

Just remember to delete the opening and closing <style> tags or <script> tags if you're moving any custom JavaScript.