Dispositions de pages

La mise en page de chaque page de votre magasin se compose de sections ou de conteneurs distincts, qui définissent l’en-tête, le pied de page et les zones de contenu de la page. Selon la disposition, chaque page peut contenir une, deux, trois colonnes ou plus. Vous pouvez considérer la disposition comme la plan de plancher de la page et attribuez une mise en page spécifique à utiliser comme valeur par défaut pour les pages CMS, de produit et de catégorie.

Sur la page, les blocs de contenu flottent pour remplir l’espace disponible, selon la section de la fonction mise en page où elles doivent apparaître. Notez que si vous changez la mise en page de trois colonnes à deux colonnes, le contenu de la zone principale se développe pour remplir l’espace disponible. Notez également que les blocs associés à la barre latérale inutilisée semblent disparaître. Toutefois, si vous restaurez la mise en page à trois colonnes, les blocs réapparaîtront. Cette approche fluide, ou disposition liquide, permet de modifier la mise en page sans avoir à retravailler le contenu. Si vous êtes habitué à travailler avec des pages de HTML individuelles, ce module, bloc de création l'approche nécessite une manière différente de penser.

Mise en page standard à deux colonnes avec barre gauche

Configuration des dispositions par défaut

  1. Sur le Administration barre latérale, accédez à Stores > Settings>Configuration.

  2. Dans le panneau de gauche, sous General, choisissez Web.

  3. Développer Sélecteur d’extension la valeur Default Layouts .

    Dispositions par défaut {width="600" modal="regular"}

  4. Choisissez la Default Product Layout que vous souhaitez utiliser pour les pages de produits.

    Ce paramètre détermine la mise en page utilisée par défaut pour les pages de produits.

    • No layout updates - Les mises à jour de mise en page ne sont pas disponibles pour les pages de produits.
    • Empty - Utilise une mise en page vierge pour les pages de produits.
    • 1 column : utilise une mise en page à une seule colonne pour les pages de produits.
    • 2 columns with left bar : permet d’utiliser une mise en page à deux colonnes avec la barre latérale à gauche pour les pages du produit.
    • 2 columns with right bar : permet d’utiliser une mise en page à deux colonnes avec la barre latérale à droite pour les pages du produit.
    • 3 columns : permet d’utiliser une mise en page à trois colonnes avec des encadrés à gauche et à droite pour les pages de produits.

    When Page Builder est activée, d’autres options de pleine largeur sont disponibles. Vous pouvez ensuite utiliser les outils de contenu du Créateur de pages pour concevoir la mise en page de vos pages de produits.

    • Page -- Full Width - Utilise la variable Page - Largeur complète mise en page pour les pages de produits.
    • Category -- Full Width - Utilise la variable Catégorie - Largeur complète mise en page pour les pages de produits.
    • Product -- Full Width - (Recommandé) Utilise la variable Produit - Largeur complète mise en page pour les pages de produits.
  5. Choisissez la Default Category Layout que vous souhaitez utiliser pour les pages de catégorie.

    Ce paramètre détermine la mise en page utilisée par défaut pour les pages de catégorie.

    • No layout updates - Les mises à jour de mise en page ne sont pas disponibles pour les pages de catégorie.
    • Empty : permet d’utiliser une mise en page vierge pour les pages de catégorie.
    • 1 column : permet d’utiliser une mise en page à une seule colonne pour les pages de catégorie.
    • 2 columns with left bar : permet d’utiliser une mise en page à deux colonnes avec la barre latérale gauche pour les pages de catégorie.
    • 2 columns with right bar : permet d’utiliser une mise en page à deux colonnes avec la barre latérale à droite pour les pages de catégorie.
    • 3 columns : permet d’utiliser une mise en page à trois colonnes avec des encadrés à gauche et à droite pour les pages de catégorie.

    When Page Builder est activée, d’autres options de pleine largeur sont disponibles. Vous pouvez ensuite utiliser les outils de contenu du Créateur de pages pour concevoir la mise en page de vos pages de catégorie.

    • Page -- Full Width - Utilise la variable Page - Largeur complète mise en page pour les pages de catégorie.
    • Category -- Full Width - (Recommandé) Utilise la variable Catégorie - Largeur complète mise en page pour les pages de catégorie.
    • Product -- Full Width - Utilise la variable Produit - Largeur complète mise en page pour les pages de catégorie.
  6. Choisissez la Default Page Layout à utiliser pour les pages CMS.

    Ce paramètre détermine la mise en page utilisée par défaut pour les pages CMS.

    • No layout updates - Les mises à jour de mise en page ne sont pas disponibles pour les pages CMS.
    • Empty : utilise une mise en page vierge pour les pages CMS.
    • 1 column : utilise une mise en page à une seule colonne pour les pages CMS.
    • 2 columns with left bar : utilise une mise en page à deux colonnes avec la barre latérale à gauche pour les pages CMS.
    • 2 columns with right bar : utilise une mise en page à deux colonnes avec la barre latérale à droite pour les pages CMS.
    • 3 columns : permet d’utiliser une mise en page à trois colonnes avec des encadrés à gauche et à droite pour les pages CMS.

    When Page Builder est activée, d’autres options de pleine largeur sont disponibles. Vous pouvez ensuite utiliser les outils de contenu du Créateur de pages pour concevoir la mise en page de vos pages CMS.

    • Page -- Full Width - (Recommandé) Utilise la variable Page - Largeur complète mise en page pour les pages CMS.
    • Category - Full Width - Utilise la variable Catégorie - Largeur complète mise en page pour les pages CMS.
    • Product - Full Width - Utilise la variable Produit - Largeur complète mise en page pour les pages CMS.
  7. Lorsque vous avez terminé, cliquez sur Save Config.

Disposition de pages standard

Une colonne

Diagramme : mise en page à une colonne

La variable 1 Column ​La mise en page peut être utilisée pour créer une page d’accueil spectaculaire avec une grande image ou un point focal. Il s’agit également d’un bon choix pour une page d’entrée ou toute autre page qui comporte une combinaison de texte, d’images et de vidéo.

Deux colonnes avec la barre de gauche

Diagramme : mise en page à deux colonnes avec barre de gauche

La variable 2 Columns with Left Bar ​La mise en page est souvent utilisée pour les pages avec une navigation à gauche, telles qu’un catalogue ou des pages de résultats de recherche avec une navigation par couches. Il s’agit également d’un excellent choix pour les pages d’accueil qui nécessitent une navigation supplémentaire ou des blocs de contenu pris en charge sur la gauche.

Deux colonnes avec barre droite

Diagramme : mise en page à deux colonnes avec barre droite

Avec 2 Columns with Right Bar ​mise en page, la zone de contenu principale est suffisamment grande pour accueillir une image ou une bannière accrocheuse. Cette disposition est également souvent utilisée pour les pages de produit avec des blocs de contenu pris en charge à droite.

Trois colonnes

Diagramme : mise en page à trois colonnes

La variable 3 Column ​La mise en page comporte une colonne centrale suffisamment large pour le texte principal de la page, avec une marge de navigation supplémentaire et des blocs de contenu de prise en charge de chaque côté.

Vide

Diagramme - disposition vide

La variable Empty ​La mise en page peut être utilisée pour définir des mises en page personnalisées.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de