Design responsivo di WordPress: assicurarsi che il sito web sia bello sia sui telefoni che sui computer.

Molti principianti incontrano un problema: le pagine progettate su un computer risultano con testi stipati e immagini spostate sui dispositivi mobili, il che è dovuto alla mancanza di un "design reattivo". Elementor è dotato di potenti funzionalità di editing reattivo e, con una semplice impostazione, è possibile far sì che il sito web risulti bello e facile da usare su computer, tablet e smartphone.

Cos'è il design reattivo?

In breve,Il design reattivo consiste nel far sì che la stessa pagina web regoli automaticamente il suo layout in base alle dimensioni dello schermo del dispositivo.：

• Su un computer (schermo grande), i contenuti potrebbero essere visualizzati uno accanto all'altro (come tre colonne di immagini);
• Sui tablet (schermo medio), si trasforma automaticamente in due colonne;
• Sui telefoni (schermo piccolo), i contenuti vengono automaticamente impilati in una singola colonna, per evitare che il testo sia troppo piccolo o che il contenuto si sovrapponga.

Elementor si adatterà automaticamente alla maggior parte degli scenari, ma sarà comunque necessario ottimizzare manualmente i dettagli per garantire la migliore esperienza su ogni dispositivo.

Primo passo: conoscere la modalità di editing responsiva di Elementor.

Dopo essere entrati nell'interfaccia di editing di Elementor, sulla barra degli strumenti in alto a destra sono presenti tre icone, che corrispondono rispettivamente a tre viste sui dispositivi:

• 🖥️ Vista desktop(Visualizzazione predefinita)
• 📱 Vista a schermo intero(Larghezza di circa 768 pixel)
• 📱 Vista per cellulare(Larghezza di circa 375 pixel)

Il metodo di funzionamentoFare clic sull'icona corrispondente per passare alla modalità di anteprima del dispositivo. Tutte le modifiche di stile (come la dimensione del carattere, l'interlinea, il layout) possono essere impostate separatamente per ogni dispositivo, senza influenzare gli altri.

Secondo passo: impostazioni fondamentali del design reattivo (3 elementi indispensabili)

1. Dimensione del testo: evitare che il testo sul telefono sia troppo piccolo o troppo grande.

Il testo che sembra appropriato sul computer potrebbe essere poco leggibile sul telefono (troppo piccolo) o con un'interlineatura confusa (troppo grande), e richiede un'ottimizzazione separata:

1. Seleziona il modulo di testo (titoli, paragrafi, ecc.) e accedi al pannello "Stili" a destra.
2. Trova l'impostazione "Dimensione del carattere", fai clic sull'icona "Responsive" accanto al valore (l'icona di un piccolo computer, che, una volta cliccata, mostrerà tre campi di input, rispettivamente per desktop, tablet e telefono).
3. Passare alla "Visualizzazione per cellulare" e immettere direttamente le dimensioni appropriate (ad esempio, impostare i titoli su 24-32 px e i paragrafi su 14-16 px sul telefono).

SuggerimentoLa dimensione del testo segue il principio "quanto più piccolo è lo schermo, tanto meno grande dovrebbe essere il testo, ma deve essere comunque leggibile", in modo da garantire che sul telefono non sia necessario ingrandire il testo per poterlo leggere.

2. Immagini e larghezza dei moduli: evitare di superare lo schermo.

Le immagini impostate come "larghezza 80%" sul computer potrebbero risultare ancora troppo larghe sui telefoni, o con troppi spazi bianchi ai lati:

1. Seleziona l'immagine/il modulo e accedi al pannello "Stile" a destra (l'immagine si trova in "Stile" → "Larghezza", mentre altri moduli potrebbero trovarsi in "Avanzate" → "Larghezza").
2. Fai clic sull'icona responsiva accanto al valore "Larghezza" per passare alla "Visualizzazione per dispositivi mobili".
3. Imposta la larghezza su "100%" (per far sì che l'immagine/il modulo riempia l'intera larghezza dello schermo del telefono, evitando spazi vuoti ai lati) o regola come desiderato (ad esempio, 90% per lasciare un margine).

AttenzioneSe l'immagine stessa è troppo piccola, impostarla su 100% la renderà sfocata. Si consiglia di preparare in anticipo immagini ad alta risoluzione (larghezza minima di 1000 pixel).

3. Spaziatura e margini: evitare che il contenuto sia troppo stretto.

Lo spazio sullo schermo del telefono è limitato. Se la distanza tra i moduli è troppo grande, si spreca spazio, mentre se è troppo piccola, l'aspetto risulterà troppo affollato:

1. Seleziona un qualsiasi modulo (come un pulsante o un paragrafo) e accedi al pannello "Avanzato" a destra.
2. Per trovare i "margini esterni" (la distanza tra il modulo e gli altri elementi) o i "margini interni" (la distanza tra il contenuto interno del modulo e il bordo), clicca sull'icona "Responsive" accanto ai valori.
3. Passare alla "Visualizzazione per dispositivi mobili" e ridurre i valori (ad esempio, cambiare il margine superiore da 50 px a 20 px per rendere il modulo più compatto).

