fbpx
Tuto Divi : Créer une bannière vidéo pour votre site WordPress

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.

Licence Divi
.

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.

Offre Invideo
Invideo
MailerLite free-trial

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.

 

Logiciel Format Factory

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 ».

Insertion module entete

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.

Passer en mode plein écran

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.

Superposition

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. 

Séparateur

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.

Header transparent
Thinkific one month free

Vous serez peut-être intéressé aussi par…

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence !
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 »
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 O2switch : l’hébergeur de qualité (5€/mois en illimité avec nom de domaine)
👉 Inleed : l’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois bien moins cher 👍.

0 Comments

Submit a Comment

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