Layout pagine categorie prodotti

Layout pagine categorie prodotti

Ultimo aggiornamento
Tempo di lettura
Livello utente
26 Agosto 2021
10 minuti
Utente amministrativo
Utente collaboratore
Il template Premium comprende numerosi layout per la pagina categorie prodotti principale e per la pagina categorie prodotti dettaglio utilizzabili sia nella versione Sidemenu che per la versione Fullwidth.

Tipologie di struttura layout pagina catalogo prodotti dettaglio

Allo scopo di rendere più semplice la scelta del layout desiderato da parte dell'utente si consiglia di prendere visione delle informazioni inerenti alle strutture layout sotto indicate
Ogni struttura layout prevede n.5 o più varianti di visualizzazione per la liste categorie e prodotti. 
Per maggiori informazioni visitare la sezione Tipologie di varianti layout per le liste categorie e prodotti nella pagina corrente .
Visita la sezione >>  La struttura dei Template/Layout Categorie   per comprendere al meglio i concetti base.
Visita la sezione >>  Gestione e personalizzazione dei template  per comprendere come modificare o creare una Pagina catalogo prodotti personalizzata.

Struttura Top Image

I layout denominati con  top_image   (es. classB_category_classic_fullwidth_  top_image  _layout_1.html ),   strutturano la pagina nel  seguente modo:
  1. Titolo (H1)   
  2. Descrizione breve  
  3. Immagine Top  
  4. Lista a griglia delle categorie o prodotti a seconda delle variante selezionata  
  5. Sotto Titolo (H2)  
  6. Descrizione estesa  

Versione Sidemenu
Versione Fullwidth


File da utilizzare:  
classB_category_classic_sidemenu_top_image_layout_1.html
classB_category_classic_sidemenu_top_image_layout_2 .html
classB_category_classic_sidemenu_top_image_layout_3 .html
classB_category_classic_sidemenu_top_image_layout_4 .html
classB_category_classic_sidemenu_top_image_layout_5 .html
File da utilizzare:  
classB_category_classic_fullwidth_top_image_layout_1.html
classB_category_classic_fullwidth_top_image_layout_2 .html
classB_category_classic_fullwidth_top_image_layout_3 .html
classB_category_classic_fullwidth_top_image_layout_4 .html
classB_category_classic_fullwidth_top_image_layout_5 .html



Struttura Foto Slider

I layout denominati con  foto_slider   (es. classB_category_classic_fullwidth_  foto_slider  _layout_1.html ),   strutturano la pagina nel  seguente modo:
  1. Titolo (H1)   
  2. Descrizione breve  
  3. Immagini della fotogallery  
  4. Lista a griglia delle categorie o prodotti a seconda delle variante selezionata  
  5. Sotto Titolo (H2)  
  6. Descrizione estesa  

Versione Sidemenu
Versione Fullwidth


File da utilizzare:  
classB_category_classic_sidemenu_foto_slider_layout_1.html
classB_category_classic_sidemenu_foto_slider_layout_2.html
classB_category_classic_sidemenu_foto_slider_layout_3.html
classB_category_classic_sidemenu_foto_slider_layout_4.html
classB_category_classic_sidemenu_foto_slider_layout_5.html
File da utilizzare:  
classB_category_classic_ fullwidth _foto_slider_layout_1.html
classB_category_classic_ fullwidth _foto_slider_layout_2.html
classB_category_classic_ fullwidth _foto_slider_layout_3.html
classB_category_classic_ fullwidth _foto_slider_layout_4.html
classB_category_classic_ fullwidth _foto_slider_layout_5.html

Struttura Dual Right Image

I layout denominati con   dual_right_image   (es. classB_category_classic_fullwidth_  dual_right_image  _layout_1.html ),   strutturano la pagina nel  seguente modo:
  1. Titolo (H1)   
  2. Descrizione breve  
  3. Immagine Top  
  4. Lista a griglia delle categorie o prodotti a seconda delle variante selezionata  
  5. Sotto Titolo (H2)  
  6. Descrizione estesa  
Versione Sidemenu
Versione Fullwidth


File da utilizzare:  
classB_category_classic_sidemenu_dual_right_image_layout_1.html
classB_category_classic_sidemenu_dual_right_image_layout_2.html
classB_category_classic_sidemenu_dual_right_image_layout_3.html
classB_category_classic_sidemenu_dual_right_image_layout_4.html
classB_category_classic_sidemenu_dual_right_image_layout_5.html
File da utilizzare:  
classB_category_classic_fullwidth_dual_right_image_layout_1.html
classB_category_classic_fullwidth_dual_right_image_layout_2.html
classB_category_classic_fullwidth_dual_right_image_layout_3.html
classB_category_classic_fullwidth_dual_right_image_layout_4.html
classB_category_classic_fullwidth_dual_right_image_layout_5.html


Struttura Dual Right Slider

I layout denominati con   dual_right_slider
(es. classB_category_classic_fullwidth_  dual_right_slider  _layout_1 ),   strutturano la pagina nel  seguente modo:
  1. Titolo (H1)   
  2. Descrizione breve  
  3. Immagini della fotogallery  
  4. Lista a griglia delle categorie o prodotti a seconda delle variante selezionata  
  5. Sotto Titolo (H2)  
  6. Descrizione estesa  
Versione Sidemenu
Versione Fullwidth


File da utilizzare:  
classB_category_classic_sidemenu_dual_right_slider_layout_1.html
classB_category_classic_sidemenu_dual_right_slider_layout_2.html
classB_category_classic_sidemenu_dual_right_slider_layout_3.html
classB_category_classic_sidemenu_dual_right_slider_layout_4.html
classB_category_classic_sidemenu_dual_right_slider_layout_5.html
File da utilizzare:
classB_category_classic_fullwidth_dual_right_slider_layout_1.html
classB_category_classic_fullwidth_dual_right_slider_layout_2.html
classB_category_classic_fullwidth_dual_right_slider_layout_3.html
classB_category_classic_fullwidth_dual_right_slider_layout_4.html
classB_category_classic_fullwidth_dual_right_slider_layout_5.html


Struttura Dual Left Image 

I layout denominati con   dual_left_image
(es. classB_category_classic_fullwidth_  dual_left_image  _layout_1),   strutturano la pagina nel  seguente modo:
  1. Titolo (H1)   
  2. Descrizione breve  
  3. Immagini Top   
  4. Lista a griglia delle categorie o prodotti a seconda delle variante selezionata  
  5. Sotto Titolo (H2)  
  6. Descrizione estesa  

Versione Sidemenu
Versione Fullwidth


File da utilizzare:  
classB_category_classic_sidemenu_dual_left_image_layout_1.html
classB_category_classic_sidemenu_dual_left_image_layout_2.html
classB_category_classic_sidemenu_dual_left_image_layout_3.html
classB_category_classic_sidemenu_dual_left_image_layout_4.html
classB_category_classic_sidemenu_dual_left_image_layout_5.html
File da utilizzare:
classB_category_classic_fullwidth_dual_left_image_layout_1.html
classB_category_classic_fullwidth_dual_left_image_layout_2.html
classB_category_classic_fullwidth_dual_left_image_layout_3.html
classB_category_classic_fullwidth_dual_left_image_layout_4.html
classB_category_classic_fullwidth_dual_left_image_layout_5.html

Struttura Dual Left Slider

I layout denominati con   dual_left_slider
(es. classB_category_classic_fullwidth_  dual_left_slider  _layout_1),   strutturano la pagina nel  seguente modo:
  1. Titolo (H1)   
  2. Descrizione breve  
  3. Immagini della fotogallery  
  4. Lista a griglia delle categorie o prodotti a seconda delle variante selezionata  
  5. Sotto Titolo (H2)  
  6. Descrizione estesa  
Versione Sidemenu
Versione Fullwidth


File da utilizzare:
classB_category_classic_sidemenu_dual_left_silder_layout_1.html
classB_category_classic_sidemenu_dual_left_silder_layout_2.html
classB_category_classic_sidemenu_dual_left_silder_layout_3.html
classB_category_classic_sidemenu_dual_left_silder_layout_4.html
classB_category_classic_sidemenu_dual_left_silder_layout_5.html
File da utilizzare:
classB_category_classic_fullwidth_dual_left_slider_layout_1.html
classB_category_classic_fullwidth_dual_left_slider_layout_2.html
classB_category_classic_fullwidth_dual_left_slider_layout_3.html
classB_category_classic_fullwidth_dual_left_slider_layout_4.html
classB_category_classic_fullwidth_dual_left_slider_layout_5.html


Tipologie di struttura layout pagina catalogo prodotti principale

