How do I edit the CSS for a widget in Website Builder?

This article will show you how to amend the CSS for your Website Builder’s widgets.

Changing the CSS means that you can update the look of your widgets so that they appear exactly the way you want them to. However, we only recommend that you change your site’s CSS if you’re familiar with HTML code.

Since this feature is available for multiple versions of our Website Builder tool, select your version from the list below and follow the instructions provided to get started:

If you’re not sure which version of Website Builder you have, you can find out by reading this article.

Please note: this feature is not available with our Website Builder Starter and Standard plans.

Version 8

Step 1 of 3

Start by logging in to your Website Builder package.


Step 2 of 3

From there, right-click the widget you want to edit and select Edit HTML/CSS from the menu that appears.

Click Edit CSS


Step 3 of 3

This will open the edit window where you can amend your site’s code. Be sure to select the CSS tab and then choose either General CSS for All Devices or Device Specific CSS, depending on the changes you wish to make.

Once you’re finished, click Update to save your changes.

Edit CSS


Versions 6 & 7

Step 2 of 3
From there, double-click the widget you wish to edit and select the CSS tab from the Settings panel.



Step 3 of 3

You will now be able to add or amend the CSS properties for the widget you’ve chosen.

Once you’re finished, click Save Changes to implement your changes.