Zenokit
  • Welcome
  • Getting Started
    • Installation
    • Using ZenoKit Layouts
    • Customize The Layouts
Powered by GitBook
On this page
  • Modify Custom CSS and Script
  • For Medical & Healthcare Landing Page
  • For Spa Salon Landing Page
  • Dual-Color Highlight Headings
  1. Getting Started

Customize The Layouts

PreviousUsing ZenoKit Layouts

Last updated 3 months ago

Each section in ZenoKit is thoughtfully designed for maximum versatility, allowing full customization via Divi Builder settings to:

  • Change colors, fonts, and spacing etc...

  • Replace the placeholder text with your content.

  • Replace images, icons, or backgrounds.

  • Edit Some CSS and Script code.


Modify Custom CSS and Script

Some layouts in ZenoKit include additional CSS and scripts added directly to the code module. To make further changes:

  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.


For Medical & Healthcare Landing Page

In the Medical & Healthcare landing page, The contact form has been enhanced with:

  1. Message Color Css

  2. Select Field Icon Color Css

Both customizations are added directly in the contact form module’s CSS settings.


For Spa Salon Landing Page

To create functional and visually appealing Service Tabs on the Spa Salon landing page:

  1. Add ID to the Tab Item Assign the ID service-tab-1 (or a similar numbered variation) to the desired tab item.

  1. Match the ID with Tab Content Row Assign the ID service-tab-content-1 to the corresponding tab content row. Ensure that this ID matches the tab item ID (e.g., service-tab-1) to establish a proper connection.

  1. Customize Appearance and Functionality

  • Locate the corresponding tab and content within the Divi Builder.

  • Apply additional styles or functionality as needed using Divi settings.

This ensures that the service tab items and their corresponding content work seamlessly together. If you wish to make further changes, you can enhance the interaction with additional customization in Divi or by editing the associated code in the code module.


Dual-Color Highlight Headings

ZenoKit 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.

  • Custom CSS: Additional CSS is included in the code module to define the dual-color styling. You can easily modify the highlight color in the CSS to suit your design preferences.


Thank you for choosing ! We’re excited to see the amazing websites you create.

ZenoKit