Modulo per Prestashop versione 16.x.x – 1.7.x.x
Aggiunge paragrafi alla tua home page.
Configura tutti i blocchi che vuoi nella home page del negozio o in altre pagine, usando le speciali TAG. Visualizza più slide di prodotti in unione con il modulo “MXB Featured Products”
Duplicate & customize: questo modulo può essere duplicato con un nome differente: segui le istruzioni che trovi nel file ZIP e usa più copie del modulo contemporaneamente, dedicate a diversi gruppi utente o tutte insieme.
- Usa il menù Migliora > Design > Posizioni per cambiare la posizione del modulo tra gli ancoraggi di Prestashop.
- Con Configura > Parametri negozio > Impostazione clienti > tab “Gruppi”, attiva / disattiva l’accesso dei gruppi utente alle varie copie del modulo.
Configurazione
La pagina di configurazione consente di impostare il formato e le feature generali dei blocchi.
E’ possibile definire l’altezza del blocco inserendo il link “read more” per visualizzarlo per intero, decidere se utilizzare l’effetto dissolvenza quando appaiono nella parte visibile della pagina, e impostare l’ordine di visualizzazione dei blocchi casuale o configurato.
Area CSS
Utilizzando CSS e seguendo l’esempio già impostato è possibile personalizzare l’aspetto dei blocchi a piacere. Inoltre utilizzando l’opzione “Ispeziona” del browser sui vari blocchi lato client, per comprendere la disposizione e l’identificazione dei vari elementi, si può arrivare a stravolgerne completamente il layout.
I blocchi
Un blocco è costituito da un’immagine, titolo e descrizione, un link, una didascalia e alcune impostazioni di visualizzazione.
L’immagine può essere impostata come sfondo del blocco, con le opzioni “ripeti background” e “background fisso”, che non scorre con la pagina.
Eventuale titolo e descrizione vengono sovrapposti all’immagine, se esistente, oppure usati come unico contesto del blocco.
E’ possibile impostare una trasizione da eseguire quando il blocco viene visualizzato nella pagina, e le classi CSS cui deve essere abbinato. La pagina elenca numerose classi standard di Bootstrap, più classi specifiche come “read-more” e “no-borders”
Codice HTML
Il campo “descrizione” può essere utilizzato per inserire codice HTML (usando l’apposita icona [< >] dell’editor) e produrre quindi qualsiasi tipo di contenuto.
Pagina CMS
E’ possibile non impostare immagine e testi e selezionare la pagina CMS da visualizzare nel blocco. In questo caso l’opzione “read-more” è piuttosto utile per limitarne l’altezza.
TAG di MXB Featured Products
Come illustrato nella pagina di creazione di un blocco, è possibile inserire le tag del modulo “MXB Featured Products” per visualizzare al suo interno uno slider di prodotti, sfruttando i filtri del modulo per creare diversi blocchi con prodotti di differente contesto.
Se hai il modulo “mxb_featureproducts” installato:
- Una stringa TAG di “mxb_featureproducts” può essere inserita direttamente nella descrizione per ottenere diversi blocchi che visualizzano le file di prodotti create da “mxb_featureproducts”.
- inseriscila usando il pulsante [< >] dell’editor
- esempio di utilizzo di TAG (vedi le istruzioni di “mxb_featureproducts” per maggiori dettagli)
[mxb_featuredproducts_one products=4, category=2, brand=0, random=1, position=here, slide=1, footer-link=0, filter-text=cotton, best-sales=0, class=my-custom-class, title=Intresting products!] - Nota: usando le TAG o HTML, suggerisco di evitare di caricare l’immagine di background. Rimuovila se l’hai già caricata selezionando l’opzione “rimuovi immagine” e cliccando su “salva”.
Altezza del blocco
Quando titolo o descrizione vengono compilati, l’altezza del blocco (e quindi dell’immagine di sfondo) dipenderà dall’altezza occupata dai testi inseriti. Per impostare un’altezza minima utilizza il CSS personalizzato che trovi nella configurazione di questo modulo, e imposta un valore di “min-height” per il div principale o per la classe CSS personalizzata inserita più sopra. Guarda come è strutturato il file “custom.css” di esempio, che trovi sempre nella configurazione principale del modulo.
Animazioni
- Puoi inserire uno o più paragrafi in un DIV con class = “una delle transizioni elencate più sopra” per renderlo animato.
- Utilizza i pulsanti [< >] dell’editor di testo per modificare direttamente il codice HTML e aggiungere un DIV come in esempio:
<div class="mxb-transition-slide-from-left"><p> ... text or other ... </p></div>"