Customize The Layouts

All layouts in PricePalettes can be fully customized inside the Divi Builder. You can change colors, fonts, spacing, and backgrounds, replace placeholder text with your own content, and swap images or icons to match your brand. Each section is designed to be flexible — you can add or remove columns, adjust layouts, and even apply hover effects without coding. For advanced users, small edits to CSS or scripts can also be made to fine-tune the design.

---

Modify Custom CSS and Script

Custom Styling Within Modules

Some layouts in PricePalettes use the built-in Custom CSS fields inside Divi modules. To edit these,

1. Open the module

2. Then go to Advanced → Custom CSS and adjust the styles as needed.

Custom Code Module

Advanced → Custom CSS and adjust the styles as needed.

In a few of the PricePalettes sections, you’ll find that extra styling or functionality is handled through a Code Module.

If you’d like to adjust these,

1. Locate the code module in your layout.

2. Click on the module to access the custom CSS and scripts.

3. Edit the code to adjust styles or enhance functionality as needed.

---

Custom Colors With Code Module

Some additional colors and styles are applied through a Code Module inside the layout. To modify them:

1. Open the Code Module in the layout

2. Find the CSS color values (like #000000, #333, #rgba(215, 215, 215), etc.

3. Replace these values with your preferred colors or styles.

This helps you quickly customize the look.

---

Pricing Layouts With Toggle (Monthly & Annual)

All pricing layouts (e.g. Layout 31–40) are designed with a Monthly ↔ Annual toggle system. This system allows the user to switch between Monthly Pricing and Annual Pricing tables by clicking on buttons.

The script is same across all layouts – only the Row classes and Button classes differ per layout.

1. Structure of a Toggle Layout

Each pricing layout includes:

• Two Rows

  • Monthly Pricing Row

  • Annual Pricing Row

• Two Buttons

  • Monthly Button

  • Annual Button

The toggle script works by showing one row and hiding the other depending on which button is clicked

1. Classes Used

Every row and button has a unique class.

These classes follow a naming convention with a layout number suffix:

• Monthly Row Class → .monthly_pricing_row_XX

• Annual Row Class → .annual_pricing_row_XX

• Monthly Button Class → .monthly_pricing_btn_XX

• Annual Button Class → .annual_pricing_btn_XX

Here, XX is the layout number (31, 32, 33, … up to 40).

Do not remove classes – otherwise the toggle script will stop working.

1. Matching Rule

The Row classes and Button classes must use the same number.

• .monthly_pricing_btn_32 ↔ .monthly_pricing_row_32

• .annual_pricing_btn_32 ↔ .annual_pricing_row_32

If the numbers do not match (e.g. .monthly_pricing_btn_32 with .monthly_pricing_row_32), then the toggle will break.

1. Example (Layout 32)

---

Customize Annual Rows

• Switch to Wireframe Mode in the Divi Builder. This will give you a clear, simplified view of the layout structure.

• Locate the row labeled like “Annual Pricing Row 31” → This is the annual row class used in toggle layouts.

• If you want to update Annual content, make changes inside this row.

---

Dual-Color Highlight Headings

Pricing Palettes uses a simple class and custom CSS applied through a code module to create eye-catching headings with dual-color highlights. Here's how it works:

• Class Assignment: A specific class is added to the text module to enable dual-color functionality.

• Highlighted Word Styling: For words that need to be highlighted, simply select the text and apply the bold format in the Divi Builder.

---

Customize Text with Strong/Italic

Pricing Palettes uses a simple class and custom CSS applied through a code module to create headings with Customize text with strong and italic. Here's how it works:

• Class Assignment: A specific class is added to the text module.

• Customize Text: For Customize Text, you only need to select strong and italic from the text.