Gutenberg Dual Heading Block

Introduction

In this guide, you’ll learn to use Gutenberg Dual Heading Block in WordPress sites to create titles with distinct styles for each section. We’ll show you how to adjust the design elements for the main and secondary parts of your heading. By the time you’re done, you’ll be able to make visually interesting headings and set the tone for your content.

Visit Demo Page

Free Download

Requirements

Before you start with Gutenberg Dual Heading Block in WordPress, make sure that Premium Blocks is installed and turned on.

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Dual-Heading Block?

Go to the editor’s menu, select a Premium Dual Heading Block, type in your heading, and then adjust its appearance and placement on your page.

General Settings

After choosing the dual heading, you can modify its settings using the available options.

HTML Tag: Choose the HTML tag that best fits the hierarchical structure of your page, from H1 for main titles to H6 for subheadings.
Display: Set how the heading is displayed on the page, with options like block or inline.
Link: Add a hyperlink to your heading.
Open link in new tab: Decide whether the link opens within the same tab or a new one.
Alignment: Align your heading to the left, center, or right on the page.

Gutenberg Dual Heading Block layout General Settings — Gutenberg Dual Heading Block – General Settings

Gutenberg Dual Heading Block Styling Controls

First/Second Heading Style

Typography: Adjust font properties like size, weight, and style.
Clipped: Apply a clipping mask to your heading for creative text effects.
Animated: Add animation to your heading for dynamic content.
Stroke: Outline your heading with a stroke for emphasis or style.
Background Type: Choose a background for your heading, like a solid color, gradient, or image.
Text Shadow: Cast a shadow behind your heading to make it stand out.

Gutenberg Dual Heading Block - first & second heading typography, background type or text shadow — Gutenberg Dual Heading Block – Heading Style

Border: Define a border around your heading.
Border Radius: Round the corners of your heading’s border.
Margin: Control the space outside the border of your heading.
Padding: Adjust the space inside the border of your heading.

Gutenberg Dual Heading Block - Heading Style typography settings including The panel shows settings for the margin and padding around text. — Gutenberg Dual Heading Block – Heading Style

Container Style

Background Type: Choose from different background options for the container, such as color, gradient, or image.
Border: Add a line around the edge of the container, with options to customize the style, width, and color.
Border Radius: Adjust how rounded the corners of the border are, with individual controls for each corner (top, right, bottom, left).
Margin: Control the space between the container and other elements on the page.
Padding: Set the space between the border and the content inside the container.

Conclusion

In conclusion, Gutenberg Dual Heading Block offers an extensive range of customization options that empower WordPress users to elevate their content with visually captivating headings. By integrating distinct styles for each part of the heading, adjusting typography, applying animations, and utilizing various background types, users can significantly enhance the aesthetic appeal and readability of their websites. This tutorial provides a comprehensive guide to harnessing the full potential of the Dual Heading Block, ensuring that even beginners can create professional-looking titles that capture their audience’s attention. As we wrap up, it’s clear that mastering this tool can set a strong visual tone for your content, making it stand out in the digital landscape.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Dual Heading Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg Dual-Heading Block?

General Settings

Gutenberg Dual Heading Block Styling Controls

First/Second Heading Style

Container Style

Conclusion

Need Further Help?

Global Features

Help Center

Our Products

About Leap13