Exemples de cas d'utilisation de la mise en page vidéo avec plusieurs colonnes
Les mises en page vidéo multicolonnes sont utiles pour afficher plusieurs vidéos dans une même section. Elles peuvent rendre votre page produit plus attrayante et informative. Exemples d'utilisation courants :
- Présentation des caractéristiques du produit:Mettez en évidence différentes fonctionnalités dans des vidéos distinctes.
- Vue comparative: Placez 2 à 3 vidéos côte à côte pour comparer les modèles ou les variantes de produits.
- Témoignages de clients: Ajoutez plusieurs vidéos d’évaluation pour renforcer la crédibilité.
- Tutoriels et modes d'emploi: Affichez des instructions étape par étape avec de courts clips.
- Campagnes de marketing: Combinez des histoires de marque, des vidéos lifestyle et du contenu promotionnel.
Concevoir une mise en page vidéo à plusieurs colonnes à l'aide de l'élément vidéo
Pour créer une mise en page vidéo à 3 lignes pour votre page produit créée avec GemPages, suivez ces étapes :
Étape 1 : Accéder à l'éditeur GemPages
- Depuis votre tableau de bord d'administration Shopify > Générateur de pages GemPages application> Pages.
- Sélectionnez un produit parmi vos pages produit existantes. Sinon, cliquez sur Créer une nouvelle page > Page produit pour en construire un nouveau.
Étape 2 : ajouter un élément de ligne
Une fois entré dans l'éditeur, faites glisser et déposez le Élément de ligne avec une mise en page à 3 colonnes à partir de la barre latérale gauche.
Si vous préférez une autre disposition de colonnes pour afficher vos vidéos, vous pouvez la modifier dans le Paramètres onglet> Mise En Page .
Le nombre maximum de colonnes dans une ligne est de 6.
Étape 3 : Ajouter des éléments vidéo/bannière vidéo
- Sauvegardez à la Élément dans la barre latérale gauche et faites défiler vers le bas jusqu'à ce que vous voyiez l'onglet Médiathèque .
- Faites glisser et déposez un Élément vidéo or Bannière vidéo élément sur chaque colonne de votre ligne.
Étape 4 : Téléchargez et personnalisez votre vidéo
Cliquez sur la vidéo pour ouvrir ses paramètres. Sous Source vidéo, Cliquez sur le Type champ pour sélectionner la source vidéo dans le menu déroulant : YouTube, Vimeo, ou Hébergement vidéo.
Ensuite, entrez l'URL de la vidéo dans le champ Lien vidéo champ et définissez le Vignette image pour chaque vidéo selon vos préférences.
Vous pouvez choisir parmi n'importe quelle image de votre bibliothèque (fichiers Shopify) ou en télécharger une nouvelle.
Pour d'autres personnalisations, consultez nos articles :
Avancé : utiliser un élément de code personnalisé
Ces deux éléments vous permettent d'insérer une vidéo provenant uniquement de trois sources (YouTube, Vimeo ou hébergement vidéo). Par conséquent, si vous préférez ajouter des vidéos provenant d'autres sources, comme TikTok, utilisez l'option Élément de code personnalisé est la meilleure option.
Suivez ces étapes pour créer votre propre mise en page vidéo à 3 colonnes avec cet élément :
Étape 1 : Faites glisser et déposez une disposition à 3 colonnes de l'élément de ligne à la position souhaitée sur la page.
Étape 2 : Entrer "code personnalisé" dans la barre de recherche, puis imbriquez l'élément Code personnalisé dans chaque colonne.
Étape 2 : Cliquez sur l'élément pour ouvrir le panneau de configuration dans la barre latérale gauche. Sous Code personnalisé section, sélectionnez la case à côté de la Code champ.
Étape 3 : La boîte de dialogue Éditeur de code apparaîtra sur votre écran. Sous HTML onglet, collez le code d'intégration de la vidéo, puis appuyez sur le bouton Enregistrer .
Par exemple, nous insérons un code d'intégration d'une vidéo TikTok.
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@gempages/video/7384328395699539217" data-video-id="7384328395699539217" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@gempages" href="https://www.tiktok.com/@gempages?refer=embed">@gempages</a> <p>🥰 Master the Art of Crafting Comparison Tables with GemPages! 🥰 _________________________ ⭐️Try GemPages for FREE: https://bit.ly/appstore-Gempages #ecommerce #gempages #tipsandtricks #webdesign #landingpage #productdesign #productpage #homepage #abovethefold #mobileview #shopifydropshipping #pagebuilding #pagebuilder</p> <a target="_blank" title="♬ nhạc nền - GemPages" href="https://www.tiktok.com/music/nhạc-nền-GemPages-7384328668371667729?refer=embed">♬ nhạc nền - GemPages</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
Résultat:
Merci pour vos commentaires