Lorsque vous construisez un carrousel avec Divi Pixel, vous pouvez rencontrer un problème esthétique : si le contenu de chaque cadre n’a pas la même hauteur, les boutons d’appel à l’action (CTACTA signifie "call-to-action" en anglais, ce qui se traduit par "appel à l'action" en français. Un CTA est un bouton, ...) ne s’alignent pas correctement. Cette disparité peut nuire à l’apparence globale de votre site web et à l’expérience utilisateur.
Heureusement, il existe une solution simple pour s’assurer que tous les Call To Action de votre carrousel Divi Pixel sont alignés, quel que soit le contenu de chaque cadre.
Pourquoi est-ce important d’aligner les boutons d’appel à l’action ?
Les boutons CTACTA signifie "call-to-action" en anglais, ce qui se traduit par "appel à l'action" en français. Un CTA est un bouton, ... sont des éléments clés dans la conversion de vos visiteurs en clients ou en leads. Un design cohérent et harmonieux, où chaque bouton est aligné correctement, renforce la lisibilité et l’esthétique de votre site.
Étapes pour aligner les boutons dans un carrousel Divi Pixel
1. Analyser le problème d’alignement
Une fois votre moduleUn module est un élément préconçu et personnalisable de Divi, tel que des textes, des images, des galeries ou encore... complété, faites défiler le caroussel pour voir si celui-ci semble harmonieux. Si vous êtes dans le cas de la capture ci-dessous avec des boutons non alignés, lisez la partie suivante.
2. Ajouter du CSS personnalisé pour uniformiser l’alignement des boutons
Pour résoudre ce problème, vous devrez ajouter du CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... personnalisé à votre site. Ce code va forcer chaque cadre du carrousel à avoir la même hauteur et à aligner les boutons CTACTA signifie "call-to-action" en anglais, ce qui se traduit par "appel à l'action" en français. Un CTA est un bouton, ... en bas de chaque cadre, même si le contenu est différent. Voici le code personnalisé à utiliser :
/*Aligner les boutons du caroussel Divi Pixel*/
.dipi-carousel-button-wrapper {
margin-top: auto;
flex: initial !important;
}
.dipi_carousel_child .dipi-carousel-item-content {
height: 100%;
}
.dipi-carousel-child-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.dipi_carousel_child .et_pb_module_inner {
height: 100%;
}3. Implémenter le CSS dans Divi
Pour ajouter ce CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... personnalisé, suivez ces étapes :
- Allez dans le tableau de bord de WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac....
- Rendez-vous dans Divi > Options du thèmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè....
- Allez dans Personnaliser CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos....
- Collez le code ci-dessus.
Ce code fait en sorte que chaque cadre du carrousel occupe la même hauteur, et que les boutons CTACTA signifie "call-to-action" en anglais, ce qui se traduit par "appel à l'action" en français. Un CTA est un bouton, ... soient toujours alignés en bas du cadre, peu importe la hauteur du contenu.
Résultats après l’application du CSS
Une fois ce CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... appliqué, vous constaterez que tous les boutons de votre carrousel Divi Pixel sont parfaitement alignés. Le carrousel aura désormais un aspect plus professionnel et homogène, ce qui améliorera l’expérience utilisateur sur votre site.
Enrichir votre carrousel avec Divi Pixel
Vous souhaitez aller plus loin dans la personnalisation de votre carrousel ? Divi Pixel offre une variété d’options pour personnaliser vos boutons et ajouter des effets spéciaux qui attireront encore plus l’attention de vos visiteurs. Explorez toutes les configurations possibles pour optimiser encore davantage l’apparence et l’efficacité de vos carrousels.
Pour en savoir plus sur Divi Pixel, cliquez sur la bannière ci-dessous (lien affilié).
Besoin d’aide sur votre site Divi ?
Si vous rencontrez encore des difficultés ou si vous avez des questions spécifiques sur l’utilisation de Divi Pixel, n’hésitez pas à faire appel à notre service d’accompagnement personnalisé. Nous sommes là pour vous aider à créer un site web qui répond parfaitement à vos besoins.
