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;
}
