Change Default Colors of Qubely Blocks & Sections
Do you want to change default colors & typography of Qubely Blocks / Sections while importing layout of Qubely? . This article will explain in simple steps how you can do just that.
Problem: While importing layout using Qubely Import Layout, the block imported comes with default presets
Solution: You can customize Presets in Qubely Global Settings to match theme color or to a color pallette and typgraphy of your choice.
![](https://xenrion.com/wp-content/uploads/2021/03/image-1024x535.png)
While importing Qubely does asks us to apply global styling while importing
![](https://xenrion.com/wp-content/uploads/2021/03/image-2-1024x574.png)
To change this global styling to match with your brand color / identity here are simple steps to follow
Step 1: Click on the Q icon on the top toolbar of WordPress to open Qubely Global Settings Panels
![](https://xenrion.com/wp-content/uploads/2021/03/image-7-1024x252.png)
This will open Qubely Global Settings panel on the sidebar
![](https://xenrion.com/wp-content/uploads/2021/03/image-5.png)
Step 2: Change default color of Qubely blocks to match default WordPress theme color , you need to right click Theme option under Qubely Global Settings and activate it.
![](https://xenrion.com/wp-content/uploads/2021/03/image-8.png)
This will enable you to use your existing theme color while importing Qubely layouts. You need to select the option Yes when asked to Apply Global Stylings while importing
Step 3: Using Custom Preset Color / Typography while importing Qubely Blocks / Sections
To use custom preset color, click on Present #1 and you will see sub panel opening with options of Global Colors and Typography.
![](https://xenrion.com/wp-content/uploads/2021/03/image-9.png)
You can click on each individual color pallete and replace it with color hexcode of your choice.
Similarly you can click on any Heading 1, Heading 2 and change the Font-Size, Font-Family .
![](https://xenrion.com/wp-content/uploads/2021/03/image-10.png)
To change Line height, Letter Spacing and Text Transform, click on Advanced Typography
![](https://xenrion.com/wp-content/uploads/2021/03/image-11.png)
To change Font-size for Tablet, Mobile click on each relative icon and make changes. You can do this for Font-size and even Advanced Typography option
![](https://xenrion.com/wp-content/uploads/2021/03/image-12.png)
Once this settings are configured, you can easily import layouts using Qubely Import Layout option and match it with the colors and typography that you have configured.
Looking to create a custom website ? Get in touch with us today to request a no-obligation quote for a custom wordpress website