Créer des images arrondies peut donner un aspect plus moderne et élégant à votre site web.
Si vous utilisez Elementor, vous avez de la chance ! Cet outil puissant facilite grandement la tâche.
Dans ce tutoriel, je vais vous guider pas à pas pour arrondir des images avec Elementor.
Que vous soyez débutant ou utilisateur expérimenté, suivez mes conseils pratiques pour créer un site internet ou pour améliorer l’esthétique de votre site en un rien de temps.
Ajouter le module « Image » d’Elementor
La première étape est simple : accédez à votre page et ajoutez le module « Image ».
Pour ce faire, tapez « Image » dans la barre de recherche d’Elementor ou recherchez-le directement dans la liste des modules disponibles.
Ensuite, en cliquant sur le module, celui-ci sera ajouté à votre page.
Pour cet exemple, j’ai utilisé une page vierge, mais vous pouvez effectuer la même action sur une image dans un conteneur existant et pour une meilleure visibilité, j’ai également réglé la largeur de l’image à 500px.
Utiliser le rayon de bordure pour arrondir vos images sur Elementor
La méthode la plus courante pour arrondir des images consiste à ajuster le rayon de bordure dans Elementor.
En termes simples, vous pouvez définir le niveau d’arrondi en pixels pour chacun des quatre angles de la photo.
Dans la section « Style » de l’image, tout en bas, vous trouverez l’option permettant de modifier cette valeur.
Vous avez :
- Haut : Angle en haut à gauche
- Droite : Angle en haut à droite
- Bas : Angle en bas à droite
- Gauche : Angle en bas à gauche
Il n’est pas obligatoire d’utiliser le même nombre de pixels pour chaque angle.
Vous pouvez spécifier des valeurs différentes pour chaque coin afin de créer le style que vous souhaitez.
Pour ce faire, il vous suffit de cliquer sur :
Pour aller plus loin avec ces rayons, vous pouvez définir une taille fixe (par exemple, carré) pour votre image, puis utiliser les pourcentages (%) au lieu des pixels (px).
Ici, j’ai défini l’image en tant que carré de 500×500 pixels, puis j’ai appliqué un rayon de bordure de 50 % pour la transformer en cercle.
En tant que webmaster WordPress soucieux de la perfection, je vous recommande d’ajuster l’option « Adaptation de l’objet » pour garantir que l’image ne soit pas déformée et conserve une apparence nette.
Utiliser les masques pour arrondir vos images avec Elementor
Il y a une autre façon d’arrondir vos images ou de leur donner des formes variées avec Elementor : utiliser la fonctionnalité « Masque » dans les paramètres avancés de votre module image.
Voici la liste des formes disponibles par défaut :
- Cercle
- Fleur
- Esquisses
- Triangle
- Goutte
- Hexagone
Cependant, vous pouvez ajouter des formes spécifiques en utilisant l’option « Personnalisé » :
C’est très simple : choisissez une image et définissez-la comme le masque de votre image d’origine.
Pour trouver des masques, plusieurs sites sont à votre disposition, notamment SVG Shape Generator, qui vous permet de créer la forme de votre choix et de la télécharger au format SVG.
Rayon de bordure ou masque pour arrondir vos images ?
Le rayon de bordure est largement suffisant si vous souhaitez simplement arrondir légèrement vos images sans utiliser de formes particulières.
Cette méthode est idéale pour donner un aspect plus doux et esthétique à vos visuels en quelques clics.
Cependant, si vous avez besoin de formes sur mesure, la fonctionnalité « Masque » devient essentielle.
Les masques permettent de transformer vos images en diverses formes uniques, ajoutant ainsi une touche créative et personnalisée à votre site.
Personnellement, en tant qu’expert Elementor, j’utilise le rayon de bordure dans la plupart des cas pour arrondir les images, avec des valeurs allant de 10 à 30 pixels.
Cette technique est également parfaite pour créer des images rondes, comme je l’ai montré dans de nombreuses créations de sites internet.
Toutefois, les masques restent une excellente alternative pour des demandes spécifiques nécessitant des formes personnalisées.
