Tout sur le bloc bannière natif Gutenberg WordPress

Le Bloc Bannière de WordPress. C’est le bloc natif Gutenberg WordPress le moins connu et qui pourtant propose des fonctionnalités qui font aujourd’hui une des forces de Gutenberg. C’est le bloc par excellence qui permet de faire de vraies belles mises en page sans connaître une once de code html ou CSS. Le bloc natif qui permet d’afficher du texte sur une image native en bloc.

Bref, la bannière Gutenberg WordPress, c’est le bloc incontournable qui peut finir de convaincre qu’il y a toute de même de très bonnes raisons d’essayer les blocs natifs Gutenberg WordPress. Même quand parfois on doute de leur intérêt tant ils peuvent être minimalistes.

Aussi découvrons le bloc bannière WordPress natif Gutenberg et l’étendue de ses possibilités :

La bannière ou pourquoi elle compte autant

La bannière, c’est fréquemment la première zone qui est vue sur le haut d’une page web, appelée header pour les habitué(e)s. Sur une page de vente ou autre Landing Page, c’est la zone de la page qui doit retenir le regard. Qui devrait idéalement inviter l’internaute à s’attarder sur le contenu et continuer sa navigation. Jusqu’à idéalement vivre le parcours utilisateur complet. Et dans un monde parfait, aller jusqu’à ce qu’on attend de lui, à savoir passer à l’action. Que ce soit en s’inscrivant à une Newsletter ou encore en ajoutant un produit à son panier et en passant à l’étape finale du paiement de son achat 🙂

La bannière vous l’aurez compris, c’est la partie phare d’une page. Celle qui est souvent au dessus de la ligne de flottaison. Celle qui devrait permettre à l’internaute de comprendre en deux secondes maximum le but de la page web. Ce qu’il peut y trouver, pourquoi et comment.

Le bloc bannière WordPress ou le bloc à tout faire

Le bloc bannière est le bloc aujourd’hui est est celui qui permet d’aller le plus loin au niveau visuel. Sans rien connaître au code html ou au code CSS. Sans devoir passer par un plugin WordPress supplémentaire. Ou encore sans faire de montage visuel image via un outil comme Canva pour ensuite importer cette image sur WordPress. En effet, vous pouvez tout à fait ajouter un bloc natif image et ajouter du texte dessus, ce qui en fera dans le même temps un bloc natif bannière Gutenberg !

C’est le bloc parfait pour créer une belle bannière en haut de page. Pour inviter à l’action avec l’ajout de boutons. Pour interpeller l’internaute avec un beau titre contrasté avec l’image de fond 💡

Voici un exemple simple avec une bannière en grande largeur :

➡ Ce bloc bannière en milieu d’article est évidemment peu cohérent avec le contenu de cette page. Elle casse le rythme de lecture d’un article assez linéaire et statique. Mais c’est évidemment le but d’une bannière, à savoir sortir du lot visuellement. Et attirer l’attention 😎

Apprendre à utiliser les blocs natifs WP a des avantages, dont celui d’utiliser des blocs assez géniaux comme celui-ci !

Comment ajouter un bloc bannière Gutenberg ?

Le bloc bannière Gutenberg WordPress s’ajoute comme n’importe quel autre bloc :

• en tapant / dans l’éditeur de bloc
• ou en se rendant sur l’icône « + » en haut à gauche de l’écran

Voici le fameux « + » en haut à gauche :

Ensuite, parmi les blocs natifs WordPress proposés, cherchez « bannière » si votre site web WP est en français (ou votre compte). Ou « Banner » s’il est en anglais, via le champ de recherche comme suit en capture d’écran :

Le bloc Bannière se trouve dans le groupe « Média » comme suit :

Réglages du bloc bannière Gutenberg

Appelée « Banner » en anglais, la bannière dispose de nombreux réglages natifs comme :

• La mise en page :
• Les réglages :
• Avancé : pour insérer des classes CSS ou encore définir le texte d’une ancre

Elle dispose aussi d’un onglet « Styles » :

Enfin et surtout, n’oublions la barre d’outils horizontale du bloc bannière via laquelle on peut :

• Gérer son alignement (pleine largeur, grande largeur…)
• Appliquer ou non un filtre DuoTone
• Modifier la position du contenu (centre, droite gauche haut bas, haut droite…)
• Permuter sur toute la hauteur ou non

Et c’est avec tous ces éléments natifs de la bannière bloc dans WordPress que vous pouvez donc apprendre à construire de belles zones webdesignées et les utiliser pour vos pages et plus particulièrement, de belles landing pages ⭐

Ci-dessous une vidéo disponible sur la chaîne de Yes We Blog pour voir combien ce bloc Bannière est chouette au niveau réglages :

Exemple de bloc bannière Gutenberg

Prenons un site internet en WordPress avec les blocs natifs Gutenberg utilisés et sous le header (en-tête) le fameux bloc bannière avec le titre en h1, un texte introductif et un bouton pour du CTA :

Voici ce même site avec son même bloc gutenberg bannière sur petits écrans :

Le bloc bannière s’adapte donc à toutes les tailles d’écran et a bien un responsive design. Bien entendu, il convient de bien tester ses créations avec la prévisualisation native Gutenberg (on peut voir sur des écrans ordinateurs, tablettes et mobiles).

Les compositions WordPress natives bannières

Vous débutez avec les blocs Gutenberg et préférez partir d’un bloc déjà créé pour travailler dessus ? Alors utilisez les compositions natives proposées avec votre installation WP et les blocs 🙂

Pour les trouver, faîtes comme si vous alliez ajouter un bloc via l’icône + en haut à gauche de votre écran, puis cliquez sur l’onglet « Compositions » puis sur le lien/onglet « Bannières » comme dans le screenshot ci-dessous :

Questions fréquentes sur le bloc natif Gutenberg Bannière