Avez-vous déjà eu envie de créer un effet de reflet de verre de vos images sur WordPress ? Dans ce nouveau tutoriel, nous allons vous présenter comment le faire avec le puissant Page Builder Elementor.

Il faut déjà savoir que dans ce tutoriel, vous aurez besoin de la version Pro d’Elementor, car nous utiliserons du code personnalisé.

Si vous ne comprenez pas ce que nous souhaitons réaliser dans ce tutoriel, regardez la vidéo suivante :

Ensuite revenons vers ce pourquoi nous sommes là.

Consultez aussi : Comment créer un titre dégradé avec Elementor

Créons une nouvelle section de trois colonnes, ensuite modifions la Hauteur sur Hauteur Min et sur Hauteur Minimum cliquons sur VH, puis réglons le curseur sur 100

Dans l’onglet Style, sélectionnons la couleur noire pour l’arrière-plan

Lire aussi : Comment créer un magnifique menu déroulant avec Elementor

Faisons glisser le widget Image dans la colonne du milieu, ensuite recherchez dans votre bibliothèque l’image dont vous souhaitez créer le reflet et insérez là.

Dans l’onglet Avancé, allons dans Custom CSS et collons le code suivant :

/*effet de réflexion */
selector{
    -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, rgba(0,0,0,.5));
}

A ce moment vous verrez le reflet apparaitre sous l’image.

Ensuite copions et collons à la suite du code précédent le code ci-dessous qui fera roter l’image au survol de la souris.

/*Effet de Rotation */
selector{
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: perspective(800px) rotateY(20deg);
            transform: perspective(800px) rotateY(20deg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
selector:hover{
    -webkit-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

Le résultat sera le suivant :

Et voilà comment vous pouvez désormais créer un effet de reflet de verre de vos images sur WordPress grâce au page Builder Elementor

Obtenez Elementor Pro Maintenant !

Conclusion

Voila ! C’est tout pour cet article qui vous montre comment créer un effet de reflet de verre avec Elementor. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

…