Mise en forme du texte

La mise en forme du texte apporte de la clarté et de la lisibilité dans les présentations. Il est également important que le texte soit correctement structuré pour le référencement naturel.

Les titres

On peut intégrer jusqu’à 6 niveaux de titres sur une page. Le titre de type « h1 » est le plus important : c’est le titre de la page (Il n’y en a qu’un par page). Pour le référencement, il est primordial de garder une arborescence logique des titres : un « h3 » doit toujours être placé sous un « h2 » par exemple.

Titre de niveau h1

Titre de niveau h2

Titre de niveau h3

Titre de niveau h4

Titre de niveau h5
Titre de niveau h6

Les paragraphes

Les paragraphes de textes peuvent avoir des tailles de texte différentes selon l’importance qu’on veut leur donner visuellement. En terme de « référencement » le fait d’avoir 2 paragraphes différents (avec une taille de caractère plus grande par exemple) ne change rien : un paragraphe reste un paragraphe.

Les listes

Une liste non-ordonnée est une liste d’éléments qui sont généralement affichés après une puce (par défaut ronde mais personnalisable). Une liste ordonnée est une liste d’éléments précédés d’un indicateur ordinal (un nombre ou une lettre).

Les citations

Albert Einstein disait :

La balise blockquote permet d’insérer dans votre page une longue citation. C’est un élément de type ‘bloc’ (il y a un retour à la ligne avant et après le contenu de la balise).

Liste non ordonnée

  • Et prima post quam ut dictum estab,
  • Inter has ruinarum varietates,
  • Et quoniam mirari posse peregrinos,
  • Quibus ita sceleste patratis cruore,
  • Sed quid est quod causa maxime homines.

Liste ordonnée

  1. Et prima post quam ut dictum estab,
  2. Inter has ruinarum varietates,
  3. Et quoniam mirari posse peregrinos,
  4. Quibus ita sceleste patratis cruore,
  5. Sed quid est quod causa maxime homines.

Donner du style et des couleurs à vos contenus

Ajoutez des styles prédéfinis (et optimisés selon votre charte)  aux sections, colonnes et blocs de contenus pour structurer et enjoliver vos contenus.

Colonne avec aplat de couleur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

bloc couleur

Colonne avec aplat de couleur claire

Dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo luctus sed quam in, porttitor sodales elit.

bloc clair

Colonne avec aplat de couleur sombre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

bloc sombre

Colonne avec contour solide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

bloc contour solide

Colonne avec contour en tirets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

bloc contour tirets

Colonne avec bords arrondis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

bloc couleur rayon

Colonne avec une ombre

Lorem ipsum dolor sit amet consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

bloc ombre

Palette de couleurs utilisées

#fbb900

#002d42

#b8cddd

#bae8df

#fbbcb2

#f1f5f9

Blocs & boutons « Call to action »

Ajoutez des styles prédéfinis (et optimisés selon votre charte)  aux sections, colonnes et blocs de contenus pour structurer et enjoliver vos contenus.

Titre du bloc "Call to action"

Sous-titre optionnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porta commodo risus, eu viverra lectus. Aliquam erat volutpat. Phasellus hendrerit mi purus, non congue velit malesuada et maximus efficitur bibendum nec, faucibus in dui.

appel-a-action couleur

Titre du bloc "Call to action"

Sous-titre optionnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porta commodo risus, eu viverra lectus. Aliquam erat volutpat. Phasellus hendrerit mi purus, non congue velit malesuada et maximus efficitur bibendum nec, faucibus in dui.

appel-a-action clair

Titre du bloc "Call to action"

Sous-titre optionnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porta commodo risus, eu viverra lectus. Aliquam erat volutpat. Phasellus hendrerit mi purus, non congue velit malesuada et maximus efficitur bibendum nec, faucibus in dui.

appel-a-action sombre

bouton petit coul-1

bouton petit coul-3

bouton petit coul-5

bouton petit coul-2

bouton petit coul-4

bouton coul-1

bouton coul-2

bouton coul-3

bouton coul-4

bouton coul-5

Exemple avec styles imbriqués

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Titre du paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Sur le bloc de texte :  bloc clair

Sur la colonne :  bloc contour solide

Titre du paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Sur le bloc de texte : bloc contour tirets

Sur la colonne :  bloc sombre rayon

Sur la section :  bloc couleur

Autre exemple avec styles imbriqués

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Titre de paragraphe

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit.Quid enim Africanus indigens minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habeba earum spe causae diligendi profectae.

Titre du paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Sur le bloc de texte :  bloc clair

Titre du paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Sur le bloc de texte :  bloc couleur

Titre du paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Sur le bloc de texte :  bloc clair blanc

Sur la colonne :  bloc sombre pas-de-marge

Titre du paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Sur le bloc de texte : bloc couleur

Titre de paragraphe

Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.

Titre de paragraphe

Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.

Sur le bloc de texte : bloc sombre

Sur la colonne :   bloc clair pas-de-marge