Custom CSS classes allow you to apply advanced styling and personalize the appearance of specific elements on your website. By assigning custom classes, you can target buttons, text blocks, images, menus, forms, and other website components with your own CSS code.

This feature is especially useful for:

• custom website styling;
• advanced design adjustments;
• responsive layout customization;
• animation effects;
• third-party CSS integrations.

Tip: You can learn how to add custom CSS or JavaScript code to your website in this guide.
Important: Custom code functionality is available for websites with a Pro subscription only.

What Elements Support Custom CSS Classes?

You can add CSS classes to most website elements, including:

• buttons;
• text blocks;
• images;
• icons;
• menus;
• contact forms;
• galleries;
• containers;
• and many other content elements.

How to Add a CSS Class to an Element

Step 1: Open Element Settings

Select the element you want to customize and open its settings panel.

Examples of supported elements include:

• buttons;
• images;
• text areas;
• icons;
• navigation menus.

Step 2: Open the Advanced Tab

In the settings window, navigate to the Advanced tab.

Locate the CSS Class Names field and enter your custom class name.

CSS Class Naming Rules

Every custom CSS class must:

• start with the wl- prefix;
• contain between 4 and 25 characters total.

Example:

wl-custom-button

Important: The wl- prefix is required to separate your custom classes from the system classes used by the platform.

Adding Multiple CSS Classes

You can assign multiple CSS classes to a single element.

To add another class:

1. Click the Add Class button.
2. Enter the additional class name.

Note: You can add up to 20 CSS classes per element.

Using CSS Classes in Custom Code

After assigning a CSS class, you can customize the element using custom CSS code added to Site Settings > Custom Code > CSS Styles.

Example:

.wl-custom-button {
    border-radius: 50px;
    background-color: #000;
    color: #fff;
}

This allows you to fully customize the appearance and behavior of specific website elements without affecting the rest of the site.

Publish Your Website

After adding CSS classes and custom styles, publish your website to make the changes visible online.

Important Information About Custom Code Support

Please note that our support team does not provide assistance with:

• writing custom CSS;
• editing code;
• troubleshooting third-party scripts.

We can only provide guidance on how to embed and use custom code within the website builder.