> For the complete documentation index, see [llms.txt](https://developerinfotech.gitbook.io/zenokit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developerinfotech.gitbook.io/zenokit/getting-started/customize-the-layouts.md).
# Customize The Layouts
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.
2. **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.
3. **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 [**ZenoKit**](https://zenokit-divi.developerinfotech.com/)! We’re excited to see the amazing websites you create.
