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 piantina della pagina e assegna un layout specifico da utilizzare come predefinito per le pagine CMS, prodotto e categoria.

Sulla pagina, i blocchi di contenuto vengono spostati per riempire lo spazio disponibile, in base alla sezione della sezione layout di pagina dove sono assegnati per essere visualizzati. 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 modulare, blocco predefinito Questo approccio richiede un modo di pensare diverso.

Due colonne standard con layout di pagina con barra a sinistra {width="700" modal="regular"}

Configurare i layout predefiniti

  1. Il giorno Amministratore barra laterale, vai a Stores > Settings>Configuration.

  2. Nel pannello a sinistra sotto General, scegli Web.

  3. Espandi Selettore di espansione il Default Layouts sezione.

    Layout predefiniti {width="600" modal="regular"}

  4. Scegli la Default Product Layout che desideri 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 dei prodotti.

    Quando Page Builder è attivato, sono disponibili opzioni aggiuntive per l'intera larghezza. Puoi quindi utilizzare gli strumenti di contenuto Page Builder per progettare il layout delle pagine di prodotto.

    • Page -- Full Width - Utilizza il Pagina - Larghezza intera layout delle pagine di prodotto.
    • Category -- Full Width - Utilizza il Categoria - Larghezza intera layout delle pagine di prodotto.
    • Product -- Full Width - (Consigliato) Utilizza il Prodotto - Larghezza intera layout delle pagine di prodotto.
  5. Scegli la 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 è attivato, sono disponibili opzioni aggiuntive per l'intera larghezza. Puoi quindi utilizzare gli strumenti di contenuto Page Builder per progettare il layout delle pagine delle categorie.

    • Page -- Full Width - Utilizza il Pagina - Larghezza intera layout per le pagine delle categorie.
    • Category -- Full Width - (Consigliato) Utilizza il Categoria - Larghezza intera layout per le pagine delle categorie.
    • Product -- Full Width - Utilizza il Prodotto - Larghezza intera layout per le pagine delle categorie.
  6. Scegli la Default Page Layout che desideri 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 la 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 è attivato, sono disponibili opzioni aggiuntive per l'intera larghezza. Puoi quindi utilizzare gli strumenti di contenuto Page Builder per progettare il layout delle pagine CMS.

    • Page -- Full Width - (Consigliato) Utilizza il Pagina - Larghezza intera layout per pagine CMS.
    • Category - Full Width - Utilizza il Categoria - Larghezza intera layout per pagine CMS.
    • Product - Full Width - Utilizza il Prodotto - Larghezza intera layout per pagine CMS.
  7. Al termine, fai clic su Save Config.

Layout di pagina standard

Una colonna

Diagramma: layout a una colonna {modal="regular"}

Il 1 Column ​Il layout può essere utilizzato per creare una pagina iniziale di grande impatto 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

Diagramma: layout a due colonne con barra a sinistra {modal="regular"}

Il 2 Columns with Left Bar ​Il layout viene spesso utilizzato per le pagine con navigazione a sinistra, ad esempio per le pagine di un catalogo o dei risultati di ricerca con navigazione a più 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

Diagramma: layout a due colonne con barra destra {modal="regular"}

Con un 2 Columns with Right Bar ​l'area del contenuto principale è sufficientemente ampia da consentire di visualizzare immagini o banner di grande impatto. Questo layout viene spesso utilizzato anche per le pagine di prodotto con blocchi di contenuto di supporto a destra.

Tre colonne

Diagramma: layout a tre colonne {modal="regular"}

Il 3 Column ​il layout ha una colonna centrale sufficientemente ampia per il testo principale della pagina, con spazio su ciascun lato per una navigazione aggiuntiva e blocchi di contenuto di supporto.

Vuoto

Diagramma - layout vuoto {modal="regular"}

Il Empty ​Il layout può essere utilizzato per definire layout di pagina personalizzati.

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