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 h5
h5-bold
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 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 coul-1
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 coul-2
Bloc avec fond de couleur 3
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 coul-3
Colonne 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 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 sombre
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 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 coul-1 rayon
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
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-sombre
bouton coul-claire
bouton coul-1 petit
Bloc de renseignements
Titre bloc de renseignements
Texte d’introduction ….
Adresse : 6 place Michel-de-L’Hospital 63000 Clermont-Ferrand Voir sur une carte
adresse
Transports :
- En tramway : Maison de la culture
- En bus : Plan du réseau quartier Maison de la culture – Universités [PDF]
chemin
Horaires : Du lundi au jeudi de 8h30 à 12h et de 14h à 17h30 / Fermé le vendredi
horaires
Nom de la salle : L’Olympia
billetterie
Téléphone : +33 (0)4 xx xx xx xx
telephone
Mail : xxxxx@gmail.com
mail
Info …
info
Site Internet : https://www.monsiteinternet.com
web
telecharger
Votre contact : Damien Dozolme
contact
17
euro
rs_instagram
rs_facebook
rs_vimeo
rs_linkedin
Colonnes avec bordures verticales
Colonne 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu egestas odio. Proin nec consectetur tellus, at facilisis enim.
Colonne 2
Nullam sit amet tortor tincidunt, rutrum dolor id, tincidunt sem. Vivamus libero mauris, aliquam et viverra nec, sagittis ac mauris.
Colonne 3
Nulla nec orci libero. Phasellus eu felis eu urna facilisis maximus. Vestibulum tempus lectus vitae eros finibus mollis. Vestibulum eu tempus erat.
bordure-verticale
Exemple de menu accordéon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum, tortor varius auctor sollicitudin, leo risus hendrerit velit, nec cursus libero velit vel ante. Nulla lobortis lacus eu odio rutrum, eget interdum nisi volutpat. Pellentesque quis imperdiet eros. Proin mattis ultricies orci sit amet bibendum. Suspendisse fringilla efficitur eros, vel eleifend dolor interdum vitae. Vestibulum vitae ipsum at lectus ullamcorper cursus. Phasellus et aliquet nibh. Nullam et dapibus magna, vel vestibulum ex.
Nulla porttitor magna et dictum tincidunt. Ut efficitur vulputate ex, et mattis justo tincidunt vel. Duis vel diam porttitor, convallis velit eu, auctor ante. Etiam sagittis lectus quis ante tristique molestie. Sed ac feugiat lacus. Pellentesque ac imperdiet ipsum, et dictum sapien. Etiam sollicitudin leo nec erat varius laoreet.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aliquam nec magna nec dolor congue rutrum ac a lacus.
- In pellentesque est et magna efficitur condimentum.
- Ut a nibh at eros ultrices condimentum.
- Mauris egestas erat eu tincidunt dapibus.
- Morbi aliquet orci id ipsum porttitor ultrices.
Nulla porttitor magna et dictum tincidunt. Ut efficitur vulputate ex, et mattis justo tincidunt vel. Duis vel diam porttitor, convallis velit eu, auctor ante. Etiam sagittis lectus quis ante tristique molestie. Sed ac feugiat lacus. Pellentesque ac imperdiet ipsum, et dictum sapien. Etiam sollicitudin leo nec erat varius laoreet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum, tortor varius auctor sollicitudin, leo risus hendrerit velit, nec cursus libero velit vel ante. Nulla lobortis lacus eu odio rutrum, eget interdum nisi volutpat. Pellentesque quis imperdiet eros. Proin mattis ultricies orci sit amet bibendum. Suspendisse fringilla efficitur eros, vel eleifend dolor interdum vitae. Vestibulum vitae ipsum at lectus ullamcorper cursus. Phasellus et aliquet nibh. Nullam et dapibus magna, vel vestibulum ex.
- Morbi aliquet orci id ipsum porttitor ultrices.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aliquam nec magna nec dolor congue rutrum ac a lacus.
- Ut a nibh at eros ultrices condimentum.
- Mauris egestas erat eu tincidunt dapibus.
Ut efficitur vulputate ex, et mattis justo tincidunt vel. Duis vel diam porttitor, convallis velit eu, auctor ante. Etiam sagittis lectus quis ante tristique molestie. Sed ac feugiat lacus. Pellentesque ac imperdiet ipsum, et dictum sapien. Etiam sollicitudin leo nec erat varius laoreet.
- Morbi aliquet orci id ipsum porttitor ultrices.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aliquam nec magna nec dolor congue rutrum ac a lacus.
- Ut a nibh at eros ultrices condimentum.
- Mauris egestas erat eu tincidunt dapibus.
Nulla porttitor magna et dictum tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum, tortor varius auctor sollicitudin, leo risus hendrerit velit, nec cursus libero velit vel ante. Nulla lobortis lacus eu odio rutrum, eget interdum nisi volutpat. Pellentesque quis imperdiet eros. Proin mattis ultricies orci sit amet bibendum.
Les images
Diaporama plusieurs images en même temps
Diaporama 1 seule image à la fois
galerie d’images
0
Films
coul-1
0
Films
coul-clair
0
Films
coul-2
0
Films
coul-sombre
0
Films
coul-3