Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Ajouter un bandeau sur WordPress « Hero Image »

Située juste sous le header (en-tête) et sur la page d’accueil, une bannière « Hero image » (Hero banner) d’un site WordPress comprend une image imposante de qualité et de bonne résolution et qui va nécessiter une optimisation efficace afin de ne pas pénaliser le temps de chargement de la page du site.
Quelle taille également choisir pour une bannière WordPress ? Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

Où trouver une image gratuite pour une bannière WordPress ?

Trouver une image de qualité de bonne résolution et gratuite pour une utilisation commerciale n’est pas toujours facile.
Heureusement, il existe quelques sites qui offre cette possibilité comme Pixabay par exemple. Plusieurs résolutions sont disponibles. Pour une bannière WordPress une largeur de 1920 pixels est recommandée. Vous pouvez télécharger une image plus grande que vous pourrez ensuite facilement redimensionner. Attention, essayez de choisir une image où il n’y a pas énormément de couleurs et de nuances car l’optimisation en sera plus difficile. Faites-votre choix et téléchargez votre image. Ce n’est pas obligatoire mais vous pouvez créditer l’auteur de la photo.

Optimiser l’image de bannière avec Photopea

Photopea est un éditeur d’images en ligne type Photoshop, extrémenent puissant et qui supporte de nombreux formats d’image.

Rendez-vous sur le site de Photopea. Appelez et ouvrez l’image téléchargée sur Pixabay.

Vous pouvez redimensionner l’image dans le menu du haut : Image/Taille de l’image…
1920 pixel est une bonne largeur.

Vous pouvez ensuite la recadrer avec l’outil recadrage (icône dans la marge de gauche). 1920 x 900/1000 pixels est une bonne taille.

Ensuite, exportez l’image au format WebP qui permet une bonne compression en conservant une bonne qualité. Pour cela, allez dans Fichier / Exporter en tant que et choisissez le format WebP. Une fenêtre de paramétrages s’ouvre. Vous pouvez choisir un taux de compression allant jusqu’à 60%. Ainsi, vous devriez obtenir une image finale d’un poids aux alentours des 50 Ko (voire un peu moins). Ce qui est très bien pour une image de cette taille.

Créer un bannière WordPress avec le Divi Visual Builder

Insérer le module Divi « En-tête plein écran »

Rendez vous sur votre site WodPress. Créez une nouvelle page et choisissez de l’éditer avec Divi. 
Créer une nouvelle section, choisissez « Section plein écran » puis insérez dans cette section le module « En-tête plein écran ».

Entrer le contenu de la bannière WordPress dans l’onglet « Contenu »

La fenêtre du module « En-tête plein écran » s’ouvre. Dans l’onglet « Contenu », renseignez le titre,  le sous-titre,  le texte du bouton 1 et 2, le texte. Si vous ne souhaitez pas qu’un ou plusieurs de ces paramètres n’apparaissent pas, il suffit de ne rien mettre (et d’effacer le texte présent par défaut).
N’oubliez pas de renseigner l’adresse du lien du bouton (si vous en placez 1 ou 2) dans « Lien ».

Ensuite toujours dans « Contenu », vous pouvez appeler votre image optimisée de bannière que vous pouvons placer en fond de module. Juste en dessous, allez dans « Fond ». Puis dans « Fond », choisissez le 3ème onglet « Image de fond ». Téléversez et appelez votre image

Appliquer un filtre à l’image de la bannière

Pour appliquer un texte en blanc ce qui est notre cas ici, il arrive souvent que l’image soit trop claire et que le contraste soit insuffisant pour une bonne lisibilité. Il est donc possible d’ajouter « une couche de couleur » par dessus l’image.
Toujours dans « Fond » et « l’onglet Image » juste en-dessous dans « Fondu de l’image de fond », choisissez « Multiplié ». Une couleur apparaît alors sur l’image.

C’est la couleur définie par défaut dans « Fond » 1er onglet « Couleur d’arrière plan ». Choisissez à cet endroit votre couleur de recouvrement.

Puis cliquez sur « la pipette » et activez la 2ème tirette, celle du canal Alpha pour jouer sur le degré de transparence de cette couleur de recouvrement afin d’obtenir un niveau suffisant de contraste avec votre texte.

Design de la bannière dans l’onglet « Style »

Dans l’onglet « Style » vous pouvez designer la bannière selon vos goûts.
Pour augmenter la hauteur de votre bannière et qu’elle occupe une bone part de l’écran voire son intégralité, rendez-vous dans « Espacement » et ajoutez de la marge interne  » Sommet  et en bas ». à vous de voir pour les valeurs entrée. Vous pouvez essayer par exemple 220 pixels.

Toujours dans l’onglet Style vous pouvez ajouter une icône de défilement pour renvoyer facilement au contenu sous la bannière.

Ajuster le positionnement de l’image de fond pour les vues des périphériques mobiles

Il se peut qu’en vue mobile vous souhaitiez conserver un détail de l’image de fond qui par défaut est coupé dans ces vues.
Il existe une fonction bien pratique qui existe pour remédier à cela.

Visualisez tout d’abord les 2 vues (tablette et téléphone) ajustez la taille  du contenu pour que le responsive du site soit parfaite.

Retournez ensuite dans « Fond ». Assurez-vous de cliquer sur la petite icône mobile (à côté de « Fond »), et de choisir tablette ou téléphone. Ensuite en dessous dans « Position de l’image d’arrière-plan » choisissez une des positions en haut ou en bas. Vous voyez alors qu’une option « Backround image horizontal offset » apparaît qui vous permet de faire ainsi glisser votre image de fond jusqu’au cadrage souhaité.