En-tête, pied de page et navigation - ArtInStack Documentation

L'apparence de votre site (barre supérieure et barre inférieure) s'affiche sur chaque page publique. ArtInStack divise les paramètres en deux sections qui fonctionnent de concert :

Ce que vous configurez	Où	Ce que cela contrôle
Liens de menu (URL et ordre)	Paramètres → Navigation	Quelles pages apparaissent dans les menus sur l'ensemble du site
Conception de l’en-tête et du pied de page	Paramètres → En-tête et pied de page → Modifier	Logo, mise en page, colonnes, réseaux sociaux, mentions de copyright, newsletter, icône du panier

L’éditeur En-tête et pied de page est un éditeur visuel distinct (de la même famille que l’éditeur de page) mais dont la portée est limitée à <header> ou <footer> uniquement. Il dispose de sa propre bibliothèque de blocs — il ne s’agit pas des blocs « hero », « galerie » ou « portfolio » que vous utilisez sur les pages.

Aperçu des fonctionnalités

Onglet Navigation — Créez des listes de liens (pages internes ou URL externes) auxquelles les blocs de menu peuvent faire référence.
Onglet En-tête et pied de page — Créez ou sélectionnez des modèles ; le bouton Modifier ouvre l’éditeur de modèles.
Éditeur de modèles — Faites glisser les blocs Préréglages, Mise en page et Éléments d’en-tête ou Éléments de pied de page ; configurez-les à l’aide de Style, Attr et Événements dans la barre latérale de droite (interactions : Événements et interactions de l’éditeur de page).
Mise en page du site — Préréglages facultatifs applicables à l’ensemble du thème qui affectent le style général de l’en-tête et du pied de page.

Architecture de l’interface

[Paramètres → Navigation]
        → éléments de menu (données pour les blocs « Menu de navigation »)

[Paramètres → En-tête et pied de page → Modifier l’en-tête ou le pied de page]
        → Zone de travail de l’éditeur de modèle (zone d’en-tête OU de pied de page)
        → Barre latérale droite : Modifier | Calques | Blocs
              Panneau Blocs : Préréglages, Mise en page, Éléments d’en-tête/de pied de page
        → Enregistrer le modèle → s’applique à toutes les pages utilisant ce modèle par défaut

Le contenu du corps de la page provient toujours de Pages → Modifier — voir Référence sur les blocs et la mise en page de l’éditeur.

Partie 1 — Menu de navigation (Paramètres → Navigation)

Utilisez cette section lorsque vous devez ajouter, supprimer ou réorganiser les liens qui apparaissent dans les blocs de navigation.

Étapes de mise en œuvre

Ouvrez Paramètres → Navigation.
Ajoutez des éléments pointant vers des pages publiées ou des URL externes.
Faites glisser pour réorganiser.
Enregistrez.

Bloc « Menu de navigation » (dans l’éditeur de modèle d’en-tête)

Lorsque vous placez un bloc Menu de navigation dans un modèle d’en-tête, ouvrez Attr et choisissez le menu enregistré que ce bloc doit utiliser (Sélectionner un menu). Au moment de la publication, ArtInStack insère les liens actifs depuis Paramètres → Navigation : vous n’avez pas besoin de saisir manuellement chaque lien dans le modèle de ce bloc.

Les Préréglages d’en-tête (Minimal, Standard, Centré, Multi-lignes) déposent un bloc Menu de navigation avec des liens de remplacement sur le canevas afin que vous puissiez évaluer l’espacement. Reliez le bloc à un véritable menu dans Attr avant de vous fier au site en ligne : le résultat publié utilise ce menu, et non les liens de remplacement.

Si un lien de menu renvoie une erreur 404 aux visiteurs

Ne créez des liens que vers des pages publiées. Les pages brouillon ne sont pas accessibles aux visiteurs non connectés.

Partie 2 — Éditeur de modèles d’en-tête et de pied de page

Ouvrir l’éditeur

Paramètres → En-tête et pied de page.
Sélectionnez un modèle d’en-tête ou de pied de page (ou créez-en un).
Cliquez sur Modifier.

Vous voyez alors un espace de travail compact (bande d’en-tête ou bande de pied de page) et le même flux de travail dans la barre latérale droite que pour les pages : Modifier / Calques / Blocs, puis Style, Attributs, Événements sous Modifier.

En quoi le canevas du modèle diffère-t-il de celui des pages ?

	Éditeur de page	Éditeur de modèle d’en-tête/pied de page
Racine du canevas	Page entière	Un seul `<header>` ou `<footer>`
Bibliothèque de blocs	Heroes, galeries, produits, …	Blocs réservés à l’en-tête ou au pied de page
Structure	Plusieurs sections en commun	Généralement une section → lignes → colonnes
Enregistrement	Par page	Par modèle (s’applique partout où ce modèle est utilisé)

Les modifications apportées à un en-tête ou un pied de page par défaut partagé affectent toutes les pages qui l’utilisent — prévisualisez sur la page d’accueil et une page intérieure avant de procéder à des modifications importantes.

Blocs de mise en page (en-tête et pied de page)

Disponibles sous Blocs → Mise en page (même principe que pour les pages : section → ligne → colonne).

