Want to make an attractive heading with the Gutenberg block editor? The default heading block won’t let you much to do. However, you can use the GutenKit heading block available with extensive features. 

You can add a subtitle, title description, shadow text, separator, and a focused title. Further, this block lets you have complete control over the customization.

Therefore, you will end up creating a stylish heading for your page or post. Let’s see how to use the GutenKit Heading block inside the block editor.

How to Use GutenKit Heading Block? #

Follow the steps below to learn about the use of the GutenKit Heading block.

Step 1: Add GutenKit Heading Block #

• You’re required to have the Kit Guten plugin installed. 
• Then, add a page or post and enter the block editor.
• Procure o "+” ícone na parte superior da tela do editor.
• Click it and the block menu will reveal.

• Put the “GutenKit Heading” na barra de pesquisa.
• Depois de vê-lo, clique ou arraste e solte-o na tela do editor. 

Once the GutenKit Heading block is on your screen, click on it. The block settings will open in the right sidebar, combined into Contente, Estilo, & Avançado tabs. The Contente tab will help to add title, subtitle, description, separator, etc.

Step 2: Enter Heading Title & Sub Title #

Under the content tab:

Título: You can type the title directly on the editor screen.

1. HTML TAG: Define the heading’s HTML tag to H1- H6, Div, Span, or P.
2. URL: Toggle this button to add a link to the heading.
3. Mostrar borda: Enable this button to show the border.
   • Border Position: Set the border to the start or end of the heading title.

Legenda: From here, you will add your Sub Title.

1. Show Subtitle: Click the toggle button to enter the subtitle.
2. Border Subtitle: Toggle this button to add a border with a subtitle.
3. Heading Subtitle: Write your subtitle in this box.
4. Subtitle Position: Show the subtitle before or after the heading title.
5. Subtitle HTML Tag: Determine the subtitle heading’s tag to (H1- H6, Div, Span, or P)

Step 3: Add Title Description, Shadow Text & Separator #

Descrição do título: This feature gives you control over adding a title description.

1. Mostre a descrição: Click this button to insert the title description.
2. Descrição do título: Enter your heading description here.
3. Largura Máxima: Define the width for the title description.

Texto de sombra: Apply a beautiful text shadow with your headings.

1. Mostrar texto sombreado: Toggle this button to enable the shadow text feature.
2. Contente: Add the content you want to show as shadow text.

Separador:

1. Mostrar separador: Activate this button to add a separator.
2. Separator Type: Choose from four different separator types.
3. Separator position: Choose where to place the separator. 

Step 4: Align Heading Title #

De Estilo tab, come under the Em geral settings:

• Alinhamento: Align your heading style to Left, Center, or Right.

Step 5: Style Heading Title #

The following features will help you to style your heading title:

Título #

1. Cor: Give a color to your heading.
2. Cor do foco: Set the color for your heading on hover.
3. Sombra do texto: Add shadow effects to your heading text.
4. Margem: Adjust the margin for your heading design. 
5. Tipografia: From here you will control all the typography settings like Font Family, Size, Weight, Transform, Style, Decoration, Line Height, Line Spacing, Word Spacing, etc.
6. Largura da borda: Set the width for the heading border. 
7. Altura da borda: Enter the height for the heading border.
8. Posição vertical: Adjust the vertical placement of the border.
9. Right /Left Gap: Define the gap between the title and the border.

*Observe que if you show the border at the start, you will need to set the right gap. And, while showing the border at the end you need to define the Left gap.

• Cor da borda: Select the color for the border.

Step 6: Create Focus Title #

The focus title feature makes an important part of your heading title more interesting and eye-catching. Simply bold (Ctrl+B) the part of your title you want more focus on. 

Under the style tab, you will get the Focused Title feature. See its setting below.

Focused Title: You will see some similar features (Color, Hover Color, Typography, Text Shadow) to the Title setting. Other features are:

1. Cor da decoração do texto: Specify the color of the decoration for the focused title.
2. Preenchimento: Define the padding around the focused title.
3. Use Background Color On Text: Give color to the focused title background.
4. Raio da Fronteira: Set the roundness of your focused title border.

Here’s our focused title:

Step 7: Customize Sub Title & Title Description, #

Now, the following features are applicable to Sub Title and Title Description. Let’s see how to use them:

• Cor: From here you will choose the color.
• Tipografia: Control all the typography-related customizations like text font family, transform, style, decoration color, letter spacing, Word Spacing, and line height. 
• Margem: Expand space around the text.
• Use Text Fill: Give color or image background to your subtitle. (This feature only applies to Sub Title only.)

