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

Cet article a 7 commentaires

  1. I do not even know how I ended up here, but I thought this post was good.
    I don’t know who you are but certainly you are going to a famous
    blogger if you are not already 😉 Cheers!

  2. 244908 822938Hello there! I could have sworn Ive been to this weblog before but right after checking by means of some with the post I realized it is new to me. Anyhow, Im undoubtedly glad I located it and Ill be bookmarking and checking back often! 14472

Laisser un commentaire

Partager sur facebook
Partager sur twitter
Partager sur linkedin