Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Accueil » Divi astuces » Créer des effets d’apparition captivants avec Divi

Créer des effets d’apparition captivants avec Divi

Temps de lecture : 2 mn
Le design web joue un rôle clé dans l’expérience utilisateur en ligne, et les animations subtiles, comme les effets d’apparition, permettent d’ajouter une touche dynamique et professionnelle à un site internet. Avec le thème Divi, l’un des constructeurs de pages les plus populaires pour WordPress, intégrer ces animations devient un jeu d’enfant grâce à ses outils visuels intuitifs et puissants. Dans cet article, nous explorerons comment tirer parti des fonctionnalités natives de Divi pour créer des effets d’apparition captivants. Que vous souhaitiez faire apparaître des éléments en douceur, avec un effet de glissement ou une transition plus spectaculaire, vous découvrirez des techniques pour enrichir vos pages web tout en conservant une navigation fluide et engageante. Préparez-vous à captiver vos visiteurs grâce à des animations qui transformeront l’apparence et l’interactivité de votre site.

Caché


Voici un effet d’apparition plutôt sympa ! N’est ce pas ?
/*blub effect*/ .custom .et_pb_blurb_description{ -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0; } .hover-effect .et_pb_module_header{ -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; position: absolute; bottom: 0px; left: 0; right: 0; } .custom:hover .et_pb_blurb_description { transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; } .custom:hover .et_pb_module_header{ transform: translateY(-15px); position: static!important; } .et_pb_blurb_description p{ padding-left:10px; padding-right:10px; } .et_pb_blurb_description a{ padding-left:0px; padding-right:0px; } .custom .et_pb_blurb_description a{ display: block; width: 100% !important; padding :5px!important; background-color:#27394c; margin-top:10px; } .hover-effect .et_pb_blurb_description a:hover{ color:black!important; font-weight:bold!important; background-color:#1e4baa; } .hover-effect hr{ width:150px; margin-top:-15px; }

Continuer la lecture

Intégrer la balise Google analytics à son site

Google Analytics est un outil indispensable pour suivre les performances de votre site web et comprendre le comportement de vos visiteurs. Si vous utilisez WordPress et le thème Divi, vous avez de la chance, car l’intégration de Google Analytics est à la fois simple...

lire plus