1. Créer un site
  2. Tutoriels
  3. Pages
  4. Personnaliser le style de ses images
 
Picto widget image

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 ronde

Image avec un style = Polaroid

Image Polaroid

Image avec un style = Rond

Bird03 blue

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

 
 

Ces tutoriels pourraient aussi vous aider :

Option CSS pages

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é ! 

Styles Bootstrap

Ajouter des styles

Ajoutez des effets au survol ou en surbrillance sur vos contenus, pour faire ressortir du texte ou des images.