Need help? We've got your back.

You can create custom variables to later use on any page throughout your website. This option lets you create a custom variable, which could be a color or a size, and then you can use it inside the builder 2.0 on different components. As a result, a consistency in design is maintained across your website.

Go to Website Builder -> Variables. This is where you’ll find the default collection containing all the default variables. You can edit them and choose your own set of primary colors and for different devices too.

To create a new custom variable, first click the Add Collection button. On the popup, give a name and create the collection. This will add a separate custom collection as you cannot add variables to the default collection.

Click the newly created custom collection and then click the Add New Variable button on the top right corner of your screen.

You can choose from adding a color or size variable.

You can edit the variable name, define the colors either in hex value or through color selector, and set the size in different units such as px, em, rem, percentage, etc. 

With custom variables added, you can use them directly on different elements and parts of a page on your website within the builder 2.0. To do that, open any page inside the builder 2.0. You can do that from Website Builder -> Pages.

Inside the builder, you can use the default or custom variables wherever you see the pencil or resize icon. For colors, you’ll see the pencil icon and resize icon is for setting the custom size.

You can use the custom variables on any text, button, elements, widgets, and pretty much anything inside the builder.