3.3.3. How to create your own blocks?

Before learning about how to add blocks and elements to a page, please take note that Kadence elements are blue color and WordPress elements has black color elements. We suggest using just the Kadence Elements in blue color.

1. Adding Kadence Elements

Kadence Elements are building blocks you can use to design and customize your WordPress site. They include text, images, galleries, row layouts, sections, forms, and much more—giving you full control over how your content looks and where it appears.

2. Adding a Row Layout element

Row Layout is the base of your elements. We suggest when starting a new block, to start by adding a row layout and the number of section (columns) you would want to use. On the right side of the builder are located three main areas where are included the settings for row layout, in the screenshot below we show where you can find these settings. 

3. Adding a Kadence element

When adding Kadence element we suggest to keep in mind to select the blue elements which are Kadence elements and have more editing settings for each element.

4. Working with Tablet/Mobile device mode 

When working with a block, we suggest make appropriate edits for Tablet and Mobile mode. Keep in mind that not all settings can be applied to Tablet and Mobile mode. On the right side of the builder, in Block settings, you can select which mode you want to edit the element you working on. The options that have the screen selector - can be customized individually for each screen, while the options that do not have a screen selector - are global for all screens.

5. Paddings and Margins

Paddings and margins are important part of the editing process, it helps the block and element to be better optimized with spacing. We suggest to edit padding and margins for each device. These settings can be found in the Block Settings > Advanced area. 

6. How to control font sizes

There are two different ways to control font sizes, and each serves a different purpose.

6.1. Font Size in the Customizer (Global Settings)

The font size option in the Customizer sets the default (global) font sizes for your site. These values act as the baseline typography used across all pages and posts.

• Can be found in Dashboard > Appearance > Customize > Colors & Fonts > Typography
• Applies site-wide
• Controls default sizes for headings, body text, and other text elements
• Best for maintaining consistent typography throughout your website

Think of this as the starting point for your design.

6.2. Font Size in the Block Settings (Local Overrides)

The font size option directly in a block allows you to override the global font size for that specific block only.

• Can be found directly in the Block Settings
• Applies only to the selected block
• Does not affect other content or global settings
• Useful for emphasis, design variations, or special layouts

This gives you fine-grained control when you need a specific piece of content to stand out.

6.3. How They Work Together

• If a block does not have a font size set, it uses the Customizer’s global font size.
• If a block does have a font size set, the block’s value overrides the global setting.

In short:

• Customizer = global defaults
• Block settings = individual overrides

Updated on: 16/12/2025