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.
intro
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
- 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.
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.
Bloc avec fond de couleur 1
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 bleu
BLoc avec fond de couleur 2
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 couleur vert
Bloc avec fond de couleur 3
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 orange
Bloc avec fond clair
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
Bloc avec fond 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
Bloc 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 bleu rayon
Bloc 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
Bloc 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
Bloc avec contour en pointillé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.
bloc contour pointilles
Bloc avec double contour
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 double contour
Bloc 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
Bloc avec fond transparent
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 transparent
Blocs & boutons « Call to action »
D’autres styles et effets de boutons et de blocs d’appel à action
appel-a-action couleur bleu + bouton coul-2
appel-a-action clair + bouton coul-2
appel-a-action sombre + bouton coul-1
bouton coul-1
bouton petit coul-1
bouton coul-2
bouton coul-3
bouton coul-4
