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 :

studio yesweblog griselidis gaillet

Avec un paragraphe aligné à gauche

Et ci-dessous un bouton pour appeler à l’action (CTA)

➡ 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 😎

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 :

Offre de blocs wordpress natifs

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 :

Tout sur le bloc bannière natif Gutenberg WordPress

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 :

bloc banniere natif exemple site web ecole

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

bloc banniere gutenberg natif exemple site web ecole

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

Où ajouter un bloc bannière Gutenberg sur une page ?

Le bloc bannière peut être ajouté sans limite sur une page. Toutefois, c’est fréquemment le haut d’une page qui est le plus approprié pour une bannière. En effet c’est la première zone qui sera vue par les internautes et qui se doit logiquement d’être percutante, attrayante.

Peut-on étendre les fonctionnalités du bloc bannière avec des plugins tiers ?

Oui, de nombreux plugins permettent d’étendre le bloc natif bannière WP. Qu’il s’agisse de Stackable ou encore Greenshit. Certains disposent même de leur propre bloc bannière, donc non natif.

Le bloc bannière WordPress va-t-il évoluer ?

C’est à espérer ! Les blocs s’enrichissent à chaque nouvelle mise à jour majeure du CMS WordPress. La bannière est déjà un des blocs les plus riches du set Gutenberg. Mais évidemment, si ce bloc obtient de nouvelles fonctionnalités, ce serait idéal ! Beaucoup attendent par exemple que des fonctions simples comme la possibilité d’ajouter nativement des effets ou autres couleurs au survol de texte ou image.

Partager ce contenu :
Griselidis
Griselidis

Bonjour ! Je suis Griselidis. Webmaster & Webdesigner freelance, je tiens ce site web depuis mai 2014. Depuis 10 ans déjà, je partage ici des tutoriels et articles pour vous aider à créer votre site web, le faire vivre et le faire connaître.

Newsletter

Saisissez votre adresse e-mail ci-dessous et abonnez-vous à la newsletter

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *