Le guide complet d'utilisation de SmartVideo avec Divi Builder pour l'hébergement vidéo WordPress

Pour les utilisateurs de Divi Builder, SmartVideo vous offre juste l'outil dont vous avez besoin pour fournir une expérience de lecture vidéo moderne, professionnelle et native sur votre site Web.

Nous vivons à l'ère des puissants thèmes WordPress et des constructeurs de pages qui vous aident à créer n'importe quel site Web sous le soleil. L'un de ces constructeurs de thèmes et de pages visuelles est Divi Builder par les gens sympas d'Elegant Themes.

Si vous êtes un utilisateur assermenté de Divi Builder, vous allez adorer le post d'aujourd'hui. En quelques minutes, nous vous montrerons exactement comment utiliser la SmartVideo de Swarmify aux côtés de Divi Builder.

Désormais, vous n'avez plus besoin d'utiliser les lecteurs vidéo chargés de liens de Vimeo ou de YouTube sur votre site. Nous vous proposons un lecteur vidéo sans encombrement qui a l'air absolument incroyable sur votre site Web alimenté par Divi.

Quels sont les bénéfices directs ?

• Le lecteur vidéo SmartVideo ne contient pas de marque tierce (bonjour, YouTube) ni de liens qui détournent le trafic que vous travaillez si dur pour diriger vers votre site. Maintenant, vous pouvez personnaliser vos lecteurs vidéo pour un look et une sensation nets et professionnels :)
• Notre CDN vidéo et notre technologie propriétaire EdgeAI vous permettent d'offrir des vidéos ultra-rapides, sans tampon et sans erreur aux visiteurs de votre site Web, où qu'ils se trouvent dans le monde. Vos utilisateurs vous remercieront.
• Nous utilisons la même infrastructure que les géants du streaming tels que Netflix et Hulu, car nous sommes pleinement engagés dans notre mission. En conséquence, vous profitez de vidéos à démarrage instantané et sans décrochage qui vous aident à fidéliser plus de visiteurs et à augmenter vos revenus.
• Notre solution d'encodage vidéo donne un coup de pied au cul, ce qui signifie que les visiteurs de votre site Web bénéficient d'une lecture vidéo de haute qualité, quel que soit l'appareil qu'ils utilisent. Dites adieu aux vidéos sommaires qui semblent terribles sur différents écrans et résolutions.
• Et bien plus encore, comme vous le découvrirez plus tard dans l'article :)

Pour l'instant, apprenons-en plus sur le Divi Builder et comment l'intégrer à SmartVideo.

Spoiler Alert : Vous pouvez ajouter manuellement le code SmartVideo à votre site Web Divi Builder, mais vous pouvez désormais ignorer tous les éléments techniques avec notre nouveau plugin WordPress SmartVideo. Cela signifie que vous pouvez facilement intégrer SmartVideo à Divi Builder même si vous ne pouvez pas coder pour vous sauver la vie.

Qu'est-ce que DiviBuilder ?

Si vous êtes nouveau, Divi est un magnifique et puissant créateur de thèmes et de pages visuelles WordPress. Grâce à la technologie avancée de création visuelle, Divi vous aide à créer rapidement de superbes sites Web WordPress.

Divi est livré avec une tonne de mises en page prédéfinies que vous pouvez importer dans votre installation WordPress en un seul clic. En plus de cela, vous avez le Divi Visual Builder qui vous permet de personnaliser votre site Web en faisant glisser et en déposant des éléments.

C'est vrai, vous n'avez pas besoin de connaissances préalables en codage pour créer un site Web remarquable avec Divi. Si cela ne suffit pas, vous pouvez même utiliser deux mises en page différentes en même temps, ce qui vous donne une grande liberté de conception.

Divi est livré avec une tonne de fonctionnalités étonnantes, notamment :

• Plus de 40 éléments de site Web tels que des boutons d'appel à l'action, des galeries, des formulaires, des blogs, des curseurs, des témoignages, etc.
• Plus de 800 conceptions préfabriquées dans différents créneaux tels que les affaires, le commerce électronique, la technologie, la santé, etc.
• Contrôle complet de la conception
• Conception 100% réactive avec des paramètres supplémentaires pour toutes sortes d'appareils
• Contrôle CSS personnalisé
• Une grande bibliothèque d'effets, de transitions et de styles
• Un million et une options de conception
• Et bien plus!

La meilleure partie est que lorsque vous achetez Divi, vous avez accès à d'autres thèmes et plugins WordPress. Elegant Themes compte plus de 700 000 clients, vous êtes donc entre de bonnes mains.

"Divi est le ROI en matière de facilité de conception Web. Ce qui prenait auparavant une semaine prend quelques heures et maintenant nous sommes tous dans notre objectif personnel de convertir tous les sites Web de nos clients vers Divi." -Scott Laurent

Divi est parfait pour les indépendants, les agences et les propriétaires de sites Web à la recherche d'un constructeur de page visuel puissant, intuitif et facile à utiliser. Que vous sachiez coder ou non, Divi est un outil de création de site Web incroyable.

Cela dit, qu'est-ce que SmartVideo ?

Qu'est-ce que Swarmify SmartVideo ?

Pour les nouveaux arrivants, Swarmify est un service d'accélération vidéo de premier plan que nous avons lancé en 2013 après des jours de développement et de tests rigoureux.

La nôtre est une plate-forme d'hébergement vidéo à service complet comprenant des ensembles d'outils d'encodage, de lecture, de CDN vidéo, de livraison et de distribution. Nous sommes fiers de travailler avec un nombre croissant d'entrepreneurs de tous horizons.

Nous sommes passionnés par ce que nous faisons et travaillons sans relâche pour vous proposer des vidéos qui se chargent instantanément sans mise en mémoire tampon, comme c'est la norme avec de nombreux sites d'hébergement vidéo tels que YouTube, Wistia et Vimeo.

Swarmify vous garantit une lecture vidéo 12 fois plus rapide et une mise en mémoire tampon 8 fois moindre que la moyenne des lecteurs vidéo du marché. Nous nous concentrons uniquement sur l'accélération des vidéos, et nous sommes plutôt bons dans ce domaine :)

Plug sans vergogne mis à part, Swarmify est incroyablement facile à intégrer à plusieurs plates-formes de création de sites Web, notamment WordPress, Shopify et Squarespace, entre autres.

Bien que vous puissiez intégrer manuellement le lecteur vidéo SmartVideo sur votre site WordPress, vous pouvez gagner du temps en utilisant notre plugin révolutionnaire SmartVideo WordPress.

Le plugin est ridiculement facile à installer et à configurer sur votre site Web WordPress + Divi Builder. Vous offrirez des expériences vidéo rapides et de haute qualité à vos visiteurs en moins de 10 minutes !

Avec ces informations de fond, nous sommes maintenant prêts pour la partie amusante. Dans la section suivante, vous apprendrez à utiliser Swarmify avec Divi Builder. En d'autres termes, nous vous montrons comment ajouter une vidéo à une mise en page typique de Divi Builder.

Comment utiliser Swarmify SmartVideo avec Divi Builder

Pour la section suivante, vous devez installer et activer à la fois le plugin SmartVideo WordPress et Divi. L'installation et l'activation de SmartVideo ou de Divi sont l'affaire des élèves de quatrième année, nous ne nous attendons pas à ce que vous rencontriez des problèmes.

Si Divi et SmartVideo sont prêts, laissez-nous nous mettre au travail. À des fins d'illustration, je travaille avec la mise en page de l' agence Web de Divi qui ressemble à ceci :

Plutôt chouette, non ? Ce que je vais faire, c'est ajouter une vidéo SmartVideo juste en dessous du titre principal, qui se lit " Agence de conception Web à service complet ". Voir l'image ci-dessus.

Commençons!

Dans votre tableau de bord d'administration WordPress, accédez à la page que vous souhaitez modifier. Dans notre cas, je modifie la page d' accueil affichée dans la capture d'écran ci-dessus.

