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.
• Cherchez le "+” en haut de l’écran de l’éditeur.
• Click it and the block menu will reveal.

• Mettez le «GutenKit Heading" dans la barre de recherche.
• Une fois que vous le voyez, cliquez ou faites-le glisser et déposez-le sur l'écran de l'éditeur. 

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

Step 2: Enter Heading Title & Sub Title #

Under the content tab:

Titre: 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. Afficher la bordure: Enable this button to show the border.
   • Border Position: Set the border to the start or end of the heading title.

Sous-titre: 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 #

description du titre: This feature gives you control over adding a title description.

1. Montrer la description: Click this button to insert the title description.
2. Titre Description: Enter your heading description here.
3. Largeur maximale: Define the width for the title description.

Texte de l'ombre : Apply a beautiful text shadow with your headings.

1. Afficher le texte ombré: Toggle this button to enable the shadow text feature.
2. Contenu: Add the content you want to show as shadow text.

Séparateur:

1. Afficher le séparateur: 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 #

Du Style tab, come under the Général settings:

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

Titre #

1. Couleur: Give a color to your heading.
2. Couleur du survol : Set the color for your heading on hover.
3. Ombre de texte: Add shadow effects to your heading text.
4. Marge: Adjust the margin for your heading design. 
5. Typographie: 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. Largeur de la bordure: Set the width for the heading border. 
7. Hauteur de la bordure: Enter the height for the heading border.
8. Position verticale: Adjust the vertical placement of the border.
9. Right /Left Gap: Define the gap between the title and the border.

*Noter 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.

• Couleur de la bordure: 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. Couleur de décoration du texte: Specify the color of the decoration for the focused title.
2. Rembourrage: Define the padding around the focused title.
3. Use Background Color On Text: Give color to the focused title background.
4. Rayon de frontière: 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:

• Couleur: From here you will choose the color.
• Typographie: Control all the typography-related customizations like text font family, transform, style, decoration color, letter spacing, Word Spacing, and line height. 
• Marge: 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.

Séparateur: #

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

Texte de l'ombre : #

1. Position: Place the shadow text by entering the top & left values in pixels.
2. Typographie: Get all the typography-styling settings for shadow text.
3. Couleur du texte: 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.

Mise en page, #

• Marge: Définissez l'espace autour de la disposition des blocs. Cela aide à définir l’écart entre un autre bloc.
• Rembourrage: saisissez une valeur pour définir l'espace autour du bloc dans sa disposition.
• Largeur: En plus de conserver la largeur de mise en page par défaut.
  • Pleine largeur: En sélectionnant cette option, la mise en page s'étendra sur toute la largeur de l'écran.
  • En ligne (auto): Son application aura la même largeur que l'élément de bloc.
  • Coutume: Choisir cette option fera apparaître un curseur pour définir l'espace horizontal de la disposition des blocs.
• Indice Z: utilisez le curseur pour spécifier l'ordre de pile du bloc avec d'autres blocs.

Position: #

Sous la liste déroulante, vous verrez trois options : Défaut, Absolu, et Fixé. 

• Absolu: La sélection de cette option vous donnera une position absolue du bloc, ce qui signifie que les éléments rentreront dans leur conteneur.
• Fixé: L'option Position fixe permettra à l'élément de s'adapter à la totalité de la fenêtre ou de l'écran.

Les options Absolue et Fixe ont des paramètres similaires comme ci-dessous :

• Orientation horizontale: Choisissez la direction de positionnement entre gauche et droite.
• Compenser: Utilisez le curseur ou mettez une valeur manuellement pour ajuster le positionnement horizontal du bloc.
• Orientation verticale: Sélectionnez la direction de positionnement entre le haut et le bas.
• Compenser: Utilisez le curseur ou mettez une valeur manuellement pour ajuster le positionnement vertical du bloc. 

Arrière-plan: #

• Arrière-plan : choisissez une option d'arrière-plan entre une couleur unie, un dégradé ou une image.

Sous l'option Survol :

• Image: Si vous choisissez l'option image, les options suivantes s'ouvriront :
  • Image: Choisissez une image dans la médiathèque ou téléchargez la vôtre.
  • Taille de l'imagee : Sélectionnez la taille de l'image entre Vignette, Moyenne, Grande ou Complète.

• Position: Sélectionnez la position des 10 options différentes.
• Répéter: sélectionnez une option pour définir la manière dont les images d'arrière-plan sont répétées.
• Taille d'affichage: Sélectionnez une taille d’affichage parmi quatre options différentes.

• Durée de la transition: Utilisez le curseur pour ajuster la transition de l'arrière-plan de l'état Normal à l'état de survol.

Frontière: #

• Frontière: Sous cette option de configuration, vous obtiendrez des options de configuration des bordures telles que la largeur, le style et la couleur.
• Rayon de frontière: Définissez la rondeur de la bordure en saisissant une valeur.
• Boîte ombre: obtenez tous les paramètres tels que la couleur, l'horizontal/vertical, le flou, la répartition, etc. pour donner des effets d'ombre à la bordure. 

Sous l'option de survol :

• Durée de la transition: Vous pouvez ajouter une valeur manuellement ou utiliser le curseur pour définir l'heure de modification du motif de la bordure en survol.

Visibilité: #

Le module de visibilité vous permet de contrôler l'affichage des conceptions de blocs en fonction du type d'appareil. Il y aura trois options d'appareil (ordinateur de bureau, tablette, mobile) avec un bouton bascule. Activez le bouton bascule pour masquer la conception de bloc de cet appareil.

Cependant, vous pouvez toujours le voir dans la vue de l'éditeur.

Avancé: #

• Nom du bloc: donnez un nom pour identifier ce bloc de manière unique lors de la création de liens ou de scripts pour styliser le bloc.
• Ancre HTML: Ajoutez une URL pour lier une page de site Web.

• Classes CSS supplémentaires: Attribuez des classes CSS supplémentaires au bloc qui vous permettront de styliser le bloc comme vous le souhaitez avec du CSS personnalisé. 

N.-B.: Vous pouvez ajouter plusieurs classes séparément avec des espaces.

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.