Exemples des différentes sections possibles dans une page
Les différentes pages du site se composent de sections, qui sont des blocs de minimum 480px de hauteur qui vont s’empiler les uns en dessous des autres. Chaque page peut être constituée de ces différentes sections, dans l’ordre voulu. Les sections contiennent des « Colonnes », ces colonnes permettant de strucutre des contenus (texte, photos…).
Sections « Colonnes »
section_colonnes
La section_colonnes permet de répartir le contenu dans des colonnes de différentes tailles. La taille minimale du texte d’une colonne est de 300px.
Il n’y a pas de limite maximale techniquement, mais il est conseillé pour l’accessibilité du contenu de ne pas dépasser 1650 caractères pour l’ensemble de la section ( = le contenu de toutes les colonnes). Si on répartit le contenu de manière homogène, on obtiendra les maximums suivants :
- colonne 1/3 : max. 550 caractères / colonne
- colonne 1/2 : max. 825 caractères / colonne
- colonne 2/3 : max. 1100 caractères / colonne
Chacune des sections d’exemple ci-dessous a un arrière plan contrasté, afin de les distinguer.
Les colonnes 1/1, 3/4 et 2/3 (les plus larges) ne contiennent typiquement que du texte. Les colonnes 1/2 et 1/3 peuvent aussi contenir des illustrations.
La section_colonnes permet également d’intégrer des contenus particuliers : par exemple des formulaires de contact… ce contenu sera généré par un plugin par exemple.
La somme des largeurs des colonnes doit être égale à 1 pour toujours finir les ligne : ex. 1/2 + 1/2, 1/4 + 1/2 + 1/4, etc…
Modèle de mise en page #01
colonne de taille 1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/2 avec illustration
colonne de taille 1/2 avec illustration plus petite
L’illustration est ici plus petite que le gabarit de 500px. Elle est automatiquement centrée dans la colonne, en gardant ses proportions d’origine.
colonne de taille 1/2 avec illustration plus grande
Cette illustration plus large est redimensionnée à 500px de large, en gardant ses proportions d’origine.
Modèle de mise en page #02
colonne de taille 1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 2/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Modèle de mise en page #03
colonne de taille 2/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/3 recentrée
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 2/3 recentrée
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Modèle de mise en page #04
colonne de taille 1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/3 recentrée
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/3 recentrée
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Modèle de mise en page #05
colonne de taille 1/3 avec illustration
La colonne peut également contenir une illustration de maximum 300px de large. Si l’image est plus grande, elle sera afichée dans un gabarit de maximum 300px de large. La hauteur n’a pas d’importance, l’image gardera ses proportions d’origine.
colonne de taille 1/3 avec illustration
L’illustration est ici plus petite en largeur, et est automatiquement centrée dans la colonne. La hauteur est celle du gabarit.
colonne de taille 1/3 avec illustration
L’illustration est ici plus petite en largeur, et est automatiquement centrée dans la colonne. La hauteur est celle d’origine.
Modèle de mise en page #06
colonne de taille 1/3 avec illustration
L’image est plus grande, elle est donc afichée dans un gabarit de maximum 300px de large. La hauteur n’a pas d’importance, l’image gardera ses proportions d’origine.
colonne de taille 1/3 avec illustration
L’illustration est ici plus grande en largeur, et est affichée dans la colonne dans un gabarit de 300px de large. La hauteur n’a pas d’importance, l’image gardera ses proportions d’origine.
colonne de taille 1/3 avec illustration
L’illustration est ici plus petite en largeur, et est automatiquement centrée dans la colonne dans un gabarit de maximum 300px de large. La hauteur n’a pas d’importance, l’image gardera ses proportions d’origine.
Modèle de mise en page #07
colonne de taille 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Modèle de mise en page #08
colonne de taille 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 3/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Modèle de mise en page #09
colonne de taille 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Modèle de mise en page #10
colonne de taille 1/4 centrée
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
colonne de taille 1/4 centrée
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at dui nunc. Donec ornare justo sit amet enim suscipit, et blandit neque porttitor. Duis aliquam maximus volutpat. Nam non risus nibh. Etiam leo neque, interdum sed lacus non, tristique convallis erat. Suspendisse vestibulum dolor nullam.
Modèle de mise en page #11
Les colonnes peuvent contenir du texte, qui peut comme ici, être mis en forme : gras, italique, coloré.
Un centrage est également disponible, ainsi qu’un lien-bouton :
Des listes à puces sont également possibles :
- lorem
- ipsum
- dolor
- sit
- amet
Une illsutration est un autre type de contenu de colonne :