Class Bootstrap

Polaroid, cercle ou arrondi : personnalisez le style de vos images

Le vendredi, 13 mars 2015

Dans Nouveautés sur e-monsite

Si vous avez appliqué un thème responsive, vous pouviez déjà utiliser les class natives de Bootstrap pour modifier l'apparence de vos images : ce qui était assez compliqué pour les webmasters débutants car cela nécessitait des notions en html et/ou css ! En plus de pouvoir modifier la disposition ou la taille de l'image, il est désormais possible de leur appliquer des styles plus facilement : images rondes, arrondies ou format polaroid : c'est à vous de choisir !

Changer le style de ses images : pourquoi faire ?

L'objectif est de faciliter la personnalisation et l'insertion de photos en vous proposant une option qui rendra votre site attractif et original, sans avoir à mettre les mains dans le CSS ou le HTML. Osez l'originalité et sortez des sentiers battus en proposant un site de plus en plus personnalisé ! Pour vous donner deux exemples, nous avons utilisé le style Rond autour des photos de l'équipe e-monsite et l'effet Polaroid sur les images des tutoriels

Equipe ems

Cette fonctionnalité est compatible uniquement avec les thèmes responsive (tous ceux présents dans la liste des thèmes actuellement). Nous vous invitons donc à changer de thème graphique si celui appliqué à votre site n'est pas responsive.

Comment changer ou ajouter un style sur une image ? 

Insérez une image (à partir de l'éditeur visuel ou du widget Image) puis choisissez un style. Cette option se trouve à l'endroit où vous choisissez le titre, le format ou la disposition de l'image : vous disposez maintenant d'un champ "Style".  Pour en savoir plus nous vous invitons à consulter notre tutoriel dédié : personnaliser le style de ses images

Select style image

Pour les utilisateurs à l'aise avec le CSS, vous disposez aussi d'un style "Avancé", pour insérer la (ou les) class et ID de votre choix sur une image. Pour en savoir plus à ce sujet, nous vous recommandons la lecture de notre tutoriel : appliquer des class et des ID

Exemple class

Images Personnalisation