Sections, séparateurs et coutures

Comment le Séparateur découpe la page en sections, ce que deviennent les composants quand on le pose, le déplace ou le supprime, et comment la couture dessine la frontière entre deux sections. Schémas à l'appui.

Une page se construit avec trois pièces : des sections, des composants posés dedans, et des séparateurs qui marquent la frontière entre deux sections. La couture dessine cette frontière : un bord droit, ou bien une vague, une courbe… Cette page explique chaque pièce avec un schéma.

Sections, composants et séparateurs#

1. La section est une bande horizontale qui traverse toute la page. C'est elle qui porte le fond : clair, foncé, dégradé, image ou vidéo.
2. Le composant est un bloc de contenu (titre, texte, photos, formulaire…) posé dans une section. Il n'a pas de fond à lui : il prend celui de sa section, et sur un fond foncé ses textes passent tout seuls en clair.
3. Le séparateur est la frontière entre deux sections. Tout ce qui se trouve sous un séparateur, jusqu'au suivant, appartient à la même section.
4. La barre de la section apparaît en haut à gauche quand vous survolez une section : Arrière-plan de section (la pastille montre le fond actuel), Couture haute, Déplacer cette section et Supprimer le séparateur.

Couper une section en deux : le Séparateur#

1. Cliquez sur Séparateur, le bouton violet de la barre d'outils.
   
2. Des traits violets apparaissent entre les composants, et un dernier tout en bas de la page : ce sont les endroits où la frontière peut aller. Cliquez sur l'un d'eux. Échap annule.
3. Une nouvelle section commence à cet endroit. Le composant situé juste sous le trait, et tous ceux qui le suivent dans la même section, passent dedans.

La nouvelle section démarre avec un fond Clair, des marges de 80 pixels en haut et en bas, et sans couture. Si la section coupée était déjà claire, rien ne change donc à l'écran, c'est normal : ouvrez Arrière-plan de section dans la barre de la nouvelle section pour lui donner son propre fond. Le trait tout en bas de la page, lui, ajoute une section vide, prête à recevoir des composants.

Supprimer ou déplacer un séparateur#

La corbeille de la barre, Supprimer le séparateur, n'efface aucun contenu. Elle retire la frontière : les composants de la section rejoignent la section du dessus et prennent son fond. Le fond et la couture de la section supprimée disparaissent avec elle.

Les flèches de la barre, Déplacer cette section, déplacent la frontière, pas le contenu. Les traits violets réapparaissent : cliquez à l'endroit où la section doit maintenant commencer. Le fond et la couture restent attachés au séparateur. Les composants, eux, ne bougent pas, mais ceux qui se retrouvent de l'autre côté de la frontière changent de section, donc de fond.

Faire changer un composant de section#

Pour déplacer un seul composant, survolez-le, cliquez sur Déplacer ce composant dans sa petite barre orange, puis sur l'emplacement voulu, dans n'importe quelle section. Arrivé dans sa nouvelle section, il en prend le fond : ses textes sombres sur fond clair deviennent clairs sur fond foncé, sans aucun réglage de votre part.

Un composant est toujours entier dans une seule section, jamais à cheval sur deux. Une section dont vous avez retiré tous les composants reste en place avec le badge Section vide : reposez-y un composant, ou supprimez son séparateur.

La couture : la forme de la frontière#

Par défaut, deux sections se touchent par un bord droit. La couture remplace ce bord par une forme : une vague, une courbe, des montagnes… Elle se règle toujours sur la section du dessous, avec son bouton Couture haute : c'est le bord haut de cette section qu'elle dessine.

1. Le bouton Couture haute, dans la barre de la section du dessous. Sa petite image montre la forme choisie ; un cercle barré veut dire « pas de couture ».
2. La forme, peinte de la couleur de la section du dessus : cette couleur semble couler dans la section du dessous.

Le bouton ouvre le panneau Couture (séparateur). Il propose le bord droit (le cercle barré) et onze formes : cliquez sur l'une d'elles, la page change aussitôt, il n'y a rien à valider.

