Elementor: Come creare un sito Responsive

Lo sapevi che le visite da mobile di un sito hanno supera le visite da desktop?

In questo articolo ti mostrerò come impostare il tuo sito per regalare un user Experience da urlo!

Quello che imparerai ti servirà per eliminare tutti i classici errori che si fanno quando si costruisce un sito web.

Come sviluppatore di siti web mi trovo spesso ad aiutare clienti che mi chiedono di risolvere i problemi più disparati.

Per anni cercavo in rete come aiutarli e principalmente trovavo articoli di autori con competenze ma che non riuscivano alla fine a farmi capire come risolvere il problema. 

Ho dunque creato questo blog per aiutare sviluppatori come me dando un valore pratico e non teorico per risolvere facilmente i problemi.

Sei pronto?

Partiamo

Responsive o Mobile

Prima di mostrarti come creare un sito Responsive voglio rispondere alla domanda che fanno in molti e cioè “è meglio un sito Responsive o un sito Mobile?”

Vediamo innanzitutto la differenza.

Un sito Responsive è lo stesso sito web che si adatta ai vari dispositivi. (Per adesso prendi per buona questa definizione poi ti spiego il perchè)

Un sito mobile friendly è un sito completamente diverso sviluppato ad hoc con una struttura leggera e utilizza anche un dominio diverso, spesso un sottodominio.

Queste due tipologie di siti si fondono spesso infatti un sito responsive deve essere anche mobile friendly

Google nelle linee guida per gli sviluppatori predilige un sito Responsive infatti all’interno di queste possiamo leggere:

“il passaggio di un sito desktop esistente a un sito per dispositivi mobili prevede l’utilizzo delle sezioni esistenti dei contenuti del sito desktop e la relativa disposizione in un modello di progettazione ottimizzato per i dispositivi mobili”.

Come ti ho detto all’inizio di questo articolo ormai i siti mobile sono indispensabili non solo ad evitare il bounce rate ma anche per migliorare l’indicizzazione su Google.

Come rendere un sito Responsive

Innanzitutto scegli un tema aggiornato infatti tutti i temi nuovi e quelli che vengono costantemente aggiornati già sono responsive.

Superato questo step non ti resta altro da fare che progettare i tuoi contenuti Mobile Friendly

Vediamo come fare

Dovresti già aver notato che tutte le impostazioni delle sezioni, delle colonne e de widget di Elementor hanno accanto un icona a forma di schermo e corrisponde alla modalità Desktop

icone responsive

Se clicchi su questa icona appariranno altre due icone che rappresentano la modalità Tablet e Smartphone

icone responsive

se clicchi su una di queste icone questa si attiverà

icone responsive

le impostazioni che inserisci nel campo con l’icona attivata (in questo caso la modalità Smartphone) saranno applicate solo alle visualizzazioni del sito da Smartphone

Elementor la guida definitiva

Se ti piacciono i miei articoli ho scritto un eBook per te

“Elementor: la Guida Completa”

Facciamo un esempio

vuoi modificare la dimensione del font di un testo perchè è troppo grande per la visualizzazione da Smartphone

nel campo Dimensione del menu Tipografia del Widget hai inserito per esempio 30px ora il testo avrà questa dimensione su tutti i dispositivi

Un font con dimensione 30px è sicuramente troppo grande per chi visualizza il testo da smartphone

come abbiamo visto ti basta cliccare sull’icona desktop ed ecco che potrai scegliere, selezionando una per volta le altre due icone, la dimensione del testo per Tablet e/o per Smartphone.

Tutto chiaro?

Spero di si

Prima di vedere come mostrare o nascondere i contenuti a seconda del dispositivo utilizzato vediamo perchè farlo.

Come ti ho detto qualche rigo più su l’esperienza utente è importantissima quando si progetta un sito

Per facilitare il caricamento da mobile e per evitare scroll infiniti del sito che potrebbero portare l’utente ad abbandonare il sito alcune sezioni possono essere create appositamente per la versione mobile.

La cosa è molto semplice

Crea il contenuto che vuoi utilizzando le impostazioni per i vari dispositivi che abbiamo appena visto

una volta che il tuo contenuto è pronto non devi far altro che andare nel Tab Avanzato del contenuto e nel menu Responsive scegliere su quale dispositivo deve essere nascosto il contenuto

menu responsive

Nella foto che vedi qui sopra il contenuto è stato nascosto su Desktop e Tablet

Quando clicchi sull’icona di un dispositivo per inserire le impostazioni per quel dispositivo la tua pagina prenderà la forma del dispositivo

N.B. anche se hai impostato che un contenuto venga nascosto su uno o più dispositivi per te sarà sempre visibile nella pagina di costruzione.

Vediamo un piccolo trucco per visualizzare come appare la pagina sui vari dispositivi

Innanzitutto ti consiglio di utilizzare come browser per sviluppare i siti Chrome in questo modo dopo aver aperto la la pagina che stai creando in anteprima potrai andare in altro a destra e cliccare sull’icona con i tre puntini

Nel menu che si apre scegli “altri strumenti” e poi “Strumenti per Sviluppatori”

strumenti sviluppatori

Cliccando sull’icona in basso a sinistra(come quella nell’immagine qui sotto) potrai scegliere il dispositivo su cui visualizzare la tua pagina.

responsive

Menu

Anche il menu del sito deve essere Responsive infatti il widget menu di Elementor è diviso in due parti.

nella parte inferiore “Menu a Discesa” si trovano le impostazioni responsive

menu

La prima impostazione che troviamo è il “Punto di Interruzione

Con questa impostazione possiamo decidere se il Menu responsive si attiverà per Tablet e Smartphone (<1025px) o solo per Smartphone (<768px)

Un’altra impostazione importante è “Pulsante in due Stadi” con cui possiamo decidere di visualizzare il menu ridotto ad icona (chiamata hamburger) oppure aperto.

Con l’opzione “Commutatore Allineamento” possiamo posizionare il Menu a sinistra, centrarlo o a destra.

Prima di chiudere voglio rispondere ad una domanda che trovo spesso nei vari gruppi e cioè

“se ho una sezione a due colonne in cui nella prima colonna ho il logo e nella seconda il menu, come faccio su smartphone ad avere il logo nella colonna in alto e sotto la colonna con il menu?”

Questa domanda che può sembrare strana in realtà è giusta.

A volte succede che nel passaggio da desktop a responsive può succedere che le colonne si invertano

Questo è un problema che potresti avere anche in altre parti del sito fortunatamente Elementor ci consente di risolverlo facilmente.

Per fare questo innanzitutto devi inserire nelle colonne, solo per la versione Smartphone, una larghezza del 100%

Ora devi non devi far altro che invertire le colonne.

Per fare ciò vai in Avanzato>Responsive e seleziona inverti colonna scegliendo su quale dispositivo invertire la colonna (Tablet, Smartphone o entrambi).

Voglio darti alcuni consiglii

  • Cerca di creare siti facili da usare, semplificando al massimo le azioni che un utente deve fare,
  • Evita, se puoi, di inserire animazioni in flash e se le inserisci limitale alla versione desktop come ti ho mostrato
  • Evita che l’utente per trovare quello che cerca debba fare lunghi scroll della versione mobile del sito, usa gli Anchor Menu.
  • Controlla sempre le dimensioni dei tuoi testi
  • Controlla le immagini e cambia le impostazioni.

Bene siamo arrivati alla fine di questo articolo, spero che ti aiuti a migliorare le tue conoscenze.

Ci vediamo nei commenti.

A presto!

Ho un favore da chiederti, se questo articolo ti è piaciuto, condividilo.

Potrebbe anche piacerti

Elementor la guida completa

Ultimi articoli

Categorie
Passa a Elementor Pro
Per il tuo hosting
Per creare la tua Privacy Policy
Copyright 2020 © Wp Semplice - Privacy Policy

Gli articoli ti sono stati utili?

Iscriviti alla newsletter per restare sempre aggiornato! 

Grazie ti contatteremo a breve