Gutenburg Heading Block Tutorial

Introduction

Let’s walk through how to use Gutenberg Heading Block in WordPress. We’ll start with the basics of adding a heading to your page and then explore how to customize it. You’ll learn to change its size, color, and add icons if you like. We’ll also cover how to adjust the spacing around your headings to make sure they fit nicely with the rest of your content. This tutorial is for anyone who wants to make their WordPress pages look better and be easier to read.

Requirements

To use Gutenberg Heading Block in WordPress, please ensure you have the necessary plugin installed and active.

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

How to Use Gutenberg Heading Block?

From the editor’s menu, add a Premium Heading Block, enter your title, and then tweak how it looks and where it sits on the page.

General Settings

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

  • Style: Choose the visual design for the title.
  • Icon: Toggle to add an icon alongside the title text.
  • Type: Select the format of the icon, with options like a standard icon, an image, an SVG, or a Lottie animation.
  • Select Icon: Pick the specific icon you want to use from a list or library.
  • Icon Position: Decide where the icon should be placed relative to the title text.
  • Title Tag: Choose the HTML tag that defines the importance of the title, such as H1 for main headings or H3 for subheadings, affecting both the size and SEO hierarchy.
  • Alignment: Set the text alignment within the block, with options for left, center, or right alignment.
  • Link: Toggle to make the text a hyperlink, where you can enter the desired URL.
  • Open Link in New Tab: Enable to open link in a new browser tab.
  • Background Text: Enable a text background to set text as a background layer.
  • Text: Enter the text that will be displayed as heading background.
  • Width: Choose the width of the heading background text block.
Gutenberg Heading Block Style: alignment and style, background text, etc
Gutenburg Heading Block – General Settings

Gutenberg Heading Block Styling Controls

Title Style
  • Typography: Adjust the font settings like size and style.
  • Color: Set the text color for the title.
  • Shadow: Add a shadow effect to the title text for depth or emphasis.
  • Border: Create a border around the title text. You can customize the style, width, and color.
  • Border Radius: Change the roundness of the title border’s corners. This setting allows for individual adjustments on the top, right, bottom, and left sides.
  • Margin: Modify the spacing around the heading, with individual control over the top, right, bottom, and left margins.
  • Padding: Set the inner spacing of the heading, again with separate weights for top, right, bottom, and left.
Gutenburg Heading Block - Title Style: typography, color, shadow, etc
Gutenburg Heading Block – Title Style
Icon Style
  • Size: Adjust the icon’s size, with the ability to set the value in pixels (px), ems (em), or rems (rem).
  • Color: Choose the color of the icon.
  • Background: Select a background style for the icon with options to have a solid color, gradient, or image.
  • Border: Define a border around the icon, with options to customize its style, width, and color.
  • Border Radius: Modify the curvature of the icon’s corners. This can be adjusted for each corner—top, right, bottom, and left.
  • Margin: Modify the spacing around the heading, with individual control over the top, right, bottom, and left margins.
  • Padding: Set the inner spacing of the heading, again with separate weights for top, right, bottom, and left.
Gutenburg Heading Block - Icon Style color, size, background, etc
Gutenburg Heading Block – Icon Style
Background Text Style
  • Typography: Set the font size and family to the default or customize them as needed.
  • Horizontal Offset: Shift the text horizontally from its original position, measured in pixels, ems, or percentages.
  • Vertical Offset: Move the text vertically, with the same unit options as a horizontal offset.
  • Rotate (degrees): Rotate the text by a specified degree, offering a dynamic orientation to the text element.
  • Color: Choose a color for the text, with the current option showing as transparent.
  • Stroke: Outline the text with a stroke, which can be toggled on or off.
  • Blend Mode: Change how the text blends with its background, with various options like “Normal,” “Multiply,” etc.
  • Z-Index: Set the stack order of the text element relative to other overlapping elements, with higher values bringing the text to the front.
Gutenberg Heading Block - Background Text Style: typography, Horizontal and Vertical offset, color, etc
Gutenburg Heading Block – Background Text Style

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.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks