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.
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.
Ora scaviamo più a fondo e scopriamo come funzioneranno le cose con il generatore di pagine Elementor.
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
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.
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.
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.
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.
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.
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 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.
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%.
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.
Le intestazioni e i piè di pagina di un sito Web sono elementi essenziali. Nella maggior parte dei casi, l'intestazione fornisce la navigazione...
Due dei temi WordPress più popolari sul mercato sono Astra e OceanWP. Professionale…
Per creare un eccellente sito Web di notizie non è necessario che tu diventi un web designer. Noi…
Il tema Giornale è uno dei temi WordPress più significativi progettati da tagDiv, un...
Quando si tratta di creare un negozio online, WooCommerce è il plugin di riferimento. Esso…
Un'intestazione è generalmente la prima cosa che una persona vede quando visita il tuo sito web,...
Visualizza commenti
Świetny post! Bardzo odpowiada na moje potrzeby. Stworzyłam stronę ale widok mobilny mi się rozjechał. Dziękuję za wskazówki. Są bardzo pomocne 🙂
Super! Potresti non essere in grado di utilizzare queste informazioni finché non avrai finito di leggerle. Wielkie dzięki za pomoc :)
Ciao, per modificare l'ordine delle colonne puoi utilizzare direttamente il drag'n'drop o l'esploratore di sezione. Per quanto riguarda la visibilità è la configurazione avanzata della sezione, dovrai disattivare la visibilità su desktop, tablet e mobile.
come fare il riempimento reattivo?
Ciao, l'imbottitura non è esattamente reattiva, questo è un valore fisso. Se riscontri un problema di risposta, devi definire un valore di riempimento diverso per desktop, tablet e telefono