Adding CSS Classes to Elements on Your Site

Adding CSS Classes to Elements on Your Site


You can add up to 5 class attribute values to almost every element on your site. You can use CSS classes to change elements you need by adding CSS code.
Tip: you can add the CSS code to your website using this guide. Adding code is only available for sites with a Pro subscription.

Adding CSS classes

You can add CSS classes to most of the elements on your website: buttons, images, icons, text, site menu, contact forms, etc. To do this, follow these steps:


1. Open the settings for the desired element. Examples of opening settings:
2. Go to the Advanced tab and enter the desired class name for the element in the CSS class names section's field:
Important: Every CSS class must start with the "wl-" prefix (without quotes). It is necessary to distinguish your custom classes from those our platform uses.
Note: The minimum length of a class name is 4 characters (together with the "wl-" prefix), and the maximum length is 25 characters.

3. You can add more CSS classes to an element using the Add class button:


Note: You can add a maximum of 20 CSS classes to a single element.

4. Done! You can now use this CSS class while adding custom code to your site. For example:

Publish your site for the changes to appear live.

Note: Our support team does not assist with creating or editing your code. We can only provide you with guides on embedding the code on your website.



    • Related Articles

    • Adding Your Own CSS to the Site

      At SiteCliq you can add your own styling to the elements with the help of a custom CSS script. With the help of our tools you can place your code either to a particular page or to the whole site. Important: this feature is available for Pro sites ...

    • Adding Your Own Code to the Site

      You can add your own code to the site to integrate a third-party service — for example, a typeform, booking system, calendar, etc. With the help of our tools you can integrate your code either to the whole website or to a specific page. Important: ...

    • Adding Elements

      Most blocks in our editor are fully customizable. Therefore, you can enrich the look of your blocks by adding new elements to them — for example, icons, dividers, lists, etc. Tip: see the article Adding a custom block to create your block from ...

    • Adding links to elements (click action)

      To provide your visitors with the best experience on the site, you should make the elements clickable — for example, buttons, navigation menu, social icons, phone numbers, etc. — so that they direct your visitors to relevant sections. For that, you ...

    • Managing Elements

      Once you've added new elements to your blocks, you can further access their settings to duplicate, delete, or edit them. Each item has its own settings, but there are basic actions that can be applied universally. Also, if you're planning to add ...