Gutenberg Heading Block Tutorial

Gutenberg Heading Block can be highly customized with many styling options available for each element it includes. You can completely change its look with a few clicks, and for sure no coding is required.

Check Gutenberg Heading Block demo page from here.

Gutenberg Heading Block
Gutenberg Heading Block


Heading Gutenberg Block Layout Settings

  1. Style: Select heading style from 9 unique styles.
  2. Icon: Enable to add icon beside heading.
    1. Icon Type: Select icon type from icon, image or Lottie animation.
      1. Icon: Select icon from Font Fwesome library or WordPress dashicons.
      2. Image: Select or upload an image from WordPress media library.
      3. Lottie Animation: Insert Lottie Animation and customize its options like loop and reverse.
    2. Icon Position: Set icon position before, after or at top of heading.
      1. Icon Alignment: Select top icon alignment to left, center or right.
  3. Title Tag: Select heading HTML tag from H1 to H6 and you can use it as div or spin.
  4. Alignment: Align heading to left, center or right.
  5. Link: Enable to assign a link for heading block and you can enable open in new tab option.
    1. URL: Insert heading link.
    2. Open link in new tab: Enable to open the link in new tab.
  6. background Text: Enable to insert background text to heading block.
    1. Text: Insert background text.
    2. Width: Select the width of the text auto or full width.

Gutenberg Heading Style 7 Options

Gutenberg Heading style 7 has unique options for stripe.

  1. Stripe Position: Select stripe position to be top or bottom of heading.
  2. Stripe Width/Height: Set strip width and height.
  3. Stripe Top/Bottom Spacing: Add spacing on top and bottom of stripe.
  4. Stripe Alignment: Align stripe to left, center or right.

Style Settings for Heading Gutenberg Block

Here you can customize styling options for title, icon and background.

Gutenberg Heading Block Style Options
Style Gutenberg Heading Block

Title Style for Gutenberg Heading Block

  1. Typography
  2. Color.
  3. Shadow
  4. Border
  5. Margin
  6. Padding

Icon Style for Gutenberg Heading Block

  1. Size
  2. Background Type
  3. Border
  4. Margin
  5. Padding

Background Text Style for Gutenberg Heading Block

  1. Typography
  2. Horizontal Offset
  3. Vertical Offset
  4. Rotate (degrees)
  5. Color
  6. Text Shadow
  7. Stroke: Enable to assign a stroke to background text.
    1. Stroke Color.
    2. Stroke Full Width.
  8. BLEND Mode
  9. z-index

Related Docs: