Comment faire en sorte que le contenu et la vidéo aient la même hauteur dans un carrousel

Lorsque vous utilisez le Élément de carrousel Dans GemPages, vous remarquerez peut-être que le bloc de contenu et l'élément vidéo n'ont pas la même hauteur. Cela peut donner une impression d'incohérence à la mise en page, notamment sur les pages d'accueil ou les présentations de produits.

Ce tutoriel vous montrera comment faire en sorte que la hauteur de la vidéo corresponde automatiquement à la hauteur du contenu à l'intérieur d'un élément Carousel à l'aide d'un simple extrait de code CSS personnalisé.

Pourquoi la hauteur du contenu et de la vidéo est-elle différente ?

Par défaut, le contenu et Éléments vidéo Les éléments à l'intérieur d'un carrousel peuvent ajuster leur hauteur en fonction de leur propre contenu.

Par exemple :

• La colonne de texte peut paraître plus haute en raison de descriptions plus longues ou de boutons.
• La colonne vidéo peut conserver son format d'image original et apparaître plus courte.

L'ajout d'une règle CSS personnalisée permet à l'élément vidéo de s'étirer et de s'adapter à la hauteur de la section de contenu pour un design plus épuré et plus professionnel.

Comment faire en sorte que le contenu et la vidéo aient la même hauteur dans l'élément carrousel

Étape 1 : Ouvrez le panneau de code personnalisé de l’élément vidéo

Vous devez d'abord accéder aux paramètres de code personnalisé de l'élément vidéo.

• Ouvrez votre page dans l'éditeur GemPages.
• Accédez à l'élément Carrousel.
• Sélectionnez le Vidéo élément à l'intérieur du carrousel.
• Cliquez avec le bouton droit sur l'élément.
• Cliquez à nouveau Code personnalisé.

Étape 2 : Ajouter le code CSS

Collez le code suivant dans le panneau Code personnalisé :

.ElementClass {

 hauteur: 100%;

}

Ce code CSS permet à l'élément vidéo d'occuper toute la hauteur disponible dans la mise en page du carrousel.

Étape 3 : Remplacer .ElementClass Avec la classe d'élément réelle

Vous devez remplacer .ElementClass avec le nom de classe réel de votre élément vidéo.

Vous trouverez le nom de la classe affiché en haut du panneau Code personnalisé.

Étape 4 : Prévisualisez et publiez votre page

Après avoir ajouté le code :

• Cliquez à nouveau Aperçu vérifier si le contenu et la vidéo s'affichent désormais à la même hauteur.
• Tester la mise en page sur ordinateur et sur mobile.
• Une fois que tout semble correct, cliquez Publier pour appliquer les modifications à votre boutique en ligne.