Tutoriel Wordpress du 18/08/2019

Apparition au Scroll

type

niveau

extensions

résultat fini

Wordpress

débutant

elementor + Pro

resultat

objectif du Tutoriel

Dans ce tutoriel, nous allons voir comment afficher une image dans un cercle.

La première méthode qui vient à l’esprit est de préparer une image avec Photoshop et d’intégrer un masque sous forme de cercle. C’est effectivement une méthode rapide mais qui présente quelques inconvénients. Notamment celui de ne pas être aussi souple que notre méthode faite uniquemement avec Elementor.

Ajoutez votre texte de titrage ici

Pour ce tutoriel,  nous allons tout d’abord importer une image dans notre mise en page.

Cliquez pour agrandir l'image

Créons une nouvelle section.

Cliquez pour agrandir l'image

Dans la section nouvellement créée, nous allons ajouter un widget Image.

Faites-le glisser dans la section que vous venez de créer.

Cliquez pour agrandir l'image

Sélectionnez maintenant votre image pour l’importer dans la mise en page.

Cliquez pour agrandir l'image

Et voilà. Votre image est maintenant affichée dans la section.

Cliquez pour agrandir l'image

Nous allons maintenant arrondir les angles. Pour ce faire rendez-vous sur l’onglet STYLE.

Cet onglet donne accès à plusieurs paramètres relatifs au Style du Widget d’Elementor.
Celle qui nous intéresse est la section nommée BORDURE. Comme son nom l’indique elle permet de créer des bordures à l’élément sélectionné.

Il y a plusieurs paramètres pour ce contrôle. Ceux qui nous intéressent sont regroupés sous le nom de Rayon de Bordure. C’est comme cela que nous allons arrondir les bords de notre image.

Cliquez pour agrandir l'image

Tapez une ou plusieurs valeurs dans la boite Rayon de Bordure et admirez le résultat !

N’oubliez pas de décocher le cadenas à droites des cases afin de pouvoir entrer des valeurs différentes pour chaque côté de l’image.

Et voilà. Vous n’avez plus qu’à expérimenter afin d’obtenir le résultat que vous souhaitez.

Pour une image ronde, il vous faudra une image carrée.

Merci de votre attention et à bientôt pour un nouveau tuto.

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Laisser un commentaire

Partager sur facebook
Partager sur twitter
Partager sur linkedin