advanced heading block

Getwid Blocks: Advanced Heading Gutenberg Block

The Advanced Heading block by Getwid allows you to add text content and control its overall settings, such as font style, font family, colors and others. This block is substantially richer than the core Gutenberg Heading and Paragraph blocks.

This Getwid block comes with pre-installed Google Fonts, alignment and color settings and many more options to help you tailor one of the most significant parts of any website – typography.

advanced heading featured

Advanced Heading Block Video Tutorial

Purpose of the Advanced Heading Gutenberg Block

The Advanced Heading Gutenberg block by Getwid helps you bring focus on any specific heading, highlight content pieces and create more custom typography diversity when it’s necessary.

Simply put, you can use it to make a text line huge, change its color, apply a different font family to create contrast, highlight a specific part of a text, you name it.

Advanced Heading Block – Getwid

At the same time, this block will help you maintain uniform typography and keep a meaningful design consistency site-wide.

Advanced Heading Block Features

Everything about the block is fully adjustable. Let’s focus on the major settings in the Gutenberg configuration panel for this block. There are many options to pick from:

  • You can change headings to set the needed default heading size
  • Select a preferable font from the Google Fonts library
  • Go with a needed font weight (thickness of a font’s stroke). Fonts will offer different common weights for a typeface.

gutenberg font family

  • Customize a font size device-wise

font device customization

  • Set up a font style
  • Set a one-click text transformation (lowercase, uppercase, etc.)
  • Manually designate line height and letter spacing

font style gutenberg getwid

  • Apply text and background colors

advanced heading block colors

  • Optionally set up paddings and margins

padding and margins

  • Add custom CSS.

As for the inline block editing, you can change the default alignment, layout; also link a heading and apply more standard settings.

inline edits advanced heading

If you are not satisfied with default text settings of specific blocks (in Getwid, all font settings are by default inherited from your active WordPress theme), you may also use Advanced Heading instead of default Gutenberg Paragraph / Heading blocks and some Getwid blocks.

For this, just click on the “Transform” icon:

transform advanced heading

Some Getwid Blocks support this transformation: for example, Getwid Image Box and Icon Box blocks.

transform image box

Design Best Practices

For the sake of design consistency, keep in mind the following advice:

  • Try to keep headings with the same purpose / semantics similar across your website.
  • Stick to theme brand colors to maintain meaningful design (usually, up 3 or 4 different colors are enough).
  • Try not to change spaces (margins, paddings, alignment) at random and rather stick to your own (or theme’s) specific set of spacing rules (settings).
  • Don’t use more than two font families; this will help you maintain better readability through uniform typography.
  • If you want to increase contrast between each letter shape, set bigger letter spacing.
  • A line height should be proportional to its type size.

Download a Free Starter Theme for Getwid

In this article, we used Bimba WordPress theme, which is a WooCommerce store Gutenberg-optimized theme with a fresh and bold design.

Also, we have a free official Gutenberg theme designed with Getwid from the ground up: Getwid Base theme. Since it’s a truly multipurpose solution, you may utilize it for a business or creative project without experiencing significant limitations.

Check out Getwid Blocks Demo

Download Getwid Gutenberg Blocks Free

Install Getwid Base Free Starter Theme for Gutenberg

Getwid Video Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *