How to apply styling to a page builder page from the theme builder

In this tutorial, you’ll learn how to apply styling to a Page Builder page using the Theme Builder.

Jip Volkers

Published: 21-07-2020

Last updated: 27-08-2020

Introduction

Creating pages in the Page Builder using the default component set looks quite nice already, but did you know that you can configure many styling options within the Theme Builder that’ll make your page look even better? Just continue reading to find out!

Because in this article, we’ll teach you how to change components their colors, border thickness, text size, and more!


Theme Builder

The Theme Builder is a place where you can modify all styling aspects of your Page Builder components. All styling options are predefined in the Theme Builder and are applied to the components on a page. When a component is selected, you can modify its options and choose from the predefined styling options.


Current page

I’ve created a simple page without any styling, right now the page is using the default Theme Builder settings.

The horizontal lines and Add to cart button are both of the color Primary.


Colors

Let’s navigate to the Theme Builder which is located under the Tools menu in the Builder Bar. You can change any color option by clicking on it and picking a color from the color picker, I will change the Primary color to purple as you may see right below.

Because the horizontal lines and Add to cart button components already have the Primary color assigned to them, they will now change from the color blue, to the purple color that has been picked from the color picker.


Title

If you scroll down a bit, you may also change plenty of options for the Title component. For example, you can change the size of the text for each type and for every screen resolution. But besides the text size, there are also many other options that change the look and feel of the text which can be configured.

Let’s make Title 3 look different by setting the font weight to Bold so that it looks fatter. Let’s also add some Letter spacing, set it to any option but normal and enter a value that should be the letter spacing.


All styling that is changed in the Theme Builder is instantly applied to the page as well. So if we would select Title 3 as the type for our Title component, it will retrieve the styling that has just been made.


Inner and outer spacing

You may also modify the sizes of the inner and outer spacing located at the bottom of the Theme Builder. Each size can be modified per screen resolution, and a preview is shown on the right.


Recap

All these changes will result in a different look for your page!


And that concludes the tutorial on how to apply styling to a Page Builder page from the Theme Builder. If you have any questions about the components themselves, go check out our Page Builder Component Reference! I hope it helped you out a lot, and for now, goodbye!

In this tutorial
×

Not sure where to start?

Click here to register and start learning
Register