Bienvenue dans le bloc « bannière »

Plus communément appelé « cover » par nos amis anglais. Le bloc bannière est souvent utilisé dans les mises en pages des sites que vous visitez sur les internets ! [ /bannière ] [ /cover ]

Pourquoi l’utiliser ?

Dans une page le bloc bannière peut être utilisé de bien des façon. Voici une liste qui retrace les cas généraux d’utilisation de ce dernier.

Le bloc bannière permet donc de :

  • Rythmer vos contenus
  • Offrir une pause visuel à vos visiteurs pendant la lecture de vos articles
  • Attirer l’attention
  • Mettre en avant un contenu

Parlons des différentes options & styles que nous proposent l’éditeur Gutenberg !

Après voir décidé de placer une bloc bannière dans notre page, on est confronté à toutes sortes d’options. Ces options vont modifier la place que va prendre le bloc dans votre page. On va vous expliquer en image ce qui se passe lorsque l’on ouvre ce bloc dans l’éditeur !

Ça commence !

Quand on à créer le bloc, on peut déjà faire deux choix.

  • Charger une photo
  • Attribuer une couleur de fond

Option 1

Je choisis de placer un fond de couleur et j’ai maintenant accès à plusieurs options. On vous montre un peu plus bas les possibilités qui s’offrent à vous.

Ici je peux choisir de téléverser une image
Ici j’ai accès aux options d’alignement et d’emplacement
Ici je peux intéragir avec les éléments dans mon bloc

Plus sérieusement

Dans mon bloc bannière, peut importe si j’ai choisis une image ou un fond de couleur j’ai la possibilité d’insérer du contenu. Généralement on place un titre, un paragraphe ou une liste puis un bouton si on souhaite envoyer notre utilisateur sur une autre page.

Ici je peux régler la hauteur de mon bloc
Pour s’amuser, il est possible de créer des dégradés (à vos risques et périles !)
Pour y accéder, cliquez sur dégradé dans la colonne de droite
Par defaut, le comportement de votre bloc sera centrer dans la page

Pour finir voici quelques possibilités d’alignement et de positionnement du bloc bannière

Une bannière aligné à gauche en grande largeur

Une bannière aligné à droite

Une bannière en pleine largeur