Dans l'ordre : 1 bord droit, 2 vague, 3 vague douce, 4 diagonale, 5 courbe, 6 courbe asymétrique, 7 triangle, 8 triangle asymétrique, 9 zigzag, 10 montagnes, 11 nuages, 12 gouttes.

L'empiétement : où la forme se dessine#

La forme a une hauteur. Le réglage Empiétement dit où la loger par rapport à la frontière. Sur les schémas qui suivent, le trait violet marque la frontière, et les hachures les marges des sections : l'espace libre que chaque section garde au-dessus et au-dessous de son contenu.

Empiétement « aucun » (le réglage par défaut)#

La forme prend sa propre place, en haut de la section du dessous : la page s'allonge de la hauteur de la forme, et rien n'est recouvert. C'est le choix le plus sûr.

Empiétement « dessous »#

La forme descend dans la section du dessous, dans sa marge haute. La page ne s'allonge pas, et le fond du dessus semble couler dans la section.

Empiétement « dessus »#

La forme monte dans la section du dessus, par-dessus sa marge basse, avec le fond de la section du dessous : c'est lui qui semble déborder vers le haut.

Empiétement « centre »#

La forme se pose à cheval sur la frontière, moitié dans chaque section.

Quand la forme cache un composant#

Avec dessus, et pour sa moitié haute avec centre, la forme monte par-dessus le bas de la section du dessus. Tant qu'elle tient dans la marge, tout va bien. Si elle est plus haute que la marge, elle cache le bas du composant. Avec dessous, le composant passe par-dessus la forme, mais s'il la touche, son texte se lit moins bien.

• Agrandissez la marge : dans Arrière-plan de section, rubrique Marges, le champ Haut de la section du dessous pour l'empiétement dessous, le champ Bas de la section du dessus pour l'empiétement dessus, les deux pour centre.
• Baissez la hauteur de la couture.
• Passez l'empiétement sur « aucun » : la forme prend alors sa propre place et ne recouvre plus rien.

Couches, hauteur, largeur et miroir#

Couches : la vague, la vague douce, la courbe, les montagnes et les nuages sont faits de plusieurs couches : une forme pleine devant, et derrière elle une ou deux formes de la même couleur, en transparence. Le réglage Couches choisit combien en garder, en partant de celle de devant : 1 donne une forme simple et nette, le maximum (3 pour la vague, 2 pour les autres) donne de la profondeur. Il n'apparaît que pour ces cinq formes, et choisir une autre forme remet toutes ses couches.

Hauteur : la hauteur de la forme, en pixels (60 par défaut, jusqu'à 200). Sur un téléphone, elle se réduit toute seule, jusqu'à la moitié.

Largeur % : à 100 %, le motif tient exactement dans la largeur de la page. Au-delà (jusqu'à 300 %), il s'étire : les vagues s'allongent et seule la partie centrale du motif reste visible.

Miroir horizontal : retourne la forme de gauche à droite. Pratique avec les formes asymétriques, pour alterner le sens d'une section à l'autre.

Pourquoi ma couture ne se voit pas#

La forme dessine la frontière entre le fond d'une section et celui de l'autre. Si les deux sections ont le même fond, elle est bien là, mais invisible. Le panneau le signale : « Couture invisible : cette section et la précédente ont le même fond. » Donnez un autre fond à l'une des deux sections.

Une vague sous l'en-tête#

L'en-tête n'a pas de bouton Couture haute : aucune section ne se trouve au-dessus de lui. Pour dessiner une vague sous l'en-tête, réglez la couture de la première section de la page, avec l'empiétement dessous : la forme prend la couleur de l'en-tête et retombe dans la page. Si l'en-tête reste visible pendant le défilement, dessus est grisé : l'en-tête passerait par-dessus la forme.

Même logique en bas de page : la couture du pied de page se règle sur le pied de page, et prend le fond de la dernière section de chaque page. Comme ce fond change d'une page à l'autre, l'éditeur du pied de page le remplace par une bande à damier, « Fin de page ».