Step 8: Customize Separator & Shadow Text #

Now, we’ll learn about the Separator and text customization.

Separador: #

1. Largura: Enter the Separator width value in this box in pixels.
2. Altura: Define the Separator height. Enter a value in pixels.
3. Margem: Set space with other elements in your design.
4. Separator Color: Choose a color from the color palette for the separator.

Texto de sombra: #

1. Posição: Place the shadow text by entering the top & left values in pixels.
2. Tipografia: Get all the typography-styling settings for shadow text.
3. Cor do texto: Add color for the shadow text.
4. Stroke Width: Specify the line width that wraps around the shadow text. 
5. Stroke Color: Pick a color for the stroke. 

Step 9: Advanced Settings #

From the Advanced Settings tab, you can configure the GutenKit Heading block layout, background, border styles, and control its visibility.

Disposição, #

• Margem: Defina o espaço ao redor do layout do bloco. Ajuda a definir a lacuna entre outro bloco.
• Preenchimento: insira um valor para definir o espaço ao redor do bloco dentro de seu layout.
• Largura: Além de manter a largura padrão do layout.
  • Largura completa: selecionar esta opção fará com que o layout ocupe toda a largura da tela.
  • Em linha (automático): Aplicá-lo terá a mesma largura do elemento do bloco.
  • Personalizado: Escolher esta opção revelará um controle deslizante para definir o espaço horizontal do layout do bloco.
• Índice Z: Use o controle deslizante para especificar a ordem da pilha do bloco com outros blocos.

Posição: #

No menu suspenso, você verá três opções: Padrão, Absoluto, e Fixo. 

• Absoluto: Selecionar esta opção lhe dará uma posição absoluta do bloco, o que significa que os elementos caberão em seu contêiner.
• Fixo: a opção Posição fixa permitirá que o elemento caiba em toda a viewport ou tela.

Ambas as opções Absoluta e Fixa têm configurações semelhantes às abaixo:

• Orientação horizontal: Escolha a direção de posicionamento entre esquerda e direita.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento horizontal do bloco.
• Orientação Vertical: Selecione a direção de posicionamento entre para cima ou para baixo.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento vertical do bloco. 

Fundo: #

• Plano de fundo: escolha uma opção de plano de fundo entre cor sólida, gradiente ou imagem.

Na opção Hover:

• Imagem: Se você escolher a opção de imagem, serão abertas as seguintes opções:
  • Imagem: escolha uma imagem da biblioteca de mídia ou carregue a sua própria.
  • Tamanho da imageme: Selecione o tamanho da imagem entre Miniatura, Médio, Grande ou Completo.

• Posição: Selecione a posição das 10 opções diferentes.
• Repita: selecione uma opção para definir como as imagens de fundo serão repetidas.
• Tamanho de exibição: selecione um tamanho de exibição entre quatro opções diferentes.

• Duração da transição: use o controle deslizante para ajustar a transição do plano de fundo do estado Normal para o estado flutuante.

Fronteira: #

• Fronteira: Nesta opção de configuração, você obterá opções de configuração de borda como largura, estilo e cor.
• Raio da Fronteira: defina o arredondamento da borda inserindo um valor.
• Sombra da caixa: Obtenha todas as configurações como cor, horizontal/vertical, desfoque, propagação e muito mais para dar efeitos de sombra à borda. 

Na opção Hover:

• Duração da transição: você pode adicionar um valor manualmente ou usar o controle deslizante para definir o tempo para alterar o design da borda no estado de foco.

Visibilidade: #

O módulo de visibilidade permite controlar a exibição de designs de blocos dependendo do tipo de dispositivo. Haverá três opções de dispositivos (Desktop, Tablet, Mobile) com um botão de alternância. Ative o botão de alternância para ocultar o design do bloco desse dispositivo.

No entanto, você ainda pode vê-lo na visualização do editor.

Avançado: #

• Nome do bloco: forneça um nome para identificar este bloco exclusivamente ao vincular ou criar scripts para definir o estilo do bloco.
• Âncora HTML: adicione um URL para vincular uma página do site.

• Classes CSS adicionais: atribua classes CSS adicionais ao bloco, o que permitirá estilizar o bloco como desejar com CSS personalizado. 

Observação: você pode adicionar várias classes separadamente com espaços.

Hopefully, this document helped you to use the GutenKit Heading block. Now, it’s your turn to try this block and create stunning headings for your pages.