Utiliser l'option CSS pour créer des pages

Créer des pages plus complexes, plus faciles à modifier et plus dynamiques, c'est possible avec l'outil de création de page.

Vous pouvez aller encore plus loin en appliquant des class et ID pour affecter un style uniquement au contenu d'une ligne donnée, sans changer les styles des autres lignes de la page.

Ce tutoriel nécessite d'avoir des notions en CSS mais notez qu'il est possible d'ajouter plus simplement des styles dans des pages ou sur des images

l'option CSS

Définitions

Le CSS: c'est le langage qui est utilisé pour définir l'aspect de votre site.

Pour personnaliser le design de votre site, vous pouvez utiliser des formulaires dans Configuration > Apparence >  Personnaliser. Vous pouvez aussi surcharger du CSS dans des zones supplémentaires ou encore personnaliser le design de votre site entièrement en CSS en activant le mode expert. Pour plus d'informations à ce sujet, nous vous recommandons la lecture du tutoriel: choisir un thème et personnaliser le design.

Une class et un ID. Ce sont des attributs qui servent à appliquer des styles CSS à du contenu dans une page. Il n'y a pas beaucoup de différence entre ces deux attributs. Notez cependant qu'un ID ne peut être utilisé qu'une seule fois dans une page. Vous pourrez utiliser les ID comme des ancres (c'est à dire pour créer un lien vers un endroit précis dans une page).

Les ID sont déclarés dans la feuille de style avec le signe dièse (#nom-de-l-id). Les class sont définies avec un point (.nom-de-la-class).

Exemple de réalisation : modifier les styles d'un texte avec un ID

Il est possible de mettre en forme du texte avec la barre d'outils de l'éditeur visuel (comme mettre en gras, en italique, changer la taille ou le type de police). Cependant, il est préférable de le faire en CSS si vous savez que ces styles devront être utilisés plusieurs fois sur différentes pages de votre site. C'est le cas dans notre exemple ci dessous.

Création de l'ID dans une zone CSS

Pour ajouter du CSS à votre thème existant :

  • Rendez vous dans Configuration > Apparence > Personnaliser.
  • Tout en bas, cliquez sur Modifier / Ajouter du code CSS.
  • Ce code CSS viendra s'ajouter au CSS du thème.
  • Si vous changez de thème, ce CSS ne sera pas conservé.

Affectation de l'ID à la ligne

  • L'ID est créé dans Configuration > Apparence > Personnaliser.
  • Sachez que vous pouvez aussi le créer dans Configuration > Réglages > Zones éditables, dans la partie Zones CSS supplémentaires.
  • Pour affecter l'ID à la ligne, modifiez votre page, cliquez sur le bouton Apparence (qui se trouve en bas et à gauche de chaque ligne), sélectionnez le style Avancé (class/ID) puis indiquez le nom de l'ID que vous avez créé.

Les styles définis pour l'ID "introduction" seront appliqués au contenu du bloc. C'est à dire que le texte de ce bloc fera 15px, il aura une bordure noire de 2px, le texte sera justifié etc etc. Vous ne pourrez pas utiliser deux fois cet ID dans cette page.

Avant l'application des styles

Après avoir appliqué l'ID et ses styles

expert e-monsite

Les experts en webdesign

Si vous avez besoin de conseils en webdesign ou d'une retouche en CSS, vous pouvez contacter nos experts e-monsite.

Ils seront aussi en mesure de vous proposer une amélioration graphique de votre site.