Layout di pagina
Il layout di ogni pagina del punto vendita è costituito da sezioni o contenitori distinti che definiscono l'intestazione, il piè di pagina e le aree di contenuto della pagina. A seconda del layout, ogni pagina può avere una, due, tre colonne o più. Puoi considerare il layout come la piantina della pagina e assegnare un layout specifico da utilizzare come predefinito per le pagine CMS, prodotto e categoria.
Nella pagina, i blocchi di contenuto vengono spostati per riempire lo spazio disponibile, in base alla sezione del layout di pagina a cui sono assegnati. Se si modifica il layout da un layout a tre colonne a un layout a due colonne, il contenuto dell'area principale si espande fino a riempire lo spazio disponibile. Inoltre, eventuali blocchi associati alla barra laterale non utilizzata sembrano scomparire. Tuttavia, se ripristini il layout a tre colonne, i blocchi vengono nuovamente visualizzati. Questo approccio fluido, o layout liquido, consente di modificare il layout della pagina senza dover rielaborare il contenuto. Se si è abituati a lavorare con singole pagine HTML, questo approccio modulare blocco predefinito richiede un modo di pensare diverso.
Configurare i layout predefiniti
-
Nella barra laterale Admin, passa a Stores > Settings>Configuration.
-
Nel pannello a sinistra in General, scegli Web.
-
Espandere
-
Scegliere Default Product Layout da utilizzare per le pagine di prodotti.
Questa impostazione determina il layout utilizzato per impostazione predefinita per le pagine di prodotto.
No layout updates- Gli aggiornamenti del layout non sono disponibili per le pagine di prodotto.Empty- Utilizza un layout vuoto per le pagine di prodotti.1 column- Utilizza un layout a colonna singola per le pagine di prodotto.2 columns with left bar- Utilizza un layout a due colonne con barra laterale a sinistra per le pagine di prodotti.2 columns with right bar- Utilizza un layout a due colonne con barra laterale a destra per le pagine di prodotti.3 columns- Utilizza un layout a tre colonne con barre laterali a sinistra e a destra per le pagine di prodotti.
Quando Page Builder è abilitato, sono disponibili altre opzioni a larghezza intera. Puoi quindi utilizzare gli strumenti di contenuto Page Builder per progettare il layout delle pagine di prodotto.
Page -- Full Width- Utilizza il layout Pagina - Larghezza intera per le pagine di prodotto.Category -- Full Width- Utilizza il layout Categoria - Larghezza intera per le pagine di prodotti.Product -- Full Width- (Consigliato) Utilizza il layout Prodotto - Larghezza intera per le pagine di prodotti.
-
Scegliere Default Category Layout da utilizzare per le pagine delle categorie.
Questa impostazione determina il layout utilizzato per impostazione predefinita per le pagine delle categorie.
No layout updates- Gli aggiornamenti del layout non sono disponibili per le pagine delle categorie.Empty- Utilizza un layout vuoto per le pagine delle categorie.1 column- Utilizza un layout a colonna singola per le pagine delle categorie.2 columns with left bar- Utilizza un layout a due colonne con barra laterale a sinistra per le pagine delle categorie.2 columns with right bar- Utilizza un layout a due colonne con barra laterale a destra per le pagine delle categorie.3 columns- Utilizza un layout a tre colonne con barre laterali a sinistra e a destra per le pagine delle categorie.
Quando Page Builder è abilitato, sono disponibili altre opzioni a larghezza intera. Puoi quindi utilizzare gli strumenti di contenuto Page Builder per progettare il layout delle pagine delle categorie.
Page -- Full Width- Utilizza il layout Pagina - Larghezza intera per le pagine delle categorie.Category -- Full Width- (Consigliato) Utilizza il layout Categoria - Larghezza intera per le pagine delle categorie.Product -- Full Width- Utilizza il layout Prodotto - Larghezza intera per le pagine delle categorie.
-
Scegliere Default Page Layout da utilizzare per le pagine CMS.
Questa impostazione determina il layout utilizzato per impostazione predefinita per le pagine CMS.
No layout updates- Gli aggiornamenti del layout non sono disponibili per le pagine CMS.Empty- Utilizza un layout vuoto per le pagine CMS.1 column- Utilizza un layout a colonna singola per le pagine CMS.2 columns with left bar- Utilizza un layout a due colonne con barra laterale a sinistra per le pagine CMS.2 columns with right bar- Utilizza un layout a due colonne con barra laterale a destra per le pagine CMS.3 columns- Utilizza un layout a tre colonne con barre laterali a sinistra e a destra per le pagine CMS.
Quando Page Builder è abilitato, sono disponibili altre opzioni a larghezza intera. Puoi quindi utilizzare gli strumenti di contenuto Page Builder per progettare il layout delle pagine CMS.
Page -- Full Width- (consigliato) usa il layout Pagina - Larghezza intera per le pagine CMS.Category - Full Width- Utilizza il layout Categoria - Larghezza intera per le pagine CMS.Product - Full Width- Utilizza il layout Prodotto - Larghezza intera per le pagine CMS.
-
Al termine, fare clic su Save Config.
Layout di pagina standard
Una colonna
Il layout 1 Column può essere utilizzato per creare una home page di grandi dimensioni con un'immagine di grandi dimensioni o un punto focale. È inoltre una buona scelta per una pagina di destinazione o qualsiasi altra pagina con una combinazione di testo, immagini e video.
Due colonne con barra a sinistra
Il layout 2 Columns with Left Bar viene spesso utilizzato per le pagine con navigazione a sinistra, ad esempio un catalogo o pagine dei risultati di ricerca con navigazione a livelli. Si tratta inoltre di una scelta eccellente per le home page che richiedono una navigazione aggiuntiva o blocchi di contenuto di supporto a sinistra.
Due colonne con barra a destra
Con un layout 2 Columns with Right Bar, l'area del contenuto principale è sufficientemente grande da consentire la visualizzazione di immagini o banner accattivanti. Questo layout viene spesso utilizzato anche per le pagine di prodotto con blocchi di contenuto di supporto a destra.
Tre colonne
Il layout 3 Column ha una colonna centrale sufficientemente ampia per il testo principale della pagina, con spazio su ciascun lato per ulteriori elementi di navigazione e blocchi di contenuto di supporto.
Vuoto
Il layout Empty può essere utilizzato per definire layout di pagina personalizzati.