Blocs de navigation

Ces blocs ajoutent des éléments de navigation à vos pages. Ce sont la carte interactive, le bouton, la liste de liens et la table des matières.

Ils contiennent peu ou pas de texte : ils ajoutent des liens, une carte ou des repères. Tous les quatre sont dans le groupe « Navigation » de la fenêtre d’ajout de bloc.

La fenêtre d’ajout de bloc, ouverte sur le groupe Navigation. Elle montre quatre blocs : Carte interactive, Bouton (lien), Liste de liens et Table des matières.

Bloc table des matières

Ce bloc crée une liste de liens vers les titres de la page, pour que le visiteur aille directement à la partie qui l’intéresse. Il est utile sur les pages longues : vous n’avez rien à écrire, la liste se met à jour toute seule.

placer le bloc en haut de la page : le visiteur voit la structure avant de commencer sa lecture.
réserver ce bloc aux pages longues : sur une page courte, la liste répète le contenu.
choisir le niveau de titre de vos sections principales : un niveau trop bas donne une liste trop longue.

Exemple

Édition d’un bloc table des matières dans l’espace d’administration, annoté

1. Titre de la table des matières: Vous pouvez ajouter un titre qui s’affichera au-dessus de la table des matières.
2. Niveau de titre: Vous choisissez le niveau des titres à afficher. La liste reprend seulement les titres de ce niveau.
Exemple : vous choisissez le niveau 2 (H2). Les titres de niveau 3 (H3) ne seront pas affichés.
3. Format d’affichage: Vous choisissez une liste verticale ou une liste horizontale. Une liste verticale s’affiche en colonne. Une liste horizontale s’affiche sur une seule ligne.

Rendu de l’exemple sur le site :

Bloc bouton

Ce bloc crée un bouton cliquable. Il peut mener à une page de votre site, à un autre site ou à une adresse email. Vous pouvez changer sa couleur, sa taille et sa position dans la colonne.

écrire un libellé court et explicite, éviter "cliquez ici" qui n’annonce pas la destination. Exemple de libelle pertinent : "Demander un devis".
réserver la taille Gros et la couleur principale au bouton le plus important de la page : un bouton secondaire, plus petit et dans une autre couleur, reste possible.

Exemple : insérer un bouton

Édition d’un bloc bouton dans l’espace d’administration, annoté

1. Onglets Contenu et Style: L’onglet Contenu sert à écrire le texte du bouton et à choisir sa destination. L’onglet Style sert à changer son apparence.
2. Texte du bouton: C’est le texte affiché sur le bouton. Écrivez un texte court et clair. Le visiteur doit comprendre tout de suite ce que fait le bouton.
3. Lien: C’est la destination du bouton. Vous pouvez choisir une page de votre site, un autre site ou une adresse email. Ce champ est obligatoire. Le titre du lien est un texte que vous pouvez rajouter et qui s’affiche au survol de la souris sur le bouton (infobulle).
4. Autres options: Un texte peut apparaître quand la souris passe sur le bouton. Ce texte ne remplace pas le texte du bouton. Vous pouvez aussi ouvrir le lien dans un nouvel onglet. Utilisez cette option seulement pour les liens vers un autre site.

Rendu de l’exemple sur le site :

Me contacter

Exemple : changer l’apparence et la position du bouton

Édition du style d’un bloc bouton dans l’espace d’administration, annoté

1. Couleurs du bouton: Vous choisissez la couleur de fond parmi les couleurs du site. Vous pouvez aussi choisir une couleur plus claire en activant l’option Atténuer la couleur. Si vous ne choisissez pas de couleur, le bouton utilise la couleur principale du site.
2. Taille du bouton: Vous choisissez la position du bouton dans la colonne : à gauche, au centre ou à droite. L’option « Dans le texte » met le bouton dans la phrase.
3. Affichage du bouton: Vous choisissez la position du bouton dans la colonne. L’option Dans le texte sert quand plusieurs boutons se suivent : elle les place côte à côte sur une même ligne. Pour un bouton seul, préférez l’une des trois autres positions.

Rendu de l’exemple sur le site avec variantes de style (taille, couleur et position sur la page).

Bouton aligné à gauche, grande taille et couleur secondaire.

Envoyer

Bouton centré, taille moyenne et couleur secondaire atténuée.

Envoyer

Bouton aligné à droite, petite taille et couleur par défaut.

Envoyer

Ensemble de boutons côte à côte

Envoyer