Il Template Premium prevede n.5 layout per la pagina catalogo prodotti principale sia nella versione Sidemenu che nella versione Fullwidth
 
Per creare una nuova struttura personalizzata o modificarne una esistente visita la sezione 

Catalogo prodotti - Home - Layout 1

File da utilizzare:
classB_page_inventory_sidemenu_layout_1.html
classB_page_inventory_fullwidth_layout_1.html

Versione Sidemenu
Versione Fullwidth



Catalogo prodotti - Home - Layout 2

File da utilizzare: 
classB_page_inventory_sidemenu_layout_2.html
classB_page_inventory_fullwidth_layout_2.html

Versione Sidemenu
Versione Fullwidth


Catalogo prodotti - Home - Layout 3

File da utilizzare: 
classB_page_inventory_sidemenu_layout_3.html
classB_page_inventory_fullwidth_layout_3.html

Versione Sidemenu
Versione Fullwidth


Catalogo prodotti - Home - Layout 4

File da utilizzare: 
classB_page_inventory_sidemenu_layout_4.html
classB_page_inventory_fullwidth_layout_4.html

Versione Sidemenu
Versione Fullwidth


Catalogo prodotti - Home - Layout 5

File da utilizzare: 
classB_page_inventory_sidemenu_layout_5.html
classB_page_inventory_fullwidth_layout_5.html

Versione Sidemenu
Versione Fullwidth



Tipologie di varianti layout per le liste categorie e prodotti

Le varianti layout permettono di poter visualizzare la lista delle categorie e prodotti in diverse modalità.
Per modificare il numero di elementi visibili per ogni riga (blocco prodotti e/o categorie) visita la sezione   
Di seguito vengono mostrati degli esempi con le possibili varianti di layout applicabili alle pagine:
  1. Catalogo prodotti - Home
  2. Catalogo prodotti - Dettaglio
  3. Homepage
  4. Pagina prodotti in promozione
  5. Ricerca prodotti 
Per visualizzare la pagina template di esempio dove vengono visualizzati le possibili varianti utilizzabili, associare il template layout  classB_category_grids.html in
Gestione Template > Layout categorie > Pagina Categorie

Layout griglia classica


Layout griglia classica con button rounded stilizzato


Layout griglia classica con button rounded colorato


Layout griglia classica con bordo


Layout griglia classica con bordo - Button rounded e stilizzato


Layout griglia classica con bordo - Button rounded colorato


Layout griglia classica con testo 


Layout griglia classica con testo - Button rounded e stilizzato


Layout griglia classica con testo - Button rounded colorato


Layout griglia dual - immagine sinistra con testo - Button rounded e stilizzato


Layout griglia dual - immagine sinistra con testo - Button rounded colorato


Layout griglia dual - immagine destra con testo - Button rounded e stilizzato


Layout griglia dual - immagine destra con testo - Button rounded colorato



    • Related Articles

    • Layout pagine categorie prodotti

      Ultimo aggiornamento Tempo di lettura Livello utente 26 Agosto 2021 1 minuto Utente amministrativo Utente collaboratore Il template Basic comprende n. 1 layout per la pagina prodotti principale e n.1 layout per la pagina prodotti dettaglio. Visita la ...

    • Layout menu prodotti

      Ultimo aggiornamento Tempo di lettura Livello utente 26 Agosto 2021 3 minuti Utente amministrativo Utente collaboratore Il menù prodotti si trova sulla sinistra del Template E-commerce Premium e permette di poter navigare per categorie e sotto ...

    • Layout pagine informative

      Ultimo aggiornamento Tempo di lettura Livello utente 26 Agosto 2021 1 minuto Utente amministrativo Utente collaboratore Il template Premium include pagine informative già pre-configurate e permette di poter creare pagine personalizzate su una ...

    • Layout pagine informative

      Ultimo aggiornamento Tempo di lettura Livello utente 26 Agosto 2021 1 minuto Utente amministrativo Utente collaboratore Il template Basic include pagine informative già pre-configurate e permette di poter creare pagine personalizzate su una ...

    • Layout Generale

      Ultimo aggiornamento Tempo di lettura Livello utente 15/09/2021 2 minuti Utente amministrativo Utente collaboratore Introduzione La sezione layout generale permette di poter personalizzare dalla propria home page a gli elementi che sono utilizzati in ...