Vous recherchez le moyen le plus simple d'intégrer des vidéos YouTube à votre site web Divi sans altérer son design ?
Je me souviens de la première fois où j'ai essayé d'ajouter manuellement des vidéos YouTube à mon site Divi.
J'ai passé des heures à me battre avec les codes iFrame, pour finalement voir mon magnifique design de page s'effondrer sur les appareils mobiles.
Les vidéos se chargeaient lentement, ne correspondaient pas à mon image de marque et, honnêtement, donnaient l'impression d'avoir été simplement copiées depuis un autre site web.
Voici le truc : il existe un bien meilleur moyen d'ajouter du contenu YouTube à votre site Divi qui ne nécessite aucune connaissance en codage.
Dans ce tutoriel, je vais vous montrer comment utiliser YouTube Feed Pro de Smash Balloon pour intégrer de manière transparente des vidéos YouTube sur votre site web Divi.
Croyez-moi, cette méthode est non seulement plus simple, mais aussi plus rapide et plus professionnelle que l'intégration manuelle.
Dans cet article
Manuel ou automatique : quelle est la meilleure façon d'ajouter des vidéos YouTube à votre Divi ?
Avant de nous plonger dans le tutoriel, voyons pourquoi l'utilisation d'un plugin spécialisé tel que YouTube Feed Pro est préférable à la méthode manuelle traditionnelle.
Lorsque la plupart des gens envisagent d'ajouter des vidéos YouTube à WordPress, ils récupèrent le code d'intégration sur YouTube et le collent dans leur page.
Bien que cela fonctionne techniquement, cela crée de sérieux problèmes, en particulier sur une plateforme visuellement sophistiquée comme Divi.
Voici comment se comparent les deux méthodes :
| Fonctionnalité | Smash Balloon YouTube Feed Pro | Intégrations manuelles d'iFrame |
| Aucun codage requis | ✅ Personnalisation visuelle complète | ❌ Nécessite des connaissances en HTML/CSS |
| Mises à jour automatiques | ✅ Mise à jour des vidéos en temps réel | ❌ Il faut mettre à jour manuellement chaque intégration. |
| Adapté aux mobiles | ✅ Paramètres réactifs intégrés | ❌ Nécessite un CSS personnalisé |
| Vitesse de chargement des pages | ✅ Chargement intelligent (2 à 3 secondes plus rapide) | ❌ Les scripts lourds se chargent immédiatement |
| Cohérence du design | ✅ Hérite du style de votre thème Divi | ❌ Conception générique du lecteur YouTube |
| Assistance et mises à jour | ✅ Équipe dédiée + compatibilité automatique | ❌ Vous êtes seul |
| À emporter | YouTube Feed Pro est le moyen le plus rapide d'afficher des vidéos YouTube sur votre site Divi. | Nécessite des mises à jour manuelles et des connaissances avancées en codage. |
Ce qui est génial avec YouTube Feed Pro et Divi, c'est qu'il s'adapte automatiquement au design de votre thème.
Vos vidéos auront l'air d'avoir toujours fait partie intégrante de votre site, et non d'avoir été maladroitement collées à partir d'un autre endroit.
La façon la plus simple d'intégrer des vidéos YouTube dans le thème Divi
Si vous souhaitez afficher facilement des vidéos YouTube sur votre site web, il vous suffit d'utiliser un plugin de flux YouTube.
La meilleure option sur le marché que vous pouvez essayer est le plugin YouTube Feed Pro de Smash Balloon.
Avec YouTube Feed Pro, il est plus facile que jamais de créer, de personnaliser et d'intégrer des flux YouTube sur votre site Web.
Principales fonctionnalités du plugin YouTube Feed Pro :
- Vous pouvez suivre le processus guidé en trois étapes, qui vous accompagnera tout au long du processus en quelques clics, sans avoir besoin de HTML, CSS ou de code d'intégration.
- YouTube Feed Pro vous permet d'intégrer une chaîne YouTube, une liste de lecture, des diffusions en direct, des vidéos YouTube individuelles, etc.
- Ce plugin dispose également d'un chargement intelligent, qui ne les charge que lorsqu'un visiteur clique dessus. Cela accélère le chargement de vos flux YouTube, ce qui améliore le référencement de votre site.
- Vous disposez également d'un éditeur en direct que vous pouvez utiliser pour modifier votre mise en page, votre palette de couleurs, le style de votre en-tête, le design de vos boutons et bien plus encore.
Dans l'ensemble, il s'agit du meilleur plugin de flux YouTube du marché et d'un excellent moyen de rendre votre site Divi plus attrayant.
Prêt à intégrer des flux YouTube ? Téléchargez le plugin YouTube Feed Pro dès maintenant.
Nous allons maintenant voir comment intégrer des vidéos YouTube dans le thème Divi à l'aide de ce plugin.
Comment ajouter des vidéos YouTube dans le thème Divi (étape par étape)
Je vais maintenant vous expliquer comment ajouter des vidéos YouTube à votre site web Divi à l'aide de Smash Balloon.
J'ai personnellement utilisé cette méthode sur des dizaines de sites clients, et elle fonctionne à merveille à chaque fois.
Étape 1 : Installer et activer YouTube Feed Pro
Pour commencer, obtenez votre copie du plugin YouTube Feed Pro ici. Ensuite, il vous suffit d'installer et d'activer le plugin sur votre site.
Si vous ne savez pas comment faire, vous pouvez suivre ce guide sur l'installation d'un plugin WordPress.
Étape 2 : Créer votre flux YouTube
Passons maintenant à la partie amusante : la création de votre flux vidéo !
Pour afficher des vidéos YouTube sur votre site web, vous pouvez commencer par créer un flux YouTube à l'aide de ce plugin.
Pour cela, accédez au menu YouTube Feed " All Feeds " de votre tableau de bord WordPress et cliquez sur Add New.
Ensuite, vous pouvez sélectionner le type de vidéo YouTube que vous souhaitez voir apparaître sur votre site web. Vous avez le choix entre 6 options différentes :
- Chaîne: affiche les vidéos YouTube d'une chaîne sélectionnée.
- Liste de lecture: intégrez des listes de lecture YouTube pour susciter l'intérêt des visiteurs.
- Recherche: ajoutez les résultats de recherche YouTube à votre site web Divi
- Diffusions en direct: utilisez votre flux pour intégrer une diffusion en direct YouTube.
- Vidéos individuelles: intégrez des vidéos YouTube sélectionnées dans une page ou un article Divi.
Pour continuer, sélectionnez un type de flux et cliquez sur Suivant.
Pour cet exemple, nous utiliserons un flux de type liste de lecture.
Étape 3 : Connecter votre compte YouTube
En connectant votre compte YouTube, ce flux peut récupérer des vidéos de YouTube et les intégrer à Divi.
La façon la plus simple de connecter votre compte YouTube est d'ajouter la clé API.
Remarque: une clé API permet de connecter votre site web à YouTube afin que des plugins tels que YouTube Feed Pro puissent récupérer et afficher les vidéos.
Vous n'avez pas encore de clé API YouTube ? Vous pouvez suivre ce guide étape par étape pour créer votre clé API YouTube.
Ensuite, collez la clé API dans la fenêtre contextuelle et cliquez sur le bouton Ajouter.
Vous pouvez maintenant choisir la source de votre flux YouTube. Selon le type de flux choisi, il peut s'agir d'une chaîne YouTube, d'une liste de lecture, d'un terme de recherche, etc.
Dans cet exemple, nous allons intégrer une liste de lecture Divi Youtube.
Pour cela, ouvrez la liste de lecture YouTube dans votre navigateur web et recherchez l'URL en haut de la liste.
À partir de l'URL, il suffit de copier l'ID à la fin.
Ouvrez à nouveau votre site WordPress pour terminer l'ajout de votre source.
Enfin, collez le code dans le champ Playlist ID et cliquez sur Next.
Étape 4 : Personnalisation de votre flux YouTube
Grâce au plugin YouTube Feed Pro, votre flux héritera automatiquement du design de votre site web.
En plus de cela, vous pouvez également choisir parmi plusieurs modèles à importer pour votre flux. Cela détermine la mise en page de base de vos vidéos sur votre site Divi.
YouTube Feed Pro propose plusieurs superbes modèles :
- Défaut
- Carrousel
- Cartes
- Liste
- Galerie
- Dernière vidéo
- Carrousel de présentation
- Widget
D'après mon expérience, le modèle Cards fonctionne très bien avec la structure en colonnes de Divi, c'est donc celui que je recommande généralement pour la plupart des sites. Pour continuer, sélectionnez le modèle que vous préférez, puis cliquez sur Suivant.
Pour vous aider à personnaliser votre flux YouTube en détail, YouTube Feed Pro vous renvoie désormais à l'éditeur de flux en direct.
C'est là que YouTube Feed Pro se distingue vraiment. Le Visual Feed Customizer vous permet de concevoir votre flux vidéo avec un aperçu en direct, sans aucun codage.
À gauche, vous trouverez le panneau de personnalisation qui vous permet de définir la mise en page de votre flux, la palette de couleurs, le bouton d'abonnement YouTube, le design de l'en-tête, le bouton « Charger plus » et bien plus encore.
Chaque fois que vous effectuez des modifications, l'aperçu en direct sur la droite montre l'aspect du flux YouTube en temps réel.
Pour commencer la personnalisation, cliquez sur l'option Feed Layout à gauche.
Ensuite, YouTube Feed Pro vous demandera de choisir parmi 4 mises en page différentes : grille, galerie, liste et carrousel.
Examinons chaque modèle ci-dessous.
Grâce à la disposition en grille , vous pouvez afficher les vidéos YouTube dans des rangées et des colonnes simples, avec des vignettes uniformes.
Il est donc facile d'afficher des tonnes de vidéos YouTube dans Divi.
Ensuite, il y a la disposition en galerie qui transforme votre flux en une galerie YouTube avec une grande vidéo en haut et des vignettes plus petites en dessous.
Comme vous pouvez le constater, cela permet de mettre l'accent sur une seule vidéo YouTube.
Ensuite, la mise en page sous forme de liste vous permet d'afficher le contenu des vidéos YouTube dans une seule colonne.
Ainsi, le flux vidéo sera très visible et occupera plus d'espace sur votre site web.
Vous souhaitez afficher vos vidéos YouTube sous forme de diaporama? Dans ce cas, vous pouvez choisir la mise en page carrousel ici.
Cela peut rendre votre site web encore plus interactif pour vos visiteurs.
Après avoir sélectionné la disposition de votre flux, cliquez sur le bouton Enregistrer pour continuer.
Enfin, cliquez sur le bouton Personnaliser pour continuer à modifier la conception de votre flux YouTube.
Hériter du style de votre thème Divi
Voici l'une de mes fonctionnalités préférées : Smash Balloon YouTube Feed Pro peut automatiquement hériter des couleurs, des polices et du style de votre thème Divi.
Dans l'ongletPersonnaliser, recherchez la sectionPalette de couleurs.
YouTube Feed Pro propose 4 palettes de couleurs qui permettent de modifier facilement toutes les couleurs du flux.
- Hériter du thème : Copier les couleurs de votre thème WordPress Divi
- Clair : Affiche un arrière-plan clair avec une police foncée
- Sombre : incorpore un arrière-plan sombre avec une police claire
- Personnalisé : Choisir manuellement toutes les couleurs
Vous verrez une option intitulée «Hériter du thème ».
Lorsque vous activez cette option, le plugin analyse votre thème Divi actif et applique vos polices principales, vos styles de boutons et votre palette de couleurs au flux vidéo.
Cela signifie que vos vidéos YouTube s'intégreront naturellement au design de votre site web, sans apparaître comme un élément externe.
Croyez-moi, cette fonctionnalité à elle seule vaut le prix d'entrée.
Avant, je passais des heures à demander à mes amis développeurs d'écrire du CSS personnalisé pour que les vidéos intégrées s'adaptent à mes sites Divi. Maintenant, cela se fait automatiquement.
Une fois que vous avez choisi votre palette de couleurs, confirmez vos changements en cliquant sur Enregistrer.
Vous pouvez maintenant utiliser les options de personnalisation restantes pour définir le design de votre en-tête, le style des boutons, les options de la boîte à lumière, la taille du flux, etc.
Passons en revue les principales options de personnalisation :
Paramètres de mise en page du flux :
- Colonnes– Choisissez le nombre de vidéos affichées par ligne (je recommande 3 pour les ordinateurs de bureau, 2 pour les tablettes et 1 pour les mobiles).
- Nombre de publications– Décidez du nombre de vidéos à charger initialement
- Bouton« Charger plus» : activez cette option pour permettre aux visiteurs de charger des vidéos supplémentaires sans quitter la page.
Paramètres d'en-tête :
- Afficher l'en-tête: activez cette option pour afficher le nom de votre chaîne, le nombre d'abonnés et l'avatar de la chaîne.
- Style d'en-tête– Choisissez entre « Visuel » (affiche l'image de la chaîne) ou « Texte uniquement ».
J'adore ajouter l'en-tête visuel, car cela renforce la confiance. Les visiteurs de votre site peuvent voir le nombre d'abonnés et vérifier que votre chaîne est légitime.
Une fois la personnalisation terminée, cliquez sur Enregistrer.
Étape 5 : Intégrer le flux vidéo YouTube à votre site Divi
Il est maintenant temps d'ajouter votre magnifique flux YouTube à une page Divi ! Grâce à ce plugin, vous pouvez commencer à intégrer vos flux YouTube directement depuis l'éditeur de flux en direct.
Pour commencer, cliquez sur le bouton " Embed" en haut de la page.
Vous verrez ensuite apparaître une fenêtre contextuelle contenant toutes les options d'intégration vidéo de votre flux YouTube. À partir de là, vous pouvez intégrer votre flux dans une page, un article, une barre latérale ou un pied de page.
Ici, cliquez sur le bouton Copier pour continuer. Vous en aurez besoin dans un instant.
Pour commencer à intégrer votre flux dans une page WordPress, ouvrez le menu Pages " Ajouter nouveau dans votre tableau de bord.
Dans l'éditeur de pages, cliquez sur le bouton Utiliser le constructeur Divi .
Vous préférez utiliser un article WordPress ? Créez simplement un nouvel article et suivez les instructions ci-dessous.
Ensuite, vous pouvez choisir entre 3 options pour commencer à concevoir votre page ou votre article Divi :
- Commencer à construire : Partir d'un modèle vierge
- Parcourir les mises en page : Importer une mise en page préétablie
- Choisir une page : Sélectionner une page et copier son design
Pour continuer, il suffit de sélectionner l'option que vous préférez.
L'option Démarrer la construction vous permet de commencer immédiatement la conception de la page ou du message.
Si vous avez sélectionné l'option Parcourir les modèles, vous pouvez parcourir vos modèles préexistants dans la fenêtre contextuelle Charger de la bibliothèque .
Dans la fenêtre contextuelle, il suffit de cliquer sur la mise en page que vous préférez.
Vous obtiendrez ainsi plus de détails sur cette mise en page.
Pour sélectionner cette mise en page pour votre page ou votre message, cliquez sur Utiliser cette mise en page.
Si vous choisissez l'option Choose Page , la fenêtre contextuelle vous montrera toutes les pages que vous avez créées avec Divi.
Pour continuer, il suffit de cliquer sur l'une des mises en page prédéfinies de cette fenêtre contextuelle,
Vous pouvez maintenant commencer à ajouter vos vidéos YouTube à ce constructeur de pages Divi.
Tout d'abord, cliquez sur l'icône verte plus (+) pour créer une nouvelle ligne dans laquelle vous placerez votre flux YouTube.
Ensuite, vous pouvez choisir le type de ligne que vous souhaitez ajouter.
Ensuite, cliquez sur l'icône plus (+) pour ouvrir la fenêtre contextuelle Insérer un module . Vous pouvez ainsi ajouter du contenu au thème Divi.
Dans la barre de recherche en haut, cherchez le module "code" . Cliquez ensuite sur le module " Code" dans les résultats ci-dessous.
Voici le point important : vous devez utiliserle module Codede Divi pour intégrer correctement le flux. N'utilisez pas le module Texte ou le module Vidéo. Le module Code empêche Divi d'ajouter une mise en forme indésirable qui pourrait endommager le shortcode.
Une fois que vous avez fait cela, cherchez le champ de code sur la gauche et collez le shortcode pour votre flux YouTube.
Enfin, cliquez sur l'icône de vérification en bas pour enregistrer vos modifications.
Vous avez ainsi ajouté des vidéos YouTube à votre site Divi WordPress. Vous pouvez maintenant cliquer sur Publier, et votre flux sera en ligne sur votre site.
Pour voir ce que cela donne à vos visiteurs, vous pouvez ouvrir votre page ou votre article et y jeter un coup d'œil.
Et c'est tout !
Vous savez désormais comment ajouter des vidéos YouTube dans le thème Divi. Vous pouvez ainsi maintenir l'intérêt des visiteurs de votre site web et les convertir en clients.
Avec le plugin YouTube Feed Pro, vous pouvez intégrer des vidéos YouTube dans votre site Divi en quelques clics seulement, sans avoir à toucher à une seule ligne de code.
Prêt à intégrer une vidéo YouTube dans WordPress Divi ? Procurez-vous Smash Balloon YouTube Feed Pro dès aujourd'hui!
Pourquoi intégrer des vidéos YouTube dans Divi ?
À ce stade, vous vous demandez peut-être : « D'accord, je sais maintenantcommentintégrer des vidéos, mais pourquoi devrais-je le faire ? »
Excellente question ! Permettez-moi de vous donner quelques raisons convaincantes basées sur mon expérience et les données disponibles.
Grâce au thème Divi, vous pouvez facilement créer un magnifique site web à l'aide du constructeur visuel. Une fois votre site Divi prêt, vous pouvez utiliser du contenu vidéo pour stimuler votre engagement.
En affichant un flux YouTube dans Divi, vous pouvez montrer du contenu vidéo pertinent et garder vos visiteurs sur votre site web.
Et ce n'est qu'un début ! Voici d'autres façons étonnantes dont un flux Divi YouTube peut aider votre site Web :
La preuve sociale qui convertit
Le contenu vidéo est l'une des formes les plus puissantes de preuve sociale que vous pouvez utiliser sur votre site web.
Lorsque des clients potentiels visionnent vos vidéos YouTube, qu'il s'agisse de tutoriels, de témoignages, de démonstrations de produits ou de contenus en coulisses, cela renforce la confiance d'une manière que le texte ne peut tout simplement pas égaler.
En effet, 84 % des consommateurs affirment avoir été convaincus d'acheter un produit après avoir visionné la vidéo d'une marque. C'est une influence considérable sur la conversion !
En intégrant votre flux YouTube directement sur votre site Divi, vous offrez aux visiteurs un accès immédiat à ce contenu convaincant sans les obliger à quitter votre site web.
Augmenter le temps passé sur le site et l'engagement
Voici quelque chose d'intéressant : les pages contenant du contenu vidéo retiennent l'attention des visiteurs beaucoup plus longtemps que les pages contenant uniquement du texte.
Lorsqu'un utilisateur clique sur l'une de vos vidéos YouTube intégrées, il s'engage à passer plusieurs minutes (voire plus) sur votre site.
Cette augmentation du temps passé sur votre site envoie des signaux positifs à Google concernant la qualité de votre contenu, ce qui peut améliorer votre référencement naturel et votre classement dans les résultats de recherche.
De plus, grâce à la fonctionnalitéLightboxde YouTube Feed Pro, les vidéos sont diffusées en superposition sur votre site. Les visiteurs restent sur votre page au lieu d'être redirigés vers YouTube. Cela leur permet de rester dans votre entonnoir de conversion.
Maintenir automatiquement le contenu à jour
L'un des défis liés à la maintenance d'un site web Divi consiste à maintenir le contenu à jour. Avec YouTube Feed Pro, votre flux vidéo se met automatiquement à jour chaque fois que vous publiez du nouveau contenu sur votre chaîne.
Plus besoin de vous connecter à WordPress pour ajouter manuellement de nouvelles vidéos intégrées. Votre site Divi affiche toujours votre dernier contenu sans aucun effort de votre part.
Comme vous pouvez le constater, vous pouvez intégrer des vidéos dans Divi pour renforcer votre présence sur les médias sociaux, susciter l'intérêt de vos visiteurs et développer votre activité.
Commencez dès maintenant à intégrer des vidéos YouTube sur votre site Divi
Et voilà ! Vous savez désormais exactement comment intégrer des vidéos YouTube à votre site WordPress Divi à l'aide de YouTube Feed Pro de Smash Balloon.
Aucun codage requis. Aucun casse-tête lié à la conception. Juste de superbes flux vidéo rapides à charger, optimisés pour le référencement, qui se mettent à jour automatiquement et convertissent les visiteurs en clients.
Le plus beau ?
La configuration complète prend moins de 15 minutes, mais les avantages durent aussi longtemps que votre site web.
Si vous souhaitez sérieusement mettre en avant du contenu vidéo sur votre site Divi, que ce soit à des fins marketing, éducatives, de divertissement ou de preuve sociale, YouTube Feed Pro est sans conteste la solution la plus simple et la plus professionnelle qui soit.
Prêt à transformer votre site Divi avec de superbes flux vidéo YouTube ?
Commencez dès aujourd'hui avec YouTube Feed Pro et regardez votre engagement monter en flèche !
Articles connexes qui pourraient vous être utiles :
- Comment afficher les flux Instagram sur votre site Web Divi (aucune connaissance en codage requise)
- Voici comment j'ajoute des flux de médias sociaux aux sites Web Divi (+ captures d'écran !)
- Comment intégrer des courts métrages YouTube sur votre site Divi
