Les sections
Découper une page en sections, leur donner un fond, une palette de couleurs ou une ambiance animée.
Qu’est-ce qu’une section ?
Une page est une suite de sections posées les unes sous les autres : un bandeau d’accueil, une présentation, des témoignages, un formulaire… Chaque section contient du texte et des blocs, et a sa propre apparence.
Ajouter une section
Entre deux sections, un séparateur porte un bouton + (Ajouter une section) : cliquez dessus pour insérer une nouvelle section à cet endroit. Vous pouvez aussi taper / dans une page et choisir Section. Remplissez-la ensuite de texte et de blocs.
Déplacer, dupliquer, supprimer
Ces commandes se trouvent sur le séparateur placé au bord supérieur de chaque section. Passez la souris sur la page : entre deux sections apparaît une ligne avec, au centre, une poignée à six points (son info-bulle : Glisser pour déplacer, cliquer pour les commandes) et le bouton rond +.
- Glissez la poignée vers le haut ou vers le bas pour déplacer la section.
- Cliquez sur la poignée pour ouvrir le menu de la section située juste en dessous : Style, Monter, Descendre, Dupliquer et Supprimer.
Supprimer retire la section entière avec tout son contenu, sans demander de confirmation. En cas d’erreur, annulez aussitôt avec Cmd+Z sur Mac ou Ctrl+Z sous Windows.
Quand vous avez cliqué dans une section, l’onglet Section du panneau de droite propose aussi, tout en haut, les mêmes commandes : Monter la section, Descendre la section, Dupliquer la section et Supprimer la section.
Pour reprendre une section sur d’autres pages, choisissez Copier vers une page… dans le menu de sa poignée ou dans l’onglet Section. Cochez les pages, puis placez la copie au début ou à la fin de chaque page. Chaque copie est indépendante, et un seul Annuler défait la copie partout.
Supprimer une section vide
Une section vide se supprime de la même façon, avec la poignée du séparateur juste au-dessus d’elle ou depuis l’onglet Section. Plus simple encore : cliquez dans sa ligne vide et appuyez sur la touche d’effacement, la section disparaît. Cmd+Z ou Ctrl+Z la rétablit.
L’en-tête et le pied de page du site n’ont pas de poignée : ils ne se déplacent pas et ne se suppriment pas.
Les sections réutilisables
Horaires d’ouverture, appel à l’action, bandeau de réassurance : une section réutilisable est la même sur chaque page qui l’utilise, contenu et style compris. Modifiez-la une fois, toutes les pages suivent.
- Dans une page, cliquez sur la poignée de la section et choisissez Enregistrer comme section réutilisable….
- Donnez-lui un Nom, puis cliquez sur Enregistrer. Ce nom sert seulement à la retrouver dans TOWeb : il n’apparaît pas sur le site.
- Sur une autre page, cliquez sur le bouton + entre deux sections, puis choisissez Section vide ou l’une de vos Sections réutilisables.
Dans la page, une section réutilisable indique sur combien de pages elle est utilisée. Modifier l’ouvre seule, dans son propre écran, et la modification s’applique à toutes ces pages. Détacher en fait une section ordinaire, sur cette page seulement.
Le bouton Sections réutilisables de l’écran Pages les liste, pour les Renommer ou les Supprimer. Supprimer une section réutilisable ne perd rien : chaque page qui l’utilisait en garde une copie, que vous pouvez modifier à part.
Régler l’apparence d’une section
Cliquez dans la section, puis ouvrez l’onglet Section du panneau de droite :
- Palette de couleurs : Par défaut, Douce, Accent ou Affirmée. Les couleurs viennent de votre style : alterner les palettes rythme la page sans jamais sortir de votre charte.
- Image / vidéo de fond, avec un Voile pour garder le texte lisible, la Position et le Flou. Pour une image, l’interrupteur Fond fixe la garde immobile pendant que le contenu défile par-dessus, sur ordinateur comme sur téléphone. Pour une vidéo, l’image de couverture est tirée de la vidéo, et Choisir dans la vidéo permet d’en choisir l’instant : voyez Les images et la médiathèque.
- Largeur du contenu : Étroit, Normal, Large ou Pleine largeur. Resserrez un long texte pour qu’il se lise mieux, ou élargissez une galerie ou une grille de cartes ; les autres sections gardent la largeur de votre style.
- Plein écran : la section occupe toute la hauteur de l’écran. Idéal pour ouvrir l’accueil sur une grande image ou une vidéo, à choisir dans Image / vidéo de fond. Sur téléphone, la section tient dans la partie visible de l’écran.
- Mise en colonnes : répartit le texte en 2 ou 3 colonnes, avec lettrine ou texte justifié si vous le souhaitez.
L’espace entre les sections vient de votre style : il est le même sur toutes les pages, pour un rythme régulier. Pour rapprocher deux contenus, placez-les dans la même section plutôt que dans deux sections qui se suivent.
Pour resserrer ou aérer tout le site d’un coup, réglez la Densité dans Thème › Formes : Compacte, Normale ou Aérée. Chaque style garde son propre rythme, que « Normale » respecte tel quel.
Les effets de section
- Ambiance animée : un fond vivant tiré des couleurs du style (Aurore, Lueur, Grille, Trame, Maillage, Constellation, Ondes, Liquide). Une image de fond la remplace.
- Entrée des titres : les mots des titres montent ou se révèlent à l’arrivée.
- Texte-manifeste : les mots s’éclairent au fil du défilement. À réserver à une phrase forte.
- Sections empilées : la section reste en haut de l’écran pendant que la suivante glisse par-dessus, comme un paquet de cartes. À activer sur 2 à 4 sections qui se suivent.
Ces effets se jouent sur le site, dans l’aperçu comme en ligne. D’autres effets se règlent pour tout le site dans Formes, effets et animations.
Masquer une section
Ne pas publier, dans le menu d’une section, la garde dans la page, modifiable et marquée Non publiée, mais hors du site publié. Publier la section la met en ligne à la publication suivante.
Dans l’onglet Section de l’inspecteur, Afficher sur choisit les écrans où la section apparaît : Ordinateur, Tablette et Mobile. Éteignez Mobile pour masquer, par exemple, un grand visuel sur téléphone. Dans l’éditeur, la section reste visible avec une pastille, et l’Aperçu par appareil montre le résultat.