Rendi il tuo sito Web Elementor più reattivo per i dispositivi mobili

Un sito Web mobile responsive è una parte vitale di qualsiasi attività online.

Google ha utilizzato la velocità di caricamento della pagina mobile come fattore determinante per il ranking di ricerca di qualsiasi sito Web. È principalmente perché più della metà del traffico web globale proviene dal traffico mobile.

Pertanto, un sito Web mobile responsive è inevitabile sia per la salute del tuo sito che per un migliore posizionamento nei motori di ricerca di Google. In questo articolo, ci concentreremo su come creare un sito Web mobile responsive con il page builder Elementor.

• Qual è il design responsive del sito Web di Elementor
• Come regolare le impostazioni Mobile, Desktop e Tab
• Regola il titolo sul tuo display mobile
• Regola l'imbottitura o i margini per il cellulare
• Crea ogni colonna in orizzontale e si adatterà meravigliosamente su tutti i dispositivi
• Cambia l'immagine di sfondo come da vista mobile / desktop
• Cambia la visibilità di qualsiasi sezione sulla vista desktop / mobile
• Cambia l'ordine delle colonne
• Crea una sezione alternativa
• Regola la larghezza della colonna
• Conclusione

Qual è il design responsive del sito Web di Elementor

Un layout reattivo funziona in modo innovativo ridimensionando automaticamente tutti i contenuti in base alle dimensioni dello schermo. Ridimensiona automaticamente le immagini e i contenuti sullo schermo del cellulare in modo che i tuoi spettatori possano visualizzare i tuoi contenuti senza alcuno sforzo.

Molti di noi acquistano un tema che afferma di essere anche mobile responsive; tuttavia, le cose possono essere frustranti quando il design del tuo tema si rompe completamente sullo schermo del cellulare.

Per superare tali situazioni, abbiamo escogitato una soluzione reattiva mobile in cui puoi creare il design del tuo sito Web da zero utilizzando strumenti di layout reattivo di Elementor page builder Con l'aiuto di questi strumenti reattivi per dispositivi mobili, puoi modificare qualsiasi angolo del layout del tuo sito Web, in particolare la tipografia, il riempimento e l'allineamento dei margini e dei dispositivi mobili. Inoltre, potrai modificare le impostazioni della colonna e ordinare su Mobile.

Ora puoi modificare le impostazioni mobili della tua pagina passando alla modalità di visualizzazione mobile e controllare le seguenti opzioni per regolare in base al layout mobile.

1. Controlla se qualche titolo sembra troppo grande su uno schermo mobile.
2. Controlla l'imbottitura del contenuto o dello spazio ai lati del contenuto
3. Controlla l'allineamento della colonna della pagina, come appare perfetto; centrato, a destra o a sinistra
4. Controlla l'ordine delle colonne, se appaiono nell'ordine giusto o devi cambiarlo.

Ora, approfondiamo e scopriamo come andranno le cose con Elementor Page builder.

Come regolare le impostazioni Mobile, Desktop e Tab

Quasi tutte le funzioni modificabili hanno la possibilità di regolare le impostazioni Mobile, Desktop e Tab. se fai clic sulla modalità reattiva nella parte inferiore del menu

Regola il titolo sul tuo display mobile

A volte vogliamo un'intestazione audace e di primo piano sul nostro sito desktop, e sembra perfettamente a posto sul display del desktop, ma quando si attiva la visualizzazione Mobile, l'intestazione prende l'intero schermo e non sembra adatta.

È possibile regolare le dimensioni del testo di qualsiasi elemento di testo su scheda e Dispositivi mobili. Puoi anche impostare dimensioni di testo diverse per le intestazioni dei dispositivi mobili che si adattano perfettamente allo schermo del dispositivo mobile e si adattano meglio allo schermo. In questa pagina demo, ho creato un'intestazione che sembra eccezionale sul sito desktop, mentre sullo schermo mobile prende l'intero schermo.

Se faccio clic sull'opzione di modifica della colonna dell'intestazione, posso accedere alla sezione tipografia in cui posso regolare la dimensione dell'intestazione che appare bene sul desktop e anche sullo schermo mobile. Posso controllare entrambi separatamente. Per la visualizzazione del mio sito desktop, la dimensione dell'intestazione è 49px, ma nella vista Mobile non si adatta

Per riadattare, farò clic sulla modalità reattiva mobile> stile> tipografia> regola la dimensione px a 30 che si adatta facilmente allo schermo del cellulare.

