Navigation de pied de page

Liens en vedette

1. Documentation Company XYZ sur la section de navigation du pied de page
2. Documentation Shopify sur les sections et les blocs
3. Documentation Company XYZ sur le bloc de menu du pied de page
4. Documentation Company XYZ sur le bloc de logo
5. Documentation Company XYZ sur le bloc d’icônes des réseaux sociaux
6. Documentation Company XYZ sur le bloc de sélecteurs de localisation
7. Documentation Company XYZ sur le bloc d’icônes de paiement
8. Documentation Company XYZ sur le bloc de droits d’auteur
9. Documentation Company XYZ sur le bloc de bouton
10. Documentation Company XYZ sur le bloc d’image
11. Documentation Company XYZ sur le bloc de vidéo
12. Documentation Company XYZ sur le bloc de séparateur
13. Documentation Shopify sur la personnalisation des sections
14. Documentation Company XYZ sur les paramètres d’arrière-plan de section
15. Documentation Company XYZ sur les paramètres d’espacement de section
16. Documentation Company XYZ sur les paramètres de séparateurs
17. Documentation Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo de Learn With Shopify : bonnes pratiques pour les menus de navigation Shopify

Vidéo de Learn With Shopify : bonnes pratiques pour les menus de navigation Shopify

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez la navigation de pied de page pour créer une mise en page personnalisée en fin de page avec des menus, des éléments de marque, du texte légal, des liens sociaux, des médias et du contenu utilitaire. Elle est particulièrement adaptée lorsque vous souhaitez plus de contrôle qu’un simple pied de page empilé, en particulier sur ordinateur, tablette et mobile.

La référence de la section Navigation de pied de page est disponible dans la documentation Company XYZ. Pour une vue d’ensemble plus large du comportement des sections dans Shopify, consultez la documentation Shopify sur les sections et les blocs

Paramètres de base

Les principaux contrôles de mise en page définissent le nombre de colonnes utilisées par le pied de page à différentes tailles d’écran. Ces paramètres structurent l’ensemble avant l’affinage de chaque bloc.

1. Définissez d’abord la mise en page pour ordinateur. Utilisez davantage de colonnes pour les pieds de page riches en liens et moins de colonnes pour des mises en page plus simples, centrées sur la marque.
2. Utilisez le paramètre de tablette de manière intentionnelle. Si les colonnes de tablette sont définies sur 0, les tablettes réutilisent le nombre de colonnes de l’ordinateur, ce qui est utile lorsque votre mise en page pour ordinateur s’adapte déjà bien.
3. Simplifiez le mobile. Les écrans plus étroits fonctionnent généralement mieux avec moins de colonnes, surtout lorsque vous combinez des menus avec du contenu plus large comme du texte enrichi, des images ou une vidéo.

Astuce

Si le pied de page semble trop chargé, réduisez le nombre de colonnes avant de masquer du contenu. Une structure plus claire améliore généralement la lisibilité davantage que la suppression de liens utiles.

Paramètres de couleur

Ces couleurs au niveau de la section vous permettent de remplacer les couleurs du texte et des icônes du pied de page sans modifier le reste du site. Utilisez-les lorsque le pied de page doit avoir son propre traitement visuel.

1. Faites correspondre la couleur du texte à l’arrière-plan. C’est particulièrement important lorsque vous ajoutez une image, un dégradé ou une vidéo en arrière-plan.
2. Utilisez la couleur des icônes pour plus de cohérence. Cela aide à unifier les blocs basés sur des icônes, comme les liens sociaux ou d’autres éléments utilitaires.
3. Considérez les couleurs de bloc comme des exceptions. Commencez avec les couleurs de section pour l’ensemble du pied de page, puis utilisez les couleurs au niveau du bloc uniquement lorsqu’un élément précis doit se démarquer.

Types de blocs pris en charge

1. Button
2. Copyright
3. Follow on shop button
4. Footer menu
5. Localization selectors
6. Logo
7. Payment icons
8. Rich text
9. Separator
10. Social media icons
11. Image
12. Video

Consignes pour les blocs

Menu de pied de page

Les blocs Footer menu affichent une liste de navigation, avec un titre facultatif pour chaque groupe. En savoir plus sur le Menu de pied de page.

1. Utilisez des blocs de menu séparés pour des groupes distincts, comme Help, Company et Policies.
2. Ajoutez de courts titres lorsque vous avez plusieurs menus afin que les clients puissent parcourir le pied de page plus rapidement.
3. Fractionnez les longues listes en groupes plus petits plutôt que de créer un menu surdimensionné.

