J’aimerais qu’une image aux bords rectangulaires s’affiche en forme arrondie, mais je ne dispose pas d’outils de mise en page et je ne veux pas m’embêter avec le CSS. Que puis-je faire ?

METHOD 1:

Rendez-vous dans le Tableau de bord > Yootheme > Pages et trouver la page ou l’article que vous voulez éditer.

Survolez l’élément requis avec la souris et choisissez l’icone de stylo.

Cela va ouvrir le panneau gauche avec trois options en haut : Contenu, Paramètres et Avancé. Cliquez sur la partie Contenu > IMAGE et téléverser/choisissez l’image que vous voulez afficher.

En suite, dans le panneau gauche qui est ouvert, choisissez Paramètres > IMAGE.

Puis, trouvez l’option Bordure > Cercle. Le résultat est le suivant :

METHOD 2 (AVEC UN PEUT DE CSS) :

Si nous somme alaise avec le CSS, nous pouvons tout d’abord inspecter l’image en faisant le click droit sur l’image avec le souris.

Voici le menu contextuel qui s’afficher avec l’option Inspecter en bas: 

Une fois on a choisi l’option Inspecter de menu contextuel, une fenêtre va s’ouvrir (à cote ou en bas de page) avec le code source HTML de la page web.

La partie concernée est en couleur de fond gris, comme on le vois sur l’image suivante.

Maintenant, direction la configuration de la page dans l’administration du site web.

On trouve le module en question soit en défilement le panneau du configuration soit en survolent le module avec l’image directement dans la page.

Entrez dans le module et sélectionnez l’option Avancée, située en haut à droite du module.

Dans le champs CSS, il faut ajouter le code CSS suivant :

 .el-image: {
border-radius: 50%;
}

C’est la facon courte de s’assurer que chaque angle de l’image soit parfetement arrondi.

Le résultat est afficher sur l’image suivante :

Au final, n’oubliez pas de sauvegarder les modifications en appuyant sur le bouton Sauvegarder layout en haut du module !

GO4SHOP !