Ouvrez la page dans l'éditeur comme d'habitude. Pour commencer à modifier la page ci-dessus dans Divi Builder, cliquez simplement sur le bouton Modifier avec le Divi Builder , comme nous le soulignons ci-dessous.

Cela charge votre page dans le front-end. Ensuite, cliquez sur le bouton Activer Visual Builder , comme indiqué ci-dessous.

Ensuite, faites défiler jusqu'à la section que vous souhaitez modifier. Dans notre cas, nous ajoutons une SmartVideo juste en dessous du titre principal en haut de la page.

Lorsque vous passez la souris sur la section, des options d'édition s'affichent. Cliquez simplement sur l'icône plus (+) pour ajouter un nouveau module :

Cela ouvre une pop up qui permet d'ajouter un nouveau module Divi :

Ensuite, tapez "SmartVideo" dans la zone de recherche, puis cliquez sur SmartVideo , comme indiqué ci-dessous.

Après cela, il est temps de configurer votre vidéo à l'aide de l'onglet Paramètres SmartVideo . Comme vous pouvez le voir sur l'image ci-dessous, de nombreuses options s'offrent à vous :

Dans Paramètres SmartVideo , vous pouvez :

• Choisissez la source vidéo - Il peut s'agir de la médiathèque WordPress, de YouTube, de Vimeo ou de toute autre source ( NB : si votre vidéo YouTube est définie sur privée , changez-la en non répertoriée à la place)
• Modifier la largeur et la hauteur de votre vidéo
• Définissez une affiche personnalisée pour votre vidéo (SmartVideo utilise par défaut la première image de votre vidéo si vous ne choisissez pas d'image d'affiche personnalisée)
• Activer/désactiver les options telles que la lecture automatique, la boucle et le son
• Activer/désactiver les options telles que les commandes vidéo, la conception réactive et la lecture vidéo en ligne pour le navigateur iOS Safari
• Contrôlez la conception de votre vidéo à l'aide des options Divi, qui incluent les bordures, le dimensionnement, l'espacement, les filtres, l'ombrage des boîtes, les animations et bien plus encore :)

Une fois que vous avez terminé, cliquez simplement sur le bouton Enregistrer , comme nous le détaillons ci-dessous :

N'oubliez pas d'enregistrer les modifications dans le Divi Visual Builder après cela :

Maintenant, si nous visualisons notre exemple de site sur le front-end, nous voyons le nouveau lecteur vidéo SmartVideo prêt à faire la fête :

Pour ajouter une SmartVideo dans n'importe quelle section, répétez simplement le processus. Lancez la page que vous souhaitez modifier dans Divi Visual Builder, cliquez sur l'icône plus (+) pour ajouter un nouveau module, choisissez le module SmartVideo, ajoutez vos options et enregistrez vos modifications.

Aussi simple que A, B, C !

Ajouter des vidéos SmartVideo à votre site Web Divi n'a jamais été aussi simple. Vous pouvez oublier tout ce qui concerne la marque YouTube, les vidéos recommandées et les liens qui volent votre trafic.

En outre, vous pouvez entièrement personnaliser le lecteur vidéo SmartVideo pour qu'il corresponde au style de votre site Web.

Quoi de plus?

Si vous avez déjà des vidéos sur votre site Divi, SmartVideo les convertit automatiquement dès que vous configurez notre plugin.

Assurez-vous d'activer l'option Optimiser l'arrière-plan et les vidéos existantes dans vos paramètres SmartVideo.

Comment?

Dans votre tableau de bord d'administration WordPress, accédez à SmartVideo > Paramètres . Ensuite, basculez Optimiser l'arrière-plan et les vidéos existantes :

Après cela, cliquez sur le bouton Enregistrer les paramètres en bas de la page :

Et c'est tout - SmartVideo convertira automatiquement toutes vos vidéos existantes.

C'est vrai; tu n'as rien d'autre à faire :)

Comment personnaliser le lecteur vidéo SmartVideo

