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 GutenKit plugin installed. 
• Then, add a page or post and enter the block editor.
• Cerca il “+" nella parte superiore della schermata dell'editor.
• Click it and the block menu will reveal.

• Put the “GutenKit Heading” in the search bar.
• Una volta che lo vedi, cliccalo o trascinalo e rilascialo nella schermata dell'editor. 

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

Step 2: Enter Heading Title & Sub Title #

Under the content tab:

Titolo: 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. Mostra bordo: Enable this button to show the border.
   • Border Position: Set the border to the start or end of the heading title.

Sottotitolo: 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 #

descrizione del titolo: This feature gives you control over adding a title description.

1. Mostra descrizione: Click this button to insert the title description.
2. Descrizione dell'intestazione: Enter your heading description here.
3. Larghezza massima: Define the width for the title description.

Testo dell'ombra: Apply a beautiful text shadow with your headings.

1. Mostra testo ombreggiato: Toggle this button to enable the shadow text feature.
2. Contenuto: Add the content you want to show as shadow text.

Separatore:

1. Mostra separatore: 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 #

Dal Stile tab, come under the Generale settings:

• Allineamento: 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:

Titolo #

1. Colore: Give a color to your heading.
2. Colore al passaggio del mouse: Set the color for your heading on hover.
3. Ombra del testo: Add shadow effects to your heading text.
4. Margine: 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. Larghezza del bordo: Set the width for the heading border. 
7. Altezza del bordo: Enter the height for the heading border.
8. Posizione verticale: Adjust the vertical placement of the border.
9. Right /Left Gap: Define the gap between the title and the border.

*Notare che 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.

• Colore del bordo: 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. Colore della decorazione del testo: Specify the color of the decoration for the focused title.
2. Imbottitura: Define the padding around the focused title.
3. Use Background Color On Text: Give color to the focused title background.
4. Raggio del confine: 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:

• Colore: 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. 
• Margine: 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.

Separatore: #

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

Testo dell'ombra: #

1. Posizione: Place the shadow text by entering the top & left values in pixels.
2. Tipografia: Get all the typography-styling settings for shadow text.
3. Colore del testo: 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.

Disposizione, #

• Margine: Definisce lo spazio attorno al layout del blocco. Aiuta a impostare lo spazio tra un altro blocco.
• Imbottitura: inserisci un valore per impostare lo spazio attorno al blocco all'interno del suo layout.
• Larghezza: Oltre a mantenere la larghezza del layout predefinita.
  • Intera larghezza: Selezionando questa opzione, il layout si estenderà per l'intera larghezza dello schermo.
  • In linea (automatico): Applicandolo avrà la stessa larghezza dell'elemento blocco.
  • Costume: Scegliendo questa opzione verrà visualizzato un cursore per definire lo spazio orizzontale del layout del blocco.
• Indice Z: utilizzare il cursore per specificare l'ordine di sovrapposizione del blocco con altri blocchi.

Posizione: #

Sotto il menu a discesa, vedrai tre opzioni: Predefinito, Assoluto, E Fisso. 

• Assoluto: Selezionando questa opzione ti verrà fornita una posizione assoluta del blocco, il che significa che gli elementi si adatteranno al loro contenitore.
• Fisso: l'opzione Posizione fissa consentirà all'elemento di adattarsi all'intera finestra o schermo.

Entrambe le opzioni Assoluto e Fisso hanno impostazioni simili come le seguenti:

• Orientamento orizzontale: scegliere la direzione di posizionamento tra sinistra e destra.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento orizzontale del blocco.
• Orientamento verticale: Selezionare la direzione di posizionamento tra su o giù.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento verticale del blocco. 

Sfondo: #

• Sfondo: scegli un'opzione di sfondo tra tinta unita, sfumatura o immagine.

Sotto l'opzione Al passaggio del mouse:

• Immagine: Se scegli l'opzione immagine si apriranno le seguenti opzioni:
  • Immagine: scegli un'immagine dal catalogo multimediale o carica la tua.
  • Dimensioni immaginee: selezionare la dimensione dell'immagine tra Miniatura, Media, Grande o Intera.

• Posizione: Seleziona la posizione delle 10 diverse opzioni.
• Ripetere: selezionare un'opzione per impostare la modalità di ripetizione delle immagini di sfondo.
• Dimensioni dello schermo: consente di selezionare una dimensione di visualizzazione tra quattro diverse opzioni.

• Durata della transizione: utilizza il cursore per regolare la transizione dello sfondo dallo stato normale allo stato al passaggio del mouse.

Confine: #

• Confine: sotto questa opzione di impostazione, otterrai opzioni di impostazione del bordo come larghezza, stile e colore.
• Raggio del confine: imposta la rotondità del bordo inserendo un valore.
• Scatola Ombra: Ottieni tutte le impostazioni come colore, orizzontale/verticale, sfocatura, diffusione e altro per dare effetti di ombra al bordo. 

Sotto l'opzione al passaggio del mouse:

• Durata della transizione: puoi aggiungere un valore manualmente o utilizzare il dispositivo di scorrimento per impostare l'ora in cui modificare il design del bordo allo stato al passaggio del mouse.

Visibilità: #

Il modulo visibilità consente di controllare la visualizzazione dei disegni a blocchi in base al tipo di dispositivo. Ci saranno tre opzioni del dispositivo (desktop, tablet, cellulare) con un pulsante di attivazione/disattivazione. Attiva il pulsante di attivazione/disattivazione per nascondere il design a blocchi di quel dispositivo.

Tuttavia, puoi ancora vederlo nella vista dell'editor.

Avanzate: #

• Nome del blocco: assegna un nome per identificare questo blocco in modo univoco durante il collegamento o lo scripting per definire lo stile del blocco.
• Ancoraggio HTML: aggiungi un URL per collegare una pagina del sito web.

• Classi CSS aggiuntive: assegna classi CSS aggiuntive al blocco che ti consentiranno di modellare il blocco come desideri con CSS personalizzato. 

NB: puoi aggiungere più classi separatamente con spazi.

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.