Bloc liste de liens

Ce bloc affiche une liste de liens, vers des pages de votre site ou vers d’autres sites. Le champ « Type de liste de liens » détermine d’où viennent ces liens : d’une page parent, d’une sélection de pages, ou d’adresses que vous saisissez. Ces trois sources sont expliquées dans le premier exemple.

choisir la liste générée depuis une page parent quand les liens sont les sous-pages d’une même page : la liste suit alors les ajouts et les suppressions.
garder le nombre de liens limité : au-delà d’une dizaine, activer la pagination en liste verticale.
vérifier l’ordre d’affichage : en mode manuel, c’est l’ordre que vous avez placé qui compte.

Exemple : remplir la liste de liens

Édition d’un bloc de liste de liens dans l’espace d’administration, annoté

1. Onglets Contenu et Paramétrage et styles: L’onglet Contenu sert à choisir les liens et à ajouter un titre. L’onglet Paramétrage et styles sert à changer l’apparence de la liste et certaines règles d’affichage.
2. Type de liste de liens: Généré à partir d’une page parent : vous choisissez une page de votre site. Seules les pages qui ont déjà des sous-pages apparaissent dans le sélecteur. Toutes ses sous-pages publiées deviennent des liens. La liste se met à jour toute seule.
Choix de pages manuel : vous choisissez vous-même n’importe quelle page de votre site.
Liens externes : vous écrivez chaque adresse et son texte.
3. Titre: Affiche un titre au dessus de la liste de liens. Utile pour rajouter du contexte si nécessaire.
4. Liste de liens externes: S’affiche dans le cas où le type de liste de lien choisi est Liens externes. Permet de renseigner les données de chaque lien.

Rendu de l’exemple sur le site :

L’accessibilité sur le web

Exemple : paramétrage et style d’une liste horizontale

Édition du style d’un bloc de liste de liens horizontal dans l’espace d’administration, annoté

1. Format d’affichage: Vous choisissez une liste verticale ou une liste horizontale. Une liste verticale s’affiche en colonne. Une liste horizontale s’affiche sur une seule ligne.
2. Style d’affichage des liens: En format horizontal, vous pouvez aussi choisir le style des liens : classique, pastilles ou souligné.
3. Position des liens: En format horizontal, vous pouvez aussi choisir la place de la liste : à gauche, au centre, à droite ou justifié. L’option justifié répartit les liens sur toute la largeur de la colonne, avec un espace égal entre les liens et sur les côtés.

Rendu de l’exemple sur le site :

Exemple : paramétrage et style d’une liste verticale

Édition du style d’un bloc de liste de liens vertical dans l’espace d’administration, annoté

1. Limiter le nombre de liens à afficher: En format vertical, vous pouvez limiter le nombre de liens affichés à la fois. Une pagination apparaît alors sous la liste pour atteindre les liens suivants. Ce réglage ne fonctionne pas avec les liens externes.
2. Nombre de liens par pages: Ce champ n’apparaît que si la pagination est activée. Il fixe le nombre de liens affichés à la fois ; sa valeur par défaut est 5.
Avec une limite de 5 et douze liens au total, la liste affiche cinq liens et la pagination compte trois pages.

Rendu de l’exemple sur le site :

Bloc carte interactive

Ce bloc affiche une carte que le visiteur peut déplacer et zoomer pour situer un lieu. Il ne contient qu’un seul champ, l’emplacement, que vous choisissez dans l’espace d’administration en cherchant une adresse ou en cliquant sur la carte.

Exemple : placer un marqueur sur la carte

Édition du bloc carte interactive dans l’espace d’administration, annoté

1. Recherche d’adresse: Écrivez une adresse ou le nom d’une ville dans le champ de recherche.
2. Valider la recherche: Une fois l’adresse saisie, cliquez sur Localiser ou appuyez sur la touche Entrée : le marqueur se place à l’endroit trouvé.
3. Naviguer sur la carte: Vous pouvez aussi cliquer directement sur la carte pour placer le marqueur.

Édition du bloc carte interactive une fois la localisation choisie dans l’espace d’administration, annoté

1. Information sur le marqueur: Une fois le marqueur placé, l’interface se replie et affiche l’adresse trouvée et ses coordonnées.
2. Modifier le marqueur: Pour déplacer le marqueur, cliquez sur Éditer : l’interface de recherche revient. Vous pouvez alors saisir une autre adresse ou cliquer sur la carte.

Rendu de l’exemple sur le site :