Avant d'arriver à la fin, couvrons quelques options pour personnaliser le lecteur vidéo SmartVideo.

Modification de la forme et de la couleur du lecteur vidéo

Par défaut, le lecteur vidéo SmartVideo utilise un bouton de lecture hexagonal jaune. Vous pouvez cependant modifier la forme et la couleur en fonction de votre site Web. Voici comment.

Dans votre tableau de bord d'administration WordPress, cliquez sur SmartVideo :

Une fois dans le tableau de bord SmartVideo, cliquez sur l'onglet Paramètres , comme indiqué ci-dessous.

Sur l'écran Paramètres , faites défiler vers le bas et vous trouverez des sections qui permettent de modifier la forme et la couleur du bouton de lecture :

Voici plus de notes sur la capture d'écran ci-dessus.

1. Pour modifier la forme du bouton du lecteur, choisissez Par défaut , Rectangle ou Cercle dans le menu déroulant.
2. Choisissez une couleur personnalisée pour votre bouton de lecteur.
3. Cliquez sur le bouton Enregistrer les paramètres pour enregistrer vos modifications.

Vous pouvez maintenant profiter de votre nouveau bouton de lecteur personnalisé :)

Plus d'options avancées

SmartVideo est livré avec plus d'options pour ajouter des sous-titres codés à partir de sources YouTube, activer/désactiver l'accélération du téléchargement, passer à d'autres mises en page, ajouter un filigrane personnalisé et surveiller vos vidéos avec des publicités.

Voici comment trouver les options ci-dessus sur la page Paramètres SmartVideo. Pour ajouter des sous-titres à partir de sources YouTube, cochez la case ci-dessous et n'oubliez pas d'enregistrer vos paramètres :

Pour lancer plus d'options, faites défiler vers le bas et cliquez sur Options avancées , comme nous le soulignons ci-dessous.

Dans la section Options avancées , vous disposez des options suivantes :

1. Activez ou désactivez la méthode de mise en page alternative , ce qui est utile si vous rencontrez des problèmes de taille de vidéo étrange ou de plein écran.
2. Activez ou désactivez l'accélération de téléchargement si vous rencontrez des problèmes avec les téléchargements.
3. Définissez un filigrane/logo personnalisé sur votre lecteur vidéo.
4. Ajoutez une URL d'annonce VAST afin de pouvoir vendre des annonces d'Adsense, Spotx, DFP, etc.

Conseil de pro : n'oubliez pas de cliquer sur le bouton Enregistrer les paramètres en bas pour enregistrer vos modifications.

Derniers mots

Divi est un merveilleux thème WordPress et un constructeur visuel de pages. Il vous aide à créer de beaux sites Web avant que le prochain ne finisse un sandwich. Le processus est aussi simple que d'importer une mise en page et de la personnaliser jusqu'à ce que vous laissiez tomber.

La fonctionnalité glisser-déposer rend la personnalisation de n'importe quelle mise en page aussi simple que possible. Vous n'avez besoin d'aucune compétence en matière de codage, et vous modifiez votre site Web en amont, en voyant vos modifications prendre effet en temps réel.

Si vous utilisez des vidéos sur votre site Web, SmartVideo vous aide à offrir des expériences vidéo rapides, sans tampon et professionnelles sur votre site. Même si vous hébergez vos vidéos sur YouTube ou ailleurs, notre lecteur vidéo sans encombrement élimine la marque et les liens tiers.

Divi + SmartVideo est une combinaison gagnante. Entre vos mains, vous avez maintenant le combo parfait pour créer rapidement des sites Web et offrir des expériences vidéo inégalées aux visiteurs de votre site Web ou à vos clients de conception Web.

De plus, nous n'avons pas de limites de bande passante ou de stockage comme d'autres services, ce qui signifie que vous pouvez héberger des vidéos illimitées à des prix abordables :) Essayez Divi + SmartVideo dès aujourd'hui et profitez de vidéos rapides et de haute qualité sans transpirer.

Tiens nous au courant de comment ça se passe. Bonne construction !