Logo

Le bloc Logo renforce l’identité de la marque et peut ancrer visuellement le pied de page. Si aucune image n’est définie dans le bloc, le nom de la boutique peut être utilisé à la place. En savoir plus sur le bloc Logo.

1. Gardez le logo de taille modeste afin qu’il soutienne la mise en page au lieu de la dominer.
2. Une largeur de 0 permet au logo de s’étendre sur l’espace disponible, ce qui est généralement idéal pour des pieds de page simples, centrés sur la marque.

Texte riche

Rich text convient bien aux courts textes de marque, aux coordonnées, aux messages de confiance ou à une proposition de valeur concise.

1. Gardez un texte bref pour que le pied de page reste facile à parcourir.
2. Utilisez les couleurs d’arrière-plan ou de texte au niveau du bloc uniquement lorsque ce contenu doit se démarquer des éléments environnants.

Icônes de réseaux sociaux

Ce bloc récupère les comptes sociaux configurés dans vos paramètres de thème. En savoir plus sur le Icônes de réseaux sociaux.

1. Utilisez Show all lorsque vos comptes sociaux configurés sont complets et cohérents.
2. Désactivez Show all si vous souhaitez mettre en avant seulement quelques réseaux clés.
3. Choisissez le style d’icône selon le design du pied de page : avec identité visuelle pour la reconnaissance, plein pour une UI plus épurée, ou texte uniquement pour un rendu plus minimal.

Sélecteurs de localisation

Les Localization selectors permettent aux clients de choisir le pays, la devise et la langue lorsque c’est pris en charge. En savoir plus sur le Sélecteurs de localisation.

1. Ajoutez ce bloc uniquement si ces choix sont disponibles pour les clients.
2. Sur mobile, le style de saisie Small field peut forcer le bloc à passer à la ligne, alors prévisualisez le pied de page après cette modification.

Ajoutez les Localization selectors uniquement lorsqu’ils sont entièrement configurés et utiles pour les clients. Sinon, ils ajoutent de la complexité sans améliorer le pied de page.

Icônes de paiement et copyright

Ces blocs sont généralement utilisés près du bas du pied de page pour rassurer et fournir des informations légales. En savoir plus sur le Icônes de paiement et le bloc Copyright.

1. Placez-les sur une rangée inférieure pour adopter un schéma de pied de page familier.
2. Gardez le texte de copyright court et à jour.
3. Considérez les icônes de paiement comme des signaux de confiance de soutien plutôt que comme le contenu principal du pied de page.

Bouton

Le bloc Button ajoute une action claire au pied de page, comme contacter votre équipe ou ouvrir une page d’assistance. En savoir plus sur le Bouton.

1. Utilisez un ou deux boutons au maximum afin que le pied de page n’entre pas en concurrence avec le contenu principal de la page.
2. Les boutons mobiles pleine largeur sont utiles lorsque l’action est importante sur les petits écrans.

Image et vidéo

Les blocs Image et Video peuvent donner au pied de page un aspect plus éditorial ou plus axé sur la marque. En savoir plus sur le bloc Image et le bloc Video.

1. Utilisez les médias avec parcimonie afin que la navigation ne soit pas trop repoussée vers le bas de la page.
2. Gardez des légendes courtes et pratiques.
3. Pour la vidéo, une image d’aperçu crée généralement une meilleure première impression.

Attention

Des blocs média volumineux peuvent rendre les liens du pied de page plus difficiles à trouver, en particulier sur mobile. Si la navigation est la fonction principale du pied de page, laissez les médias au second plan.

Bloc Séparateur

Le bloc Separator ajoute de l’espace ou une séparation visuelle entre les éléments du pied de page. En savoir plus sur le Bloc Séparateur.

1. Utilisez-le pour séparer les zones supérieure et inférieure du pied de page ou pour créer de l’espace autour du contenu utilitaire.
2. Un petit espace peut subsister même à une hauteur de 0, car le pied de page utilise un espacement standard entre les éléments.

Paramètres partagés des blocs

La plupart des blocs du pied de page incluent des contrôles partagés pour l’alignement, la mise en page et la visibilité. Ces paramètres rendent la section suffisamment flexible pour des pieds de page responsives personnalisés. Pour le comportement général d’édition, consultez la documentation Shopify sur la personnalisation des sections

1. Les paramètres d’alignement permettent à chaque bloc d’être aligné différemment sur ordinateur et mobile.
2. Les paramètres de mise en page permettent de déplacer un bloc vers une nouvelle rangée ou colonne, ou de l’étirer pour remplir l’espace restant sur ordinateur.
3. Les paramètres de visibilité sont utiles lorsque l’ordinateur et le mobile ont besoin de mises en page de pied de page sensiblement différentes.

Paramètres standard de section

Paramètres d’arrière-plan de section

Les paramètres d’arrière-plan de section contrôlent la couleur d’arrière-plan, le dégradé, l’image, la vidéo et le traitement de l’overlay du pied de page. Dans cette section, ils sont particulièrement utiles pour détacher le pied de page du reste de la page ou créer une finition de marque plus marquée.

Si vous ajoutez des arrière-plans d’image ou de vidéo, vérifiez soigneusement le contraste du texte et des icônes. La couleur et l’opacité de l’overlay peuvent aider à préserver la lisibilité, et des médias d’arrière-plan spécifiques au mobile peuvent simplifier le design sur les petits écrans.

Paramètres d’espacement

Les paramètres d’espacement contrôlent l’espace au-dessus et au-dessous du contenu du pied de page. Utilisez-les pour rendre le pied de page plus aéré ou pour le resserrer lorsque la page dispose déjà de beaucoup d’espace vertical.

L’espacement sur ordinateur et sur mobile peut être ajusté séparément, ce qui aide à éviter qu’un grand pied de page sur ordinateur paraisse trop haut sur téléphone.

Paramètres de séparateur

Les paramètres de séparateur ajoutent une ligne en haut ou en bas de la section de pied de page. Cela est utile lorsque vous souhaitez une transition plus nette entre le pied de page et le contenu voisin.

Si la couleur du séparateur est transparente, la couleur de bordure par défaut est utilisée à la place. Gardez un style de séparateur discret, sauf si le pied de page a besoin d’un contour plus marqué.

Paramètres de largeur

Les paramètres de largeur contrôlent à la fois la largeur maximale du contenu et la largeur globale de la section. Dans Navigation de pied de page, la largeur du contenu influence la proximité des blocs entre eux, tandis que la largeur de la section est surtout importante lorsque vous utilisez un arrière-plan stylisé.

L’éditeur peut rendre les changements de largeur moins évidents qu’ils ne le sont sur la page en ligne, alors prévisualisez le résultat dans la boutique en ligne lorsque vous affinez la mise en page. Utilisez des largeurs plus étroites pour une lecture plus nette et des largeurs plus larges lorsque l’arrière-plan fait partie du design.

Notes d’utilisation

1. Commencez par les colonnes. Définissez d’abord le nombre de colonnes pour l’ordinateur, la tablette et le mobile, puis ajustez la mise en page de chaque bloc uniquement là où c’est nécessaire.
2. Regroupez clairement les liens. Utilisez plusieurs blocs Footer menu avec de courts titres afin que les clients puissent parcourir rapidement les liens d’assistance, d’entreprise et de politique.
3. Préservez le contraste. Revérifiez la lisibilité du texte et des icônes chaque fois que vous ajoutez une image d’arrière-plan, un dégradé, une vidéo ou des couleurs personnalisées.
4. Utilisez les variantes responsives avec parcimonie. Masquez ou dupliquez des blocs uniquement lorsque le mobile et l’ordinateur ont réellement besoin de mises en page de pied de page différentes.
5. Gardez le contenu utilitaire secondaire. Les logos, les médias, les icônes de paiement et les boutons doivent soutenir le pied de page, et non rendre la navigation principale plus difficile à trouver.
6. Prévisualisez les deux affichages. Les blocs du pied de page peuvent se réorganiser, se masquer ou changer d’importance entre ordinateur et mobile, alors vérifiez chaque taille avant de publier.
7. Considérez les médias comme un choix de design. Des médias distincts pour l’ordinateur et le mobile peuvent modifier le recadrage, la lisibilité et le comportement de repli, alors vérifiez les deux versions si vous utilisez des images ou une vidéo.
8. Laissez les valeurs par défaut lorsque vous souhaitez un style de repli. Des choix de couleur vides ou transparents conservent généralement l’apparence existante du pied de page, tandis que des couleurs, dégradés ou médias explicites rendent la zone du pied de page plus indépendante.