Comment réaliser une bannière vidéo WordPress pour un bel impact visuel ?
Dans cette vidéo de formation WordPress Divi, je vous apprends à créer une bannière pleine largeur avec une vidéo en fond de section.
Cet effet web design sympa de bannière web animée offrira à votre site Internet WordPress un impact visuel intéressant et efficace. Pour réaliser cette bannière WordPress nous utiliserons le Visual Builder Divi d’Elegant Themes.
Etapes pour la création de votre bannière vidéo WordPress
1) Choisir votre vidéo
Qui dit vidéo dit souvent fichier assez lourd à télécharger donc ici le défi dans ce tutoriel va consister à optimiser au maximum la vidéo afin de ne pas pénaliser le chargement de votre page.
Pour cela, nous allons jouer sur 3 leviers : le 1er est la durée, nous allons choisir une vidéo qui ne dure plus 4, 5 secondes (plus c’est court et moins c’est lourd) le 2ème est le format et le 3ème l’optimisation.
Quand nous allons insérer notre vidéo en fond de section Divi, vous verrez que la vidéo va « looper » c’est-à-dire qu’elle va tourner en boucle. Il va donc falloir trouver une vidéo où le début ressemble à la fin pour qu’il n’y ait pas une cassure et que la boucle se passe en douceur.
Pour le choix de votre vidéo, ce peut être bien sûr une vidéo personnelle que vous avez réalisée, sinon vous pouvez vous tourner vers des plateformes comme Invideo qui permettent de faire des vidéo marketing Sympa mais aussi tout simplement de télécharger des extraits de vidéo. J’avais d’ailleurs fait un tuto y a quelque temps sur cette plateforme, vous trouverez l’article de blog en suivant ce lien. Vous y trouverez une multitude de fichiers vidéo. Vous pouvez créer un compte gratuit et avoir accès à quelques vidéos sympa ou sinon souscrire à abonnement comme je l’ai fait et avoir accès à un choix supe vaste. J’ai d’ailleurs télécharger la vidéo de que nous utiliserons dans ce tutoriel sur Invideo.
Vous trouverez ci-dessous un lien vers Invideo, si vous voulez vous abonner, il y a une offre actuellement assez intéressante à -25%, sinon vous pouvez créer un compte gratuit et voir ce qui est disponible.
2) Optimiser votre vidéo
Une fois que vous aurez trouvé votre vidéo, donc je rappelle pas plus de 5 secondes, il va falloir l’optimiser. Si vous avez des compétences en vidéo vous avez sans doute vos propres outils et vous devriez pouvoir vous en tirer. Si ce n’est pas le cas, je vous conseille un logiciel gratuit intitulé Format Factory que vous pourrez trouver à l’adresse ici.
Ce logiciel va nous permettre d’optimiser le poids de notre vidéo et de faire des conversions en de multitudes formats.
A noter que ce logiciel fonctionne uniquement sous windows avec un PC – Il doit exister des logiciels équivalents sous Mac mais je ne saurais pas vous conseiller.
Une autre petite remarque, c’est que si vous installez Format factory, comme c’est un logiciel gratuit, on va vous demander si vous souhaitez par la même occasion installer une version d’évaluation de l’antivirus Mc Afee et du logiciel de compression WinZip, attention où vous cliquez mais à chaque fois, vous pourrez décliner ces offres.
Alors nous sommes maintenant ici dans le logiciel format Factory, voyez, la video que j’ai téléchargé à partir d’Invideo dure 4 seconde qu’elle est en HD et qu’elle a un poids de 8,3 mb ce qui est beaucoup trop lourd, je vais donc vous montrer comment l’optimiser et diviser son poids par à peu près par 38 x pour atteindre un poids aux alentours des 200k ce qui représente le poids acceptable d’une belle image.
Avant de faire cette opération, juste pour vous signaler qu’il faudra pour la vidéo un format MP4 avec le Codec AVC H264 (le codec qui est une méthode d’encodage de la vidéo) c’est le codec qui est le plus populaire et qui garantira que votre vidéo puisse être lue par quasiment tout le monde. C’est ce format et ce Codec que nous utiliserons ici.
A noter que vous pouvez aussi utiliser le format WebM qui est une alternative au MP4
Regardons les options d’encodage, je clique sur l’engrenage des paramètres
Je vais choisir Qualité et une taille normale, Certes la résolution va être moindre, mais vous verrez que Divi va étitrer la vidéo dans section bannière et que la qualité sera tout à fait acceptable. Mon fichier est bien du MP4.
Je vois que l’encodage Video donc le Codec est bien le AVC H264 et ce que je vais modifier pour gagner encore en poids c’est bitrate (le débit video), je clique sur défaut et je vais le régler à 384.
Tout est bon et je peux maintenant réencoder ma vidéo.
3) Création de votre bannière vidéo
a) Rendez-vous maintenant sur la page où vous souhaitez créer votre bannière. Créez une nouvelle section et choisissez « Section plein écran » puis choisissez le module « Entête plein écran ».
b) Puis dans l’onglet « Contenu », entrez votre contenu (Titre, texte, texte bouton).
c) Toujours dans « Contenu », allez sur « Fond » et dans le 4ème onglet, choisissez l’icône vidéo et appelez depuis la médiathèque la vidéo précédemment optimisée.
d) La vidéo apparaît alors en fond de section mais vous remarquerez qu’elle est rognée car la section a une hauteur insuffisante.
Nous allons remédier à cela, en allant dans l’ongle « Style », dans « Modèle » vous pouvez centrer vos éléments mais choisir aussi « Passer en mode « plein écran ». Puis apportez du Style à vos éléments selon vos goûts.
e) Toujours dans l’onglet « Style », choisissez « Position », nous allons ici apporter un filtre sur l’image afin que nos caractères texte ressortent mieux. Choisissez une couleur et apportez de la transparence. Votre vidéo apparaîtra peu à peu.
f) Vous pouvez si vous le souhaiter appliquer un séparateur sur le bas de la section. Pour cela rendez-vous dans les paramètres de la section puis « Style » > « Séparateur »
4) Rendre le bandeau menu (header) transparent
Pour terminer, il est possible d’apporter un peu de transparence à votre menu. Pour cela, rendez-vous dans « Divi > Personnaliseur de Thème ». Puis choisissez « Entête de navigation » puis « Barre de menu primaire » et ici dans « Couleur d’arrière plan » allez pouvoir jouer sur la transparence à l’aide de la petite tirette.
