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.
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.
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.
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.
