Evita questo errore quando crei layout responsive con un page builder su WordPress

Scritto da Tiziano Fogliata
Aggiornato il

I page builder come Elementor, Beaver Builder, Thrive Architect e molti altri, sono stati una rivoluzione su WordPress perché hanno permesso a un gran numero di persone di realizzare pagine e siti in modo relativamente veloce e in piena autonomia, anche senza particolari competenze in ambito di web design o programmazione.

L’aver reso accessibile al grande pubblico la possibilità di creare interi siti o semplici pagine web, però non permette ancora di ottenere risultati esenti da errori al 100%.

Inoltre, in molti casi, la mancata conoscenza di alcuni concetti base del web design può causare dei problemi. Ad esempio, il fatto che i page builder consentano di creare facilmente pagine responsive, ossia che si adattano perfettamente (o quasi) ai grandi schermi dei pc desktop così come ai display dei tablet o degli smartphone, non significa che qualsiasi cosa inserisca sulla pagina  si tradurrà magicamente in un layout adatto a essere visualizzato correttamente su qualsiasi dispositivo.

Nel video sottostante ti mostro una classica situazione di questo tipo. Si tratta di uno dei problemi che mi è capitato di osservare più frequentemente nelle persone che utilizzano un page builder. Non si tratta di un qualcosa che affligge un particolare page builder, ma più che altro di un modo errato di utilizzare questi strumenti.

Nel video ho utilizzato Elementor per mostrare questa problematica, ma avrei potuto fare la stessa cosa con Beaver Builder, Divi, o altri page builder.

Come puoi vedere nel video, il nocciolo della questione e l’origine del problema sta nel corretto utilizzo delle righe (spesso definite anche sezioni) e delle colonne.

Inserire elementi su righe differenti, non è la stessa cosa rispetto a inserire più elementi all’interno di una medesima colonna. Anche se nella modalità di visualizzazione desktop gli elementi sembrano disposti correttamente, non è detto che anche su smartphone tale ordine venga rispettato. Le colonne presenti in una riga (o sezione) tenderanno infatti a disporsi una sotto l’altra quando le dimensioni della finestra si riducono.

Per questo motivo è opportuno capire come funzionano i layout responsive, imparare a utilizzare correttamente il proprio page builder e testare sempre anche su tablet e smartphone i layout realizzati, in modo da scoprire subito eventuali problemi.

Ti invito anche a dare un’occhiata alla prova comparativa tra i 3 page builder Elementor, Beaver Builder e Divi.

Articoli che ti suggerisco…

17 commenti su “Evita questo errore quando crei layout responsive con un page builder su WordPress”

  1. Perfetto mi hai sciolto un Bel dubbio, ora vorrei chiederti se puoi rispondermi ovvio, come elimino la spaziatura tra tre foto da fare sembrare una sola tale da dare un link diverso alle singole foto grazie

    Rispondi
  2. Ciao, non riesco a trascinare i widget all’interno della sezione, né immagini né testo, né gli altri widget. Quale puo essere il problema? grazie

    Rispondi
  3. Ciao Tiziano, ho un problema un po’ diverso da questi ma spero tu mi possa comunque aiutare.
    Il sito che ho creato nella versione mobile lascia un margine a destra per me inspiegabile. Avresti modo di spiegarmi perchè?

    Rispondi
    • Ciao Benedetta, mi piacerebbe poterti dare la risposta in 5 secondi, ma purtroppo bisognerebbe dedicare un bel po’ di tempo per analizzare come è stata costruita la pagina per cercare di individuare quale fattore ha generato l’errore. Tra l’altro ti dico che visualizzando il sito da iPhone lo spazio vuoto a destra non compare.

      Rispondi
    • Ciao Benedetta, ho riscontrato il tuo stesso problema nel creare una landing page con Elementor…
      nella versione mobile lascia un margine a destra bianco…non capisco il perché!
      Tu sei riuscita a risolvere?
      Grazie in anticipo!

      Rispondi
  4. Ciao Tiziano,
    sto creando una pagina prodotto personalizzata. Sono riuscita a inserire tutto quello che volevo ma solo in questa pagina risulta tutto sottolineato e nell’header si è sottolineato anche il motto.
    Ho provato a modificare la tipografia dappertutto, ma dopo ore non sono ancora riuscita a trovare la soluzione. se puoi darmi qualche dritta, grazie mille.

    Rispondi
  5. Ciao Tiziano, io sto riscontrando un problema con il menu mobile. Ci tengo a precisare che ho fatto tutto elementor e fino a qualche giorno fa funzionava tutto, poi dopo alcuni aggiornamenti (compreso elementor) ho notato che il menu sulla versione mobile non funziona. Ho pulito la cache, ho disattivato tutti i plugin e ho notato che il problema nasce proprio da elementor, ma non so come fare. Potresti darmi qualche consiglio?

    Rispondi
    • Ciao, purtroppo rispondere a domande come questa senza mettere mano al sito richiederebbe una sfera di cristallo ;) Può darsi comunque sia un problema causato da un aggiornamento della versione di Elemento. In questo caso potresti provare a installare una versione precedente di Elementor e prova anche a contattare il loro supporto.

      Rispondi
  6. Ciao Tiziano, ho creato il mio sito con elementor, tutto bene nella parte desktop ma se vado in modalità smartphone per correggere, le sezioni si sovrappongono, da cosa dipende? La prima parte presenta il menu e subito sotto una sezione a 3 colonne, poi una sezione a 2 colonne per un’altro argomento e quando entro in modalità smartphone per diminuire i testi quest’ultima a 2 colonne va sopra la prima fino a metà circa…e così via…poi l’ultima sezione finisce dietro il footer (creato con il template builder)

    Rispondi
  7. Ciao Tiziano! Io ho questo problema ma con l’intestazione. Praticamente nella versione mobile e tablet gli elementi e i pulsanti non ci sono! Come posso risolvere ?

    Rispondi

Lascia un commento