Page avec styles de référence
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.
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. Coucou.
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).
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.
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.
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 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
Colonne 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
Colonne avec contour solide bleu
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-bleu solide
Colonne avec contour en tirets bleu
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-bleu tirets
Colonne avec contour en pointillés bleu
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-bleu pointilles
Colonne avec double contour bleu
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-bleu double
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.
bouton coul-1
bouton coul-2
bouton coul-3
bouton coul-3 icone
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
Sur la rangée : 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 contour tirets
Sur la colonne : bloc sombre rayon
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
In commodo sapien magna, in bibendum sem lacinia at. Quisque bibendum massa sed porta consequat. Duis hendrerit dui sed diam euismod scelerisque. Nunc auctor sem a dui aliquet semper. Phasellus interdum mollis dolor, at volutpat elit condimentum vitae. Praesent elementum, nunc id suscipit posuere, nisl velit scelerisque orci, vitae euismod ipsum felis eu ligula. Vivamus finibus, erat faucibus viverra condimentum, lorem nulla sollicitudin augue, et posuere libero arcu sit amet erat. Phasellus lobortis, mi ac laoreet dignissim, ante elit euismod ex, vel rutrum tellus tortor at leo. Nulla lacinia commodo enim quis egestas. Pellentesque eu magna risus. Integer tempor accumsan dolor, eu eleifend ligula pretium ut. Curabitur nec nisi eu lectus hendrerit posuere. Nam quis enim eleifend, facilisis tortor et, malesuada sem. Quisque euismod a velit et vestibulum.
Exemple de titre
Pellentesque velit est, ultrices sit amet dolor venenatis, tempor malesuada felis. Aliquam nec porttitor lectus. Etiam hendrerit felis sed justo commodo, quis suscipit arcu cursus. Nam at nulla semper tortor sodales consequat eu at nulla. In eu consequat nisl, non ultricies turpis. Pellentesque ac mattis est. Etiam eu magna sit amet augue euismod scelerisque ac a felis. Suspendisse in fermentum quam. Quisque luctus risus vel lacinia congue. Aliquam interdum fermentum dui et dignissim. Nulla facilisi. Sed efficitur ante eros, sit amet pellentesque nulla malesuada vel. Sed tristique velit vel mi egestas sagittis. Morbi justo libero, varius a sagittis eu, rhoncus ac enim.
onglets couleur
In commodo sapien magna, in bibendum sem lacinia at. Quisque bibendum massa sed porta consequat. Duis hendrerit dui sed diam euismod scelerisque. Nunc auctor sem a dui aliquet semper. Phasellus interdum mollis dolor, at volutpat elit condimentum vitae. Praesent elementum, nunc id suscipit posuere, nisl velit scelerisque orci, vitae euismod ipsum felis eu ligula. Vivamus finibus, erat faucibus viverra condimentum, lorem nulla sollicitudin augue, et posuere libero arcu sit amet erat. Phasellus lobortis, mi ac laoreet dignissim, ante elit euismod ex, vel rutrum tellus tortor at leo. Nulla lacinia commodo enim quis egestas. Pellentesque eu magna risus. Integer tempor accumsan dolor, eu eleifend ligula pretium ut. Curabitur nec nisi eu lectus hendrerit posuere. Nam quis enim eleifend, facilisis tortor et, malesuada sem. Quisque euismod a velit et vestibulum.
Exemple de titre
Pellentesque velit est, ultrices sit amet dolor venenatis, tempor malesuada felis. Aliquam nec porttitor lectus. Etiam hendrerit felis sed justo commodo, quis suscipit arcu cursus. Nam at nulla semper tortor sodales consequat eu at nulla. In eu consequat nisl, non ultricies turpis. Pellentesque ac mattis est. Etiam eu magna sit amet augue euismod scelerisque ac a felis. Suspendisse in fermentum quam. Quisque luctus risus vel lacinia congue. Aliquam interdum fermentum dui et dignissim. Nulla facilisi. Sed efficitur ante eros, sit amet pellentesque nulla malesuada vel. Sed tristique velit vel mi egestas sagittis. Morbi justo libero, varius a sagittis eu, rhoncus ac enim.
onglets clair
In commodo sapien magna, in bibendum sem lacinia at. Quisque bibendum massa sed porta consequat. Duis hendrerit dui sed diam euismod scelerisque. Nunc auctor sem a dui aliquet semper. Phasellus interdum mollis dolor, at volutpat elit condimentum vitae. Praesent elementum, nunc id suscipit posuere, nisl velit scelerisque orci, vitae euismod ipsum felis eu ligula. Vivamus finibus, erat faucibus viverra condimentum, lorem nulla sollicitudin augue, et posuere libero arcu sit amet erat. Phasellus lobortis, mi ac laoreet dignissim, ante elit euismod ex, vel rutrum tellus tortor at leo. Nulla lacinia commodo enim quis egestas. Pellentesque eu magna risus. Integer tempor accumsan dolor, eu eleifend ligula pretium ut. Curabitur nec nisi eu lectus hendrerit posuere. Nam quis enim eleifend, facilisis tortor et, malesuada sem. Quisque euismod a velit et vestibulum.
Exemple de titre
Pellentesque velit est, ultrices sit amet dolor venenatis, tempor malesuada felis. Aliquam nec porttitor lectus. Etiam hendrerit felis sed justo commodo, quis suscipit arcu cursus. Nam at nulla semper tortor sodales consequat eu at nulla. In eu consequat nisl, non ultricies turpis. Pellentesque ac mattis est. Etiam eu magna sit amet augue euismod scelerisque ac a felis. Suspendisse in fermentum quam. Quisque luctus risus vel lacinia congue. Aliquam interdum fermentum dui et dignissim. Nulla facilisi. Sed efficitur ante eros, sit amet pellentesque nulla malesuada vel. Sed tristique velit vel mi egestas sagittis. Morbi justo libero, varius a sagittis eu, rhoncus ac enim.
onglets sombre
In commodo sapien magna, in bibendum sem lacinia at. Quisque bibendum massa sed porta consequat. Duis hendrerit dui sed diam euismod scelerisque. Nunc auctor sem a dui aliquet semper. Phasellus interdum mollis dolor, at volutpat elit condimentum vitae. Praesent elementum, nunc id suscipit posuere, nisl velit scelerisque orci, vitae euismod ipsum felis eu ligula. Vivamus finibus, erat faucibus viverra condimentum, lorem nulla sollicitudin augue, et posuere libero arcu sit amet erat. Phasellus lobortis, mi ac laoreet dignissim, ante elit euismod ex, vel rutrum tellus tortor at leo. Nulla lacinia commodo enim quis egestas. Pellentesque eu magna risus. Integer tempor accumsan dolor, eu eleifend ligula pretium ut. Curabitur nec nisi eu lectus hendrerit posuere. Nam quis enim eleifend, facilisis tortor et, malesuada sem. Quisque euismod a velit et vestibulum.
Exemple de titre
Pellentesque velit est, ultrices sit amet dolor venenatis, tempor malesuada felis. Aliquam nec porttitor lectus. Etiam hendrerit felis sed justo commodo, quis suscipit arcu cursus. Nam at nulla semper tortor sodales consequat eu at nulla. In eu consequat nisl, non ultricies turpis. Pellentesque ac mattis est. Etiam eu magna sit amet augue euismod scelerisque ac a felis. Suspendisse in fermentum quam. Quisque luctus risus vel lacinia congue. Aliquam interdum fermentum dui et dignissim. Nulla facilisi. Sed efficitur ante eros, sit amet pellentesque nulla malesuada vel. Sed tristique velit vel mi egestas sagittis. Morbi justo libero, varius a sagittis eu, rhoncus ac enim.
accordeon couleur
In commodo sapien magna, in bibendum sem lacinia at. Quisque bibendum massa sed porta consequat. Duis hendrerit dui sed diam euismod scelerisque. Nunc auctor sem a dui aliquet semper. Phasellus interdum mollis dolor, at volutpat elit condimentum vitae. Praesent elementum, nunc id suscipit posuere, nisl velit scelerisque orci, vitae euismod ipsum felis eu ligula. Vivamus finibus, erat faucibus viverra condimentum, lorem nulla sollicitudin augue, et posuere libero arcu sit amet erat. Phasellus lobortis, mi ac laoreet dignissim, ante elit euismod ex, vel rutrum tellus tortor at leo. Nulla lacinia commodo enim quis egestas. Pellentesque eu magna risus. Integer tempor accumsan dolor, eu eleifend ligula pretium ut. Curabitur nec nisi eu lectus hendrerit posuere. Nam quis enim eleifend, facilisis tortor et, malesuada sem. Quisque euismod a velit et vestibulum.
Exemple de titre
Pellentesque velit est, ultrices sit amet dolor venenatis, tempor malesuada felis. Aliquam nec porttitor lectus. Etiam hendrerit felis sed justo commodo, quis suscipit arcu cursus. Nam at nulla semper tortor sodales consequat eu at nulla. In eu consequat nisl, non ultricies turpis. Pellentesque ac mattis est. Etiam eu magna sit amet augue euismod scelerisque ac a felis. Suspendisse in fermentum quam. Quisque luctus risus vel lacinia congue. Aliquam interdum fermentum dui et dignissim. Nulla facilisi. Sed efficitur ante eros, sit amet pellentesque nulla malesuada vel. Sed tristique velit vel mi egestas sagittis. Morbi justo libero, varius a sagittis eu, rhoncus ac enim.
accordeon clair
In commodo sapien magna, in bibendum sem lacinia at. Quisque bibendum massa sed porta consequat. Duis hendrerit dui sed diam euismod scelerisque. Nunc auctor sem a dui aliquet semper. Phasellus interdum mollis dolor, at volutpat elit condimentum vitae. Praesent elementum, nunc id suscipit posuere, nisl velit scelerisque orci, vitae euismod ipsum felis eu ligula. Vivamus finibus, erat faucibus viverra condimentum, lorem nulla sollicitudin augue, et posuere libero arcu sit amet erat. Phasellus lobortis, mi ac laoreet dignissim, ante elit euismod ex, vel rutrum tellus tortor at leo. Nulla lacinia commodo enim quis egestas. Pellentesque eu magna risus. Integer tempor accumsan dolor, eu eleifend ligula pretium ut. Curabitur nec nisi eu lectus hendrerit posuere. Nam quis enim eleifend, facilisis tortor et, malesuada sem. Quisque euismod a velit et vestibulum.
Exemple de titre
Pellentesque velit est, ultrices sit amet dolor venenatis, tempor malesuada felis. Aliquam nec porttitor lectus. Etiam hendrerit felis sed justo commodo, quis suscipit arcu cursus. Nam at nulla semper tortor sodales consequat eu at nulla. In eu consequat nisl, non ultricies turpis. Pellentesque ac mattis est. Etiam eu magna sit amet augue euismod scelerisque ac a felis. Suspendisse in fermentum quam. Quisque luctus risus vel lacinia congue. Aliquam interdum fermentum dui et dignissim. Nulla facilisi. Sed efficitur ante eros, sit amet pellentesque nulla malesuada vel. Sed tristique velit vel mi egestas sagittis. Morbi justo libero, varius a sagittis eu, rhoncus ac enim.
accordeon sombre