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.

While importing Qubely does asks us to apply global styling while importing

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

This will open Qubely Global Settings panel on the sidebar

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.

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.

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 .

To change Line height, Letter Spacing and Text Transform, click on Advanced Typography

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

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