- Créer un site
- Tutoriels
- Pages
- Personnaliser le style de ses images

Personnaliser le style de ses images
Ajoutez facilement des styles sur vos images pour les afficher différemment : grâce à cette option, vous pouvez désormais appliquer un effet polaroid, arrondi ou afficher votre image dans un cercle.
Vous avez aussi la liberté d'appliquer la class de votre choix sur une image, mais c'est un mode d'utilisation avancé.
Voyons ensemble dans ce tutoriel comment personnaliser vos images dans les pages.
Une option réservée aux sites responsive
Cette option fonctionne uniquement si avez appliqué un thème responsive (tous les nouveaux thèmes le sont). En effet, ce sont des class natives du Framework Bootstrap (à partir duquel sont conçus les thèmes responsive). Nous vous avons simplifié la démarche pour intégrer ces styles facilement sur vos images !
Pour tester cette option, rendez-vous dans Pages > Gérer les pages
. Mais vous pouvez appliquer ces styles pour des images dans un billet sur le blog ou encore dans un menu vertical.
Image avec un style = Polaroid
Image avec un style = Rond
Image avec un style = Arrondi
Ajouter ces styles sur une image
Ajoutez une image dans votre une page ou un article sur votre blog.
- Si l'image se trouve sur votre ordinateur, il faut la télécharger dans votre espace de stockage.
- Sélectionnez le format d'affichage, la disposition de l'image puis choisissez le style que vous voulez donner à votre image (Arrondi, Rond ou Polaroid).
- Insérez votre image et c'est terminé ! Cela fonctionne aussi bien à partir du widget Images que depuis l'éditeur visuel.
Pour les utilisateurs à l'aise avec le CSS
A partir du moment où vous avez la possibilité de modifier le code HTML, il est possible d'appliquer une class sur une image.
Dans Configuration > Apparence > Personnalisé
, vous disposez d'une zone tout en bas du formulaire de personnalisation pour ajouter du CSS supplémentaire et déclarer vos class ou vos ID.
Vous avez remarqué qu'une 4e option apparaissait au niveau du champ "style" dans le widget Image ? Le mode "Avancé" vous permet d'ajouter un style personnalisé (class ou ID).
Notez que vous pouvez combiner plusieurs class, pour avoir par exemple une image ronde avec un effet polaroid. Pour en savoir plus sur la création de class ou d'ID, nous vous invitons à lire notre tutoriel dédié ou consulter des cours de CSS en ligne.
Ces tutoriels pourraient aussi vous aider :
Le mode Avancé (class/ID)
Appliquez des class ou des ID sur des lignes de contenu pour créer des pages au design encore plus personnalisé !
Ajouter des styles
Ajoutez des effets au survol ou en surbrillance sur vos contenus, pour faire ressortir du texte ou des images.