Need help? We've got your back.

Find advice and answers for everything

Back

Category: Website Builder 2.0

How To Create & Use Custom Variables

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.



image



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.



image



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



image



You can choose from adding a color or size variable.



image



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. 



image



image



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.



image



image



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