Get Started

 Heading

4 min read

0:00 4:20

The ShapeBlock Heading Block lets you display customizable headings on your pages and posts. You can customize the heading tag, alignment, typography, colors, spacing, and highlighted text to match your design.

How to Add a Heading Block

Follow these steps to add and configure the Heading Block in the Gutenberg editor.

Step 1: Add the Heading Block

  1. Open a page or post in the WordPress Gutenberg editor.
  2. Click the + button to open the block inserter.
  3. Search for Heading under ShapeBlock.
  4. Insert the Heading Block into your page.
  5. Select the block to access its settings in the right-hand sidebar.
  6. Enter your heading text and customize its appearance.

Step 2: Configure the Heading Block

Select the Heading Block and open its settings in the right-hand sidebar. The available tabs are:

  • Settings: Configure the heading’s HTML tag and link options.
  • Layout: Set the heading text alignment.
  • Style: Customize heading typography, colors, spacing, and highlighted text.
  • Advanced: Configure additional spacing and background settings for the block.

Settings Tab

The Settings tab contains the Content panel. Use this panel to configure the heading’s HTML tag and link behavior.

1. Content

Use this panel to customize the heading’s HTML tag and link settings.

  • HTML Tag: Choose the HTML tag used for the heading.
    • H1: Use a level-one heading.
    • H2: Use a level-two heading.
    • H3: Use a level-three heading.
    • H4: Use a level-four heading.
    • H5: Use a level-five heading.
    • H6: Use a level-six heading.
    • DIV: Display the heading inside a div element.
    • SPAN: Display the heading inside a span element.
  • Link URL: Enter a destination URL to make the heading clickable.
  • Open in new tab: Open the linked URL in a new browser tab.
  • Add nofollow: Add the nofollow attribute to the heading link.

Note: The Open in new tab and Add nofollow options are available when a Link URL is entered. You can also change the heading’s HTML tag using the dropdown in the block toolbar.

Layout Tab

The Layout tab controls the alignment of the heading text.

1. Alignment

Use this panel to set the horizontal alignment of the heading.

  • Alignment: Choose how the heading text is aligned.
    • Left: Align the heading text to the left.
    • Center: Align the heading text to the center.
    • Right: Align the heading text to the right.
    • Justify: Justify the heading text.

Style Tab

The Style tab contains the Heading and Highlight panels. Use these panels to customize the appearance of the heading and highlighted text.

1. Heading

Use this panel to customize the heading’s color, typography, and spacing.

  • Color: Set the heading text color.
  • Typography: Customize the heading typography, including font family, font size, font weight, font style, text transform, line height, and letter spacing. Responsive typography settings are available.
  • Title Margin: Set the outer spacing around the heading. Configure the spacing for desktop, tablet, and mobile devices.
  • Title Padding: Set the inner spacing around the heading. Configure the spacing for desktop, tablet, and mobile devices.

2. Highlight

Use this panel to customize the appearance of specific words or phrases within the heading.

To highlight text, select the desired word or words in the heading and click the Highlight button in the block toolbar. You can also wrap text in double curly braces, for example, {{highlighted text}}.

  • Color: Set the text color of the highlighted text.
  • Background: Set a solid background color or gradient for the highlighted text.
  • Typography: Customize the highlighted text typography, including font family, font size, font weight, font style, text transform, line height, and letter spacing. Responsive typography settings are available.
  • Highlight Margin: Set the outer spacing around the highlighted text. Configure the spacing for desktop, tablet, and mobile devices.
  • Highlight Padding: Set the inner spacing around the highlighted text. Configure the spacing for desktop, tablet, and mobile devices.
  • Highlight Border Radius: Adjust the rounding of the highlighted background corners. Configure each corner independently.

Advanced Tab

The Advanced tab provides additional spacing and background controls for the Heading Block. These settings apply to the entire block.

1. Spacing

  • Padding: Set the inner spacing around the entire Heading Block. Configure the top, right, bottom, and left values separately.
  • Margin: Set the outer spacing around the entire Heading Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

Note: These spacing controls apply to the entire block and are separate from the Title Margin, Title Padding, Highlight Margin, and Highlight Padding options in the Style tab.

2. Background

  • Background: Customize the background of the entire Heading Block using a background color or gradient.

Note: The background applies to the entire block area, not just the heading text or highlighted text.

Updated on October 15, 2026

What are your feelings

  • Happy
  • Normal
  • Sad
Table Of Contents

Download Now & Design Without Limits!

Bring your Gutenberg designs to life with ShapeBlock create stunning, animated websites effortlessly. No code. No limits. Just motion made easy.

Get Started Free
Buy Now
FAQ

Frequently
Asked Questions

Common questions answered, if you still have any
questions
feel free to ask.

What is ShapeBlock?
ShapeBlock is a block library for the WordPress block editor. It adds 33 native blocks sliders, carousels, grids, tabs, counters, filters and more each with Settings, Layout and Style tabs (plus a shared Advanced tab) and a live preview on the canvas.
No. The blocks are native to the block editor, so there is no page-builder layer and no shortcode is needed for normal use. ShapeBlock does not depend on any other plugin.
Upload the plugin via WordPress Dashboard or FTP and activate it.
WordPress 6.6 or newer and PHP 7.4 or newer.
ShapeBlock is built to stay light. A block’s styles are added only to pages that contain that block, small stylesheets are printed inline instead of as extra requests, and nothing relies on jQuery. Blocks you switch off are never registered at all.
Yes. The ShapeBlock dashboard lists every block with a switch. A disabled block is not registered, so it adds nothing to the editor or to your pages.
Yes. Most spacing, size, alignment and typography controls take a separate value for Desktop, Tablet (up to 1024px) and Mobile (up to 767px). Leave a device empty and it follows the larger screen.
Yes. Blocks render the same in both, and their styles are printed in the page head rather than whenever the theme happens to run.
Not by default. Google Fonts is optional and stays off until you enable it in ShapeBlock → Settings. Video blocks only load YouTube or Vimeo when you add a video link, and share buttons are plain links that do nothing until a visitor clicks them.
Yes. The Theme Builder lets you build headers and footers with blocks and choose where each one appears with display conditions. Reusable templates can be placed anywhere with the shortcode.
Yes. ShapeBlock → Settings can export and import your block settings, colours, layout, templates and Theme Builder templates as a file, so a second site can start from the same setup.

Our core value is regularity, responsiveness, and innovation. This is why people love us With the qualified dedicated support.

Follow our Socials

Useful Link

Supports

News Letter

Subscribe to our newsletter

© All Rights Reserved – shapeblock by ShapeKode.