Tecniche: Premi e tieni premuto Ctrl Selezionando più moduli contemporaneamente, è possibile regolare gli spazi in modo massivo, aumentando notevolmente l'efficienza.

Terzo passo: regolazione del layout (ottimizzazione del layout delle colonne sui dispositivi mobili)

Se la tua homepage utilizza un "layout a più colonne" (ad esempio, un'introduzione ai servizi in 3 colonne e un mix di immagini e testi in 2 colonne), sui dispositivi mobili potrebbe risultare troppo affollata. È necessario modificarla in modo che occupi una sola colonna:

1. Trova la "Sezione" che contiene più colonne (fai clic sul riquadro blu tratteggato all'esterno del modulo per selezionare l'intero blocco).
2. Entrando nel pannello "Layout" a destra, trova l'impostazione "Colonne" (come attualmente è "3 colonne").
3. Fai clic sull'icona responsive accanto ai valori della colonna per passare alla "Vista per dispositivi mobili".
4. Cambia il numero delle colonne in "1 colonna", in questo caso i contenuti verranno automaticamente impilati in una singola colonna sul telefono, rendendo il tutto più chiaro e leggibile.

EsempioSu un computer, i prodotti vengono visualizzati in 3 colonne, mentre su un tablet passano a 2 colonne e su uno smartphone a 1 colonna. Questo permette di sfruttare al meglio lo spazio disponibile sui grandi schermi, garantendo al contempo una buona leggibilità sui piccoli schermi.

Quarto passo: nascondere gli elementi non necessari (per i piccoli schermi)

Alcuni elementi possono arricchire la pagina sul computer, ma risultano superflui sui dispositivi mobili (come le icone decorative complesse e i lunghi testi descrittivi), che possono essere nascosti sui dispositivi mobili:

1. Seleziona il modulo che desideri nascondere e accedi al pannello "Avanzate" a destra.
2. Scorri fino alle impostazioni "Responsive" e trova l'opzione "Nascondi sui dispositivi mobili" (o seleziona separatamente "Nascondi sul desktop" e "Nascondi sul tablet").
3. Selezionando "Nascondi sui dispositivi mobili", il modulo scompare automaticamente dalla visualizzazione del telefono, senza influire sulla visualizzazione su computer e tablet.

Scenari applicabili: Icone laterali decorative, moduli di contatto dedicati ai computer (che possono essere sostituiti da moduli più semplici sui telefoni).

Quinto passaggio: anteprima e test (passaggio fondamentale)

Dopo aver completato l'impostazione, assicurati di testarla su un dispositivo reale (o di controllarla attentamente con la funzione di anteprima di Elementor):

1. Anteprima all'interno di Elementor.Fare clic, in ordine, sugli iconi "Desktop", "Tablet" e "Telefono", e scorrere la pagina per controllare ogni modulo:
   • Il testo viene visualizzato completamente (senza tagli o sovrapposizioni)?
   • Le immagini sono chiare e coprono interamente lo schermo (senza essere allungate o deformate)?
   • Il pulsante è abbastanza grande (almeno 44×44 px su un telefono, per facilitarne il clic)?
2. Test su dispositivi realiScansiona il "codice QR" nella parte superiore di Elementor con il tuo telefono, apri la pagina sul tuo dispositivo, prova i pulsanti e i campi di input e valuta la fluidità dello scorrimento.
3. Risolvere i problemi più comuni.：
   • Se il testo si sovrappone in modo disordinato quando si passa a una nuova riga, è necessario ridurre la dimensione del carattere sul dispositivo mobile o aumentare la larghezza del modulo.
   • Se l'immagine risulta deformata: nell'app per smartphone, impostare "Adeguamento oggetto" su "Copertura" (Immagine → Stile → Adeguamento oggetto).
   • Se il pulsante è troppo piccolo: aumentare il "margine interno" del pulsante sul dispositivo mobile (almeno 15 pixel in alto e in basso, e almeno 20 pixel a sinistra e a destra).

I principi del design reattivo che i principianti devono assolutamente ricordare.

1. Primato della mobilitàDurante la progettazione, è necessario prima considerare la visualizzazione su dispositivi mobili, per poi estenderla ai computer (al fine di evitare di apportare modifiche drastiche in un secondo momento).
2. Meno è più.Ilo spazio sullo schermo del telefono è limitato, quindi è necessario mantenere solo i contenuti essenziali ed eliminare gli elementi ridondanti.
3. CoerenzaI colori e lo stile dei caratteri devono rimanere uniformi su tutti i dispositivi, in modo da evitare di confondere i visitatori.
4. Controllare regolarmenteDopo aver aggiunto ogni nuovo modulo, passare alla vista per dispositivi mobili per verificare che la visualizzazione sia corretta.

Con i passaggi sopra indicati, il tuo sito web potrà presentare un aspetto professionale su computer, tablet e telefoni. Il design responsivo può sembrare complicato, ma dopo averlo utilizzato con Elementor un paio di volte, scoprirai che basta regolare alcuni parametri chiave per i diversi dispositivi per risolvere il problema di visualizzazione del 90%. Con un po' di pratica e test, lo padroneggerai in breve tempo!