Rendi il tuo sito web Elementor più reattivo e ottimizzato per i dispositivi mobili

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

Google utilizza la velocità di caricamento delle pagine mobili come fattore determinante per il posizionamento di ricerca di qualsiasi sito web. Ciò è dovuto principalmente al fatto che 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 nel motore di ricerca di Google. In questo articolo, ci concentreremo su come creare un sito Web reattivo per dispositivi mobili con il generatore di pagine Elementor.

• Qual è il design reattivo del sito Web di Elementor
• Come regolare le impostazioni di dispositivi mobili, desktop e schede
• Regola il titolo sul display del tuo cellulare
• Regola la spaziatura o i margini per i dispositivi mobili
• Crea ogni colonna orizzontalmente e si adatterà meravigliosamente su tutti i dispositivi
• Modifica l'immagine di sfondo in base alla visualizzazione mobile/desktop
• Modifica la visibilità di qualsiasi sezione nella visualizzazione desktop/mobile
• Modificare l'ordine delle colonne
• Crea una sezione alternativa
• Regola la larghezza della colonna
• Conclusione

Qual è il design reattivo del sito Web di Elementor

Un layout reattivo funziona in modo innovativo ridimensionando automaticamente tutto il contenuto in base a ciascuna dimensione 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.

La maggior parte di noi acquista un tema che afferma di essere anche reattivo ai dispositivi mobili; Tuttavia, le cose possono essere frustranti quando il design del tuo tema si guasta completamente sullo schermo del cellulare.

Per superare tali situazioni, abbiamo creato una soluzione reattiva per dispositivi mobili in cui puoi creare da zero il design del tuo sito Web utilizzando gli strumenti di layout reattivo del generatore di pagine Elementor Con l'aiuto di questi strumenti reattivi per dispositivi mobili, puoi modificare qualsiasi angolo del layout del tuo sito web, in particolare tipografia, riempimento, margine e allineamento mobile. Inoltre, sarai in grado di modificare le impostazioni e l'ordine delle colonne su dispositivi mobili.

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

1. Controlla se qualche titolo sembra troppo grande sullo schermo di un cellulare.
2. Controlla il riempimento del contenuto o lo spazio ai lati del contenuto
3. Controlla l'allineamento delle colonne della pagina, come sembra perfetto; centrato, a destra o a sinistra
4. Controlla l'ordine delle colonne, se appaiono nell'ordine giusto o devi modificarlo.

Ora scaviamo più a fondo e scopriamo come funzioneranno le cose con il generatore di pagine Elementor.

Come regolare le impostazioni di dispositivi mobili, desktop e schede

Quasi tutte le funzionalità 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 display del tuo cellulare

A volte desideriamo un'intestazione in grassetto e prominente sul nostro sito desktop e appare perfettamente a posto sul display del desktop, ma quando attivi la visualizzazione Mobile, l'intestazione occupa l'intero schermo e non sembra adattarsi.

Puoi regolare la dimensione del testo di qualsiasi elemento di testo sulla scheda e su Mobile. Puoi anche impostare diverse dimensioni del testo per le intestazioni mobili che appaiono perfettamente sullo schermo del cellulare e si adattano meglio allo schermo. In questa pagina demo, ho creato un'intestazione che ha un bell'aspetto sul sito desktop, mentre sullo schermo mobile occupa l'intero schermo.

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

Per regolare nuovamente, farò clic sulla modalità di risposta mobile > stile > tipografia > regola la dimensione px su 30 che si adatta facilmente allo schermo del cellulare.

Regola la spaziatura o i margini per i dispositivi mobili

Quando si regolano le imbottiture, si consiglia di non utilizzare valori in pixel invece di impostare valori in EM o percentuale perché manterrà la dimensione relativa alla dimensione complessiva dello schermo.

Puoi vedere che abbiamo utilizzato il riempimento di 70px destra e sinistra, che appare bene sul sito desktop; Tuttavia la visualizzazione mobile per questa impostazione è un disastro completo.

Possiamo regolare nuovamente l'imbottitura a 17 px su ciascun lato, quindi risulterà completamente a posto.

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

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

Una volta creata la colonna orizzontalmente, 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.

Modifica l'immagine di sfondo in base alla visualizzazione mobile/desktop

Alcune immagini di sfondo hanno un bell'aspetto sulla visualizzazione desktop, ma è possibile che l'immagine non appaia così grande come sullo schermo del cellulare. Quindi, pensa in modo creativo e scegli un'immagine diversa sullo schermo del cellulare. Per selezionare una visualizzazione mobile diversa, fai clic sulla sezione > scheda Stile > fai clic sull'icona del dispositivo e seleziona la visualizzazione mobile. Ora, qualunque immagine tu scelga, apparirà solo nella visualizzazione mobile.

Modifica la visibilità di qualsiasi sezione nella visualizzazione desktop/mobile

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

A volte mostriamo i nostri contenuti o immagini in due o tre sezioni o colonne diverse, ma non ci piace visualizzarli sui dispositivi mobili. Ecco perché Elementor può nascondere la sezione che non desideri visualizzare nella visualizzazione mobile.

Vai a > impostazioni della sezione > avanzate > responsive Lì vedrai diverse possibilità o preferenze visive; puoi nascondere la sezione sul desktop, nasconderla nella scheda o nasconderla su dispositivo mobile a seconda delle tue preferenze.

Modificare l'ordine delle colonne

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

Crea una sezione alternativa

Crea sezioni alternative nella visualizzazione mobile e desktop. A volte, la sezione del dispositivo di scorrimento non sembra utile su dispositivi mobili quanto 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 delle colonne ottengono una larghezza del 100% quando le visualizzi sulla visualizzazione mobile. Tuttavia, la larghezza può essere modificata in base alla larghezza della colonna su Mobile. 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 reattivo delle colonne di tutte le dimensioni dello schermo. Ti consente di regolare nuovamente ciascuna sezione in base alla 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 il più importante. I siti web responsive non sono solo essenziali per ottenere una migliore SEO, ma è anche necessario ottenere più traffico, perché oltre l’80% del traffico proviene da visualizzazioni mobili.

Ora il page builder Elementor è dotato di funzionalità esclusive che consentono agli utenti di creare un sito ottimizzato per i dispositivi mobili senza troppi sforzi. Spero che troverai utile il mio articolo e che avrai tutte le risposte su come creare un sito Web reattivo utilizzando Elementor.