Regola l'imbottitura o i margini per il cellulare

Quando si regolano le imbottiture, si consiglia di non utilizzare i valori in Pixel invece di impostare i valori in EM o percentuale poiché manterrà le dimensioni relative alle dimensioni complessive dello schermo.

Puoi vedere che abbiamo usato il padding come 70px a destra e a sinistra, che si adatta bene al sito desktop; tuttavia la visualizzazione mobile per questa impostazione è un casino completo.

Possiamo riadattare l'imbottitura a 17 px su ciascun lato, quindi risulta essere completamente a posto.

In alternativa, puoi impostare l'intera colonna su 750 px dove il tuo contenuto verrà visualizzato in una casella senza bisogno di regolare lo schermo sia nella visualizzazione desktop che mobile; regolerà automaticamente il contenuto all'interno della scatola.

Crea ogni colonna in orizzontale e si adatterà meravigliosamente su tutti i dispositivi

Una volta creata la colonna in orizzontale, che i progettisti preferiscono di più, puoi duplicare le sezioni e risparmiare tempo. Crea una sezione alla volta e poi riutilizzala se va bene per risparmiare tempo.

Cambia l'immagine di sfondo come da vista mobile / desktop

Alcune immagini di sfondo hanno un bell'aspetto sulla vista del desktop, ma la possibilità è che l'immagine non sia più grande dello schermo mobile. Quindi, pensa in modo creativo e scegli un'immagine diversa sullo schermo del cellulare. Per selezionare una vista mobile diversa, fare clic sulla sezione> scheda stile> fare clic sull'icona del dispositivo e selezionare la vista mobile. Ora, qualunque immagine scegliate, apparirà solo sulla vista mobile.

Cambia la visibilità di qualsiasi sezione sulla vista desktop / mobile

Puoi anche controllare la visibilità di qualsiasi sezione o colonna in base al dispositivo.

A volte, visualizziamo i nostri contenuti o immagini in due o tre sezioni o colonne diverse, ma non ci piace visualizzarli su dispositivi mobili. Ecco perché Elementor può nascondere la sezione che non ti piace visualizzare sulla vista mobile.

Vai a> impostazioni sezione> avanzato> reattivo Lì vedrai diverse possibilità o preferenze visive; puoi nascondere la sezione sul desktop, nasconderla nella scheda o nasconderla sul cellulare in base alle tue preferenze.

Cambia l'ordine delle colonne

Puoi anche modificare l'ordine delle colonne dalla sezione delle impostazioni. Vai a; impostazioni della sezione> Avanzate> Reattivo> Colonna inversa e fai clic su sì.

Crea una sezione alternativa

Crea sezioni alternative sulla vista Mobile e desktop. A volte, la sezione del dispositivo di scorrimento non sembra utile su Mobile come sul desktop, quindi puoi utilizzare qualsiasi altra sezione invece di utilizzare la sezione del dispositivo di scorrimento. Puoi farlo andando alla scheda Avanzate> attiva / disattiva la visibilità della sezione che non desideri visualizzare e aggiungi un'immagine alternativa su di essa.

Regola la larghezza della colonna

Tutte le sezioni di colonna ottengono il 100% di larghezza quando le visualizzi sulla vista mobile. Tuttavia, la larghezza può essere modificata secondo la larghezza della colonna sul cellulare. Se hai due colonne, puoi impostare la larghezza massima di ciascuna sezione al 50%.

Conclusione

Elementor è dotato di tutte le potenti funzionalità per controllare il layout delle colonne reattivo di tutte le dimensioni dello schermo. Ti permette di riadattare ogni sezione secondo la selezione della modalità di visualizzazione. Mantenere un sito web ottimizzato per i dispositivi mobili è inevitabile perché l'algoritmo di Google considera il posizionamento dei siti web ottimizzati per i dispositivi mobili. I siti Web reattivi non sono solo essenziali per migliorare la SEO, ma è anche necessario ottenere più traffico, perché oltre l'80% del traffico proviene dalle visualizzazioni da dispositivi mobili.

Ora il generatore di pagine Elementor è dotato di funzionalità esclusive che consentono agli utenti di creare un sito ottimizzato per dispositivi mobili senza troppi sforzi. Spero che trovi utile il mio articolo e che abbia ottenuto tutte le risposte su come creare un sito Web reattivo utilizzando Elementor.