Seleziona una pagina

Impostare modulo negozio a 2 colonne su mobile

In questo post puoi trovare un codice che fa aumentare la larghezza dei contenuti del tuo sito Divi su mobile smartphone.

Soluzione

Per impostazione predefinita nei dispositivi mobile, vedremo il modulo negozio in un layout a una colonna singola. Quindi, se ti va bene vedere un prodotto, perfetto, ma con le dimensioni dello schermo dello smartphone più grandi al giorno d’oggi, possiamo aggiungere un codice che consente a due prodotti di posizionarsi uno accanto all’altro nel modulo Negozio di Divi.
Ecco il codice che va inserito in Divi > Opzioni Tema> Generali> Codice CSS Personalizzato:

/*** IMPOSTA 2 COLONNE SU MOBILE NEGOZIO ***/
@media screen and (max-width: 479px) {
    .et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) {
        width: 45.25%!important;
        margin: 0 9.5% 9.5% 0!important;
    }
    .et_gallery_item:nth-child(2n), .et_pb_column .et_pb_grid_item:nth-child(2n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(2n), .et_pb_column .woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n) {
        margin-right: 0!important;
    }
}
Uno screenshot di come dovrebbe essere il risultato:
Modulo negozio a due colonne Divi

In questo post, ti abbiamo mostrato come modificare la visualizzazione delle colonne per dispositivo mobile come tablet e smartphone. Ora sei in grado di mostrare due prodotti uno accanto all’altro sulla maggior parte degli screen mobile accessibli al giorno d’oggi. Questo è un ottimo modo per ridurre il tempo di scorrimento e far vedere ai tuoi visitatori più prodotti contemporaneamente.

Spero che questo post sia stato utile e tu abbia trovato una soluzione. In caso contrario, lascia un commento qua sotto!

Mostra/Nascondi Commenti (1 commenti)
L

1 commento

  1. Grazie, mi sei stasto molto utile!

    Rispondi

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ti potrebbe anche interessare…

Dic 21 2022

Come scrivere articoli per il tuo blog di WordPress

In questo articolo vi raccontiamo come scrivere articoli efficaci per i blog di WordPress e perchè è importante farlo.
Ottimizzare homepage
Dic 21 2022

Come ottimizzare la homepage del tuo sito web

Se sei alla ricerca del metodo più efficace per ottimizzare pagine, in questo post ti spiego come è possibile farlo.
Dic 15 2022

Come installare un plugin su WordPress

Installare un plugin su Wordpress è qualcosa che si deve assolutamente sapere per integrare nuove funzionalità al tuo sito Web.
Dic 14 2022

Come indicizzare il tuo sito su Google

In questo articolo troverai tutte le indicazioni necessarie per riuscire a indicizzare il tuo sito su Google al meglio.
Dic 14 2022

Come ricevere più commenti nel tuo blog

In questo articolo vedremo come è possibile ricevere più commenti nel tuo blog e aumentare le interazioni social.
Dic 12 2022

Come aggiornare i plugin di WordPress

Aggiornare plugin è un’attività essenziale affinché Wordpress funzioni al meglio. In questo articolo ti mostro come aggiornare i plugin del tuo sito.
Dic 11 2022

Cosa sono i Page Builder per WordPress

Oggi vediamo cosa sono i page builder per Wordpress e perché possono rappresentare uno strumento utile ed efficace.
Nov 17 2022

Come aggiungere le icone Font Awesome al tema Divi

In questo post ti mostro come aggiungere icone Font Awesome al tuo sito WordPress con un plugin o integrando manualmente con Divi.
Ottimizzare le immagini per la SEO
Nov 15 2022

Come ottimizzare le immagini per la SEO in Divi

Scopri come ottimizzare le immagini del tuo sito Divi in ottica SEO in questa guida passo dopo passo!
Modulo Divi Blur
Nov 14 2022

Come spostare il titolo del modulo Divi Blur sopra l’immagine

Oggi ti mostrerò come spostare il titolo del modulo Divi Blurb sopra l’immagine grazie a un frammento di codice.
Divi Logo

Vuoi conoscere Divi?

Divi Builder WordPress

Crea siti Web professionali con i layout Divi

Prova i layout per il tema Divi, usato da web agency e professionisti di WordPress

Membership

Sepa

29,00 €  per sempre!

Con l’aggiunta di nuovi layout, il prezzo
può essere soggetto a modifiche.

R Più di 50 Layout Divi
R Download illimitati
R DOCUMENTAZIONE
R Assistenza PER email

29,00 €  per sempre!

Con l’aggiunta di nuovi layout, il prezzo
può essere soggetto a modifiche.

Perchè scegliere Divi Design Studio

Più di 70 layout Divi pronti da usare per i tuoi siti WordPress

Scarica la collezione completa dall’area download del tuo account e importa i layout Divi nel tuo sito WordPress o in quello dei tuoi clienti.

Realizzazione di Layout Divi personalizzati e su misura

Il nostro team è in grado di realizzare layout Divi personalizzati con un design unico e su misura che rispecchi la propria azienda o personalità.

Esperienza decennale nello sviluppo di siti WordPress

L’esperienza decennale e la professionalità del nostro team garantiscono lo sviluppo di layout Divi adatti a molti settori commerciali.