Mises en page
La disposition 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 comporter une, deux, trois colonnes ou plus. Vous pouvez considérer la mise en page comme le plan d’étage de la page et affecter une mise en page spécifique à utiliser par défaut pour les pages de CMS, de produits et de catégories.
Sur la page, les blocs de contenu flottent pour remplir l’espace disponible, en fonction de la section de la mise en page où ils sont affectés à apparaître. Notez que si vous modifiez la disposition pour passer d’une disposition à trois colonnes à une disposition à deux colonnes, le contenu de la zone principale s’étend pour remplir l’espace disponible. Notez également que tous les blocs associés à la barre latérale inutilisée semblent disparaître. Cependant, si vous restaurez la disposition à trois colonnes, les blocs réapparaîtront. Cette approche fluide, ou mise en page liquide, permet de modifier la mise en page sans avoir à retravailler le contenu. Si vous êtes habitué à travailler avec des pages HTML individuelles, cette approche modulaire bloc de création nécessite une autre façon de penser.
Configurer les dispositions par défaut
-
Dans la barre latérale Admin, accédez à Stores > Settings>Configuration.
-
Dans le panneau de gauche sous General, choisissez Web.
-
Développez
-
Choisissez le Default Product Layout à utiliser pour les pages de produits.
Ce paramètre détermine la disposition utilisée par défaut pour les pages de produits.
No layout updates- Les mises à jour de disposition 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 disposition sur une seule colonne pour les pages de produits.2 columns with left bar- Utilise une disposition à deux colonnes avec la barre latérale gauche pour les pages de produits.2 columns with right bar- Utilise une disposition à deux colonnes avec la barre latérale droite pour les pages de produits.3 columns- Utilise une disposition à trois colonnes avec des barres latérales à gauche et à droite pour les pages de produits.
Lorsque Page Builder est activé, d’autres options de pleine largeur sont disponibles. Vous pouvez ensuite utiliser les outils de contenu du Créateur de page pour concevoir la mise en page de vos pages de produit.
Page -- Full Width: utilise la disposition Page - Pleine largeur pour les pages de produits.Category -- Full Width: utilise la mise en page Catégorie - Pleine largeur pour les pages de produits.Product -- Full Width- (Recommandé) Utilise la disposition Produit - Pleine largeur pour les pages de produit.
-
Choisissez le Default Category Layout à utiliser pour les pages de catégorie.
Ce paramètre détermine la disposition utilisée par défaut pour les pages de catégorie.
No layout updates- Les mises à jour de disposition ne sont pas disponibles pour les pages de catégorie.Empty- Utilise une mise en page vierge pour les pages de catégorie.1 column- Utilise une disposition sur une seule colonne pour les pages de catégorie.2 columns with left bar: utilise une disposition à deux colonnes avec la barre latérale gauche pour les pages de catégories.2 columns with right bar: utilise une disposition à deux colonnes avec la barre latérale droite pour les pages de catégories.3 columns: utilise une disposition à trois colonnes avec des barres latérales à gauche et à droite pour les pages de catégories.
Lorsque Page Builder est activé, d’autres options de pleine largeur sont disponibles. Vous pouvez ensuite utiliser les outils de contenu du Créateur de page pour concevoir la mise en page de vos pages de catégorie.
Page -- Full Width: utilise la disposition Page - Pleine largeur pour les pages de catégorie.Category -- Full Width- (Recommandé) Utilise la disposition Catégorie - Pleine largeur pour les pages de catégorie.Product -- Full Width: utilise la mise en page Produit - Pleine largeur pour les pages de catégorie.
-
Choisissez le 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 disposition ne sont pas disponibles pour les pages CMS.Empty- Utilise une mise en page vierge pour les pages CMS.1 column- Utilise une disposition sur une seule colonne pour les pages CMS.2 columns with left bar- Utilise une disposition à deux colonnes avec la barre latérale gauche pour les pages CMS.2 columns with right bar- Utilise une disposition à deux colonnes avec la barre latérale droite pour les pages CMS.3 columns: utilise une disposition à trois colonnes avec des barres latérales à gauche et à droite pour les pages CMS.
Lorsque Page Builder est activé, d’autres options de pleine largeur sont disponibles. Vous pouvez ensuite utiliser les outils de contenu du Créateur de page pour concevoir la mise en page de vos pages CMS.
Page -- Full Width- (recommandé) Utilise la disposition Page - Pleine largeur pour les pages CMS.Category - Full Width: utilise la mise en page Catégorie - Pleine largeur pour les pages CMS.Product - Full Width: utilise la mise en page Produit - Pleine largeur pour les pages CMS.
-
Cliquez ensuite sur Save Config.
Mises en page standard
Une colonne
La disposition 1 Column peut être utilisée pour créer une page d’accueil dramatique avec une grande image ou un point focal. Il s’agit également d’un bon choix pour une page de destination ou toute autre page qui combine texte, images et vidéo.
Deux colonnes avec barre gauche
La disposition 2 Columns with Left Bar est souvent utilisée pour les pages avec navigation à gauche, comme un catalogue ou des pages de résultats de recherche avec navigation superposée. 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 de prise en charge sur la gauche.
Deux colonnes avec barre de droite
Avec une disposition 2 Columns with Right Bar, la zone de contenu principale est suffisamment grande pour accueillir une image ou une bannière attrayante. Cette disposition est également souvent utilisée pour les pages de produits avec des blocs de contenu complémentaire à droite.
Trois colonnes
La disposition 3 Column comporte une colonne centrale suffisamment large pour le texte principal de la page, avec de l’espace de chaque côté pour une navigation supplémentaire et des blocs de contenu connexe.
Vide
La mise en page Empty peut être utilisée pour définir des mises en page personnalisées.