Arrondir une image avec Elementor

Tutoriel pour arrondir une image avec Elementor
SOMMAIRE

ETAPE 1 : Insérer une image

Ajoutez une image grâce au module Image à l’endroit que vous le souhaitez sur votre page ou article construit avec Elementor.

Le format de votre image n’a pas d’importance avec cette solution.
Le contenu important de l’image doit néanmoins être au centre.

ajouter une image avec le constructeur de pages Elementor
Elementor > Image

ETAPE 2 : Activer l'option masque

Sur votre image, rendez-vous sur l’onglet « Avancé » puis l’entrée « Masque ». En déroulant cette section, vous pouvez activer un Masque.

Par défaut, Elementor va vous proposer le masque « Cercle », ce qui permet directement d’arrondir votre image sans coder ! Idéal pour des photos individuelles de votre équipe ou pour présenter votre mascotte.

Bonne nouvelle ! Cette option est disponible sur la version gratuite d’Elementor.

Paramètre permettant d'ajouter un masque rond sur l'image
Image > Avancé > Masque > Cercle

ETAPE 3 : Possibilité de créer un masque personnalisé

Plusieurs options sont disponibles dans cette section « Masque » : vous pouvez choisir le masque « Esquisse » ou même créer votre propre masque en ajoutant un fichier svg.

N’hésitez pas à essayer les entrées Taille et Position pour optimiser le rendu de votre masque.

N’oubliez pas de mettre à jour votre création avant de tester.

Possibilité d'ajouter un masque différent et même d'en créer un
Image > Avancé > Masque > Esquisse

Conseil Bonus

Cette solution est très simple et évite de "bricoler" des images arrondies sur Photoshop ou Canva. Néanmoins, si vous avez des compétences sur ces outils, il est préférable de travailler son image avant de l'ajouter sur votre page. Cette option de masque ajoute du code pouvant alourdir légèrement votre page.

Concepteur de site web freelance entre Saint Etienne et Lyon

Spécialisé dans l’utilisation d’Elementor depuis 2019, je vous apporte une aide personnalisée lors de la création de votre site web.

Retrouvez tous mes tutos Elementor

Blocage Elementor

30 min pour vous aider

Vous n’avez pas la solution pour faire ce que vous souhaitez sur Elementor ou WordPress lors de la création de votre site ?
Je vous propose de vous aider ou de vous conseiller gratuitement afin d’avancer sereinement sur votre projet.