Bloc	Utilisation
Section	La bande d’en-tête ou de pied de page ; hauteur et espacement vertical dans Attr
Ligne	Mise en page horizontale ; largeur maximale, espacement, disposition des colonnes
Espaceur	Espacement vertical fixe entre les lignes

Utilisez Couches lorsque vous devez sélectionner une ligne ou une section située sous d’autres éléments de contenu.

Modèle d’en-tête — Préréglages

Mises en route rapides sous Blocs → Préréglages (éditeur d’en-tête uniquement) :

Préréglage	Mise en page type
Minimal	Logo à gauche ; barre de navigation + bouton de menu mobile dans une colonne extensible
Standard	Logo · barre de navigation + menu hamburger · panier (trois colonnes)
Centré	Même structure à trois colonnes que « Standard », avec la barre de navigation centrée dans la colonne du milieu
Multi-lignes	Ligne supérieure : logo + titre du site · barre de navigation · panier ; deuxième ligne pour les liens secondaires

Les préréglages incluent un bouton de menu mobile avec la barre de navigation ; les liens du menu coulissant mobile sont renseignés lors de la publication à partir du menu de navigation que vous avez sélectionné dans Attr.

Modèle d’en-tête — Éléments

Sous Blocs → Éléments d’en-tête :

Bloc	Utilisation
Logo	Image provenant de Médias ou espace réservé ; URL du lien (par défaut `/`) et hauteur dans Attr
Titre du site	Nom du studio en texte à côté ou à la place du logo
Menu de navigation	Menu horizontal relié à un menu depuis Paramètres → Navigation
Lien de navigation	Lien unique manuel (libellé personnalisé + URL)
Bouton CTA	Bouton bien visible (style/taille dans Attr)
Icônes de réseaux sociaux	Rangée d’icônes avec les réseaux configurés dans Attr
Panier	Icône du panier de la boutique lorsque le commerce est activé (couleur/taille dans Attr)

Configurez l’image du logo et l’URL du lien, la sélection du menu, l’URL du CTA et les URL des réseaux sociaux dans Attr après avoir sélectionné le bloc.

Modèle de pied de page — Préréglages

Sous Blocs → Préréglages (éditeur de pied de page uniquement) :

Préréglage	Mise en page type
Pied de page simple	Mentions légales à gauche, réseaux sociaux à droite
Pied de page empilé	Logo centré, liens, réseaux sociaux, copyright
Pied de page à plusieurs colonnes	Plusieurs colonnes pour les liens et le texte
Pied de page newsletter	Mise en page axée sur l’inscription avec des colonnes

Modèle de pied de page — Éléments

Sous Blocs → Éléments de pied de page :

Bloc	Utilisation
Colonnes de pied de page	Structure à plusieurs colonnes pour les groupes de liens
Colonne de pied de page	Une colonne à l’intérieur de la grille
Logo de pied de page	Logo plus petit pour le pied de page ; URL du lien (par défaut `/`) et hauteur dans Attr
Copyright	Modèle de texte avec année automatique (`© {année} …`) dans Attr
Liens sociaux	Ligne d’icônes sociales dans le pied de page
Newsletter	Interface utilisateur de collecte d’adresses e-mail (titre, webhook et texte dans Attr)
Conditions générales	Lien vers la page des conditions générales ou de la politique de confidentialité

Mise en page du site et personnalisations de page

Paramètres → Mise en page du site — Préréglages du thème pouvant affecter la largeur de l’en-tête ou la couleur du pied de page à l’échelle du site.
Pages → Modifier → Paramètres de la page — Remplacement du modèle d’en-tête/pied de page pour une page spécifique : Paramètres et remplacements de page.
Liste de contrôle rapide : Gestionnaire de modèles · Approfondissement : Utilisation des modèles de page.

Dépannage et pièges courants

Problème	À vérifier
Le menu s'affiche incorrectement sur le site en ligne	Ordre des onglets Navigation + menu référencé par le bloc Menu de navigation dans Attr
L’en-tête a changé partout après une modification	C’est normal : le modèle d’en-tête par défaut est partagé ; utilisez la fonction de remplacement de page pour une page d’accueil
Les blocs « héros » et « galeries » sont absents du panneau des blocs	Vous êtes dans l’éditeur de modèle ; ces blocs ne sont disponibles que dans l’éditeur de page
Menu mobile vide	Enregistrez le modèle d’en-tête ; vérifiez que la Navigation comporte des éléments et que le menu est sélectionné dans le bloc Menu de navigation ; republiez la page
Le logo ne renvoie pas à la page d’accueil	Sélectionnez le Logo (ou Logo de pied de page) → Attr → définissez l’URL du lien (par défaut `/`) → Enregistrez le modèle

Étapes suivantes et validation

Ajoutez au moins trois éléments sous Paramètres → Navigation.
Modifier l'en-tête par défaut → appliquer le préréglage Minimal → définir le Logo (image + URL du lien) → associer le Menu de navigation à votre menu dans Attr → Enregistrer.
Modifier le pied de page par défaut → appliquer le préréglage Pied de page simple → mettre à jour le Copyright et les Liens vers les réseaux sociaux → Enregistrer.
Ouvrez deux URL publiques et vérifiez que le même design s'affiche.</footer></header></footer></header>