Sei alle prese con il sito su WordPress ma quando navighi sullo stesso dal cellulare non sei soddisfatto pienamente rispetto alla visualizzazione dal computer. Quando navighi sul sito noti che dal computer è perfetto e dal dispositivo mobile non si vede bene?
Questo succede quando il sito web su WordPress non viene progettato secondo le regole, criteri, dimensioni e adattamenti del responsive web design. Ti sei chiesto come poter fare un sito responsive su WordPress? In questa guida ogni passaggio è dettagliato.
Esistono diverse soluzioni per ogni cosa, quelle riferite ai meno esperti e quelle riferite ai più esperti e ancora quelle che si riferiscono ai professionisti che utilizzano i linguaggi di programmazione. Parleremo di casi semplici e ci serviremo degli strumenti più facili e veloci da utilizzare esistenti e testati personalmente.
Per conquistare il mondo dei dispositivi mobile come gli smartphone e i tablet (ormai molto più usati del computer) devi fare un passo fondamentale per trasmettere serietà e professionalità: avere un sito responsive su WordPress è la risposta.
Nessuno può permettersi di lanciare un sito con un’interfaccia piccola e illeggibile. Invece, i siti mobile friendly al giorno d’oggi risultano un modo per stare al passo con il mondo del mobile, ormai più diffuso che mai. Ignorare gli utenti mobile significa compromettere il tuo business. Ecco cosa dice Kinsta.it a riguardo:
Ci si aspetta che le aziende online impieghino una strategia fluida “one-web” con le loro implementazioni di WordPress per garantire un’esperienza del sito web snella, reattiva e adattabile su tutte le piattaforme e su tutti i dispositivi. Questo non solo per gli utenti, ma anche perché Google ora si aspetta che il vostro sito funzioni perfettamente su mobile.
Questa guida vuole dare informazioni pratiche e operative per poter realizzare un sito responsive su WordPress. Scoprirai cos’è un sito responsive e come farlo su WordPress, le diverse soluzioni da poter adottare e quindi grazie a queste è possibile scegliere la più comoda per ogni caso. Tra queste soluzioni, citeremo le migliori personalmente utilizzate. Ti auguro un buon proseguimento di lettura!
Cos’è un sito responsive su WordPress
Un sito responsive su WordPress non è altro che la creazione di un sito responsive usando le funzionalità offerte da WordPress per poterlo fare. La parola responsive riferita a un sito web viene denominata in altri modi: design responsivo, responsive web design o RWD. Cosa indica?
Una tecnica di web design inerente alla realizzazione di un sito, la quale comporta l’adattamento della parte grafica di un sito WordPress in maniera completamente automatica nei confronti dei dispositivi mobile o diversi da un computer, come ad esempio i tablet.
Il sito responsive in altre parole ridimensiona al minimo e adatta i contenuti del sito dal computer agli smartphone. Il significato della parola porta ad evidenziare un elemento importante che riguarda l’accessibilità. Cosa significa sito responsive? La definizione è:
Si tratta di un sito web costruito con un template grafico che si adatta ai principi del design responsive, nonché per crearlo viene utilizzata una tecnica di progettazione in cui ogni elemento del sito responsive WordPress e delle pagine, si adatta in modo automatico su ogni dispositivo con il risultato ultimo di avere una visualizzazione migliore in base alla dimensione del mobile.
E’ la versione mobile in cui cambia la presentazione dei contenuti ridimensionati. Inoltre, i siti responsive WordPress vengono approvati da Google e quindi vengono premiati e resi noti. Al sito responsive WordPress interessano le dimensioni delle forme ma il sito è sempre lo stesso.
Esso si adatta e si ridimensiona in modo diverso su ogni dispositivo che lo sta ospitando e in base a dove sta navigando l’utente. Quest’ultimo non è costretto a zommare se naviga il sito da un dispositivo mobile. Al giorno d’oggi un sito web non responsive non viene nemmeno considerato dai motori di ricerca in termine seo.
Per non parlare di visibilità, leggibilità ed esperienza utente. I siti responsive rendono leggibile il testo, visibile le immagini e rendono navigabile ogni pagina senza che l’utente sia insoddisfatto da lasciarlo.
Come realizzare un sito responsive con WordPress? Ecco la risposta!
Dopo aver spiegato cos’è un sito responsive WordPress e ora che sai quali elementi sono fondamentali, passiamo a come farlo in maniera pratica e operativa. Ecco, la prima operazione è scegliere un tema WordPress responsive.
Quindi, durante la scelta del tema nella sezione dei template devi assicurarti di attivare un tema WordPress responsive tramite la visualizzazione dell’anteprima del tema e mediante la descrizione e la dimostrazione.
È necessario essere sicuri che le caratteristiche di un sito WordPress responsive siano tutte presenti. Alcuni esempi di temi WordPress responsive più popolari sono:
Ne esistono un’infinità di temi responsive WordPress. Il suggerimento è di guarda come appare su vari dispositivi. Consiglio di navigare sul sito ufficiale del tema e template scelto e verificare che sia responsive nelle descrizioni o nella demo.
Altre soluzioni e diversi plugin per fare un sito responsive su WordPress
Ci sono tante altre soluzioni per fare un sito responsive su WordPress oltre la scelta di un template responsive. L’idea è quella di utilizzare un plugin per renderlo magicamente adattabile su qualsiasi dispositivo e quindi rendere il sito WordPress responsive.
Questa scelta comporta l’istallazione di un plugin che rende le pagine responsive anche se non lo sono e quindi progettate solo per il computer. Un grande strumento che risolve tanti problemi per chi è alle prime armi e non sa dove mettere mani. Wptouch è un plugin responsive WordPress che ti consente di realizzare un’altra versione mobile del sito senza toccare o modificare quello esistente.
Tale versione mobile avrà impatti positivi sulla seo e sarà affidabile per Google. L’attuale plugin in questione non necessita di conoscenze e competenze in ambito di codici e di linguaggi di programmazione, per cui è riferito proprio a chi si approccia per la prima volta a WordPress.
Invece, per correggere degli errori in ambito responsive puoi usare il plugin Responsive Lightbox & Gallery. Consente di rendere immagini e video perfettamente compatibili con i dispositivi mobile.
Per reimpostare il menu e renderlo responsive su WordPress usa il plugin Responsive Menu, il quale permette anche di personalizzarlo. I plugin non finiscono qui, è possibile trovare qualsiasi altro strumento disponibile nella directory dei plugin di WordPress nella lista a destra posta nella schermata principale del cms.
I migliori temi responsive su WordPress
È molto importante già conoscere le caratteristiche e le funzionalità dei temi responsive WordPress. In base all’esperienza si suggeriscono i migliori template responsive su WordPress di seguito:
Il primo della lista è il miglior tema per e-commerce responsive su WordPress e quindi con esso puoi aggiungere prodotti o servizi vendibili, anche digitali. Newspaper è molto bello ed efficace per fare un blog responsive su WordPress.
Flatsome è molto popolare e diffuso, conosciuto in tutto il mondo e utilizzato per la maggior parte dei siti esistenti in rete. Insieme al suo page builder rende la grafica di ogni sito responsive WordPress accattivante e l’usabilità e l’esperienza dell’utente sono efficaci e autentici per ogni sito web WordPress. Viene usato tantissimo per i blog ma anche per siti vetrina ed e-commerce.
Il quarto template analizzato è un tema responsive WordPress in movimento, molto utile per siti riferiti a prodotti come le macchine, le navi o le moto oppure per aziende di trasporti o di corrieri. Per un blog di viaggi non possiamo non citare Bravada. Si presenta come un tema responsive WordPress chiaro, pulito ed essenziale, il quale, unito al plugin Elementor può essere personalizzato al massimo.
Sito responsive WordPress con il plugin Elementor
Rendere un sito su WordPress responsive è assolutamente possibile in svariati modi. Un esempio è utilizzare il plugin Elementor. In questo caso la prima cosa da fare è decidere un tema aggiornato e responsivo. Per progettare i contenuti del sito e personalizzarli, Elementor permette di impostare sezioni, colonne e altri elementi dalla sezione con le icone presente a sinistra della pagina.
Qualsiasi pagina è necessario modificare e rendere responsive, è sufficiente solamente attivare il plugin e recarsi sulla pagina di riferimento e digitare “modifica con Elementor”.
Se si vuole creare una pagina o un sito da 0 con Elementor è sufficiente attivare nella casella laterale a destra “template” e nella lista sottoposta sezionare “elementor canvas”.
In questo modo vedrai un sito vuoto che puoi creare da 0 con Elementor in modo responsive. Nel caso in cui si vuole solamente modificare ma usare il tema scelto, selezionare “template predefinito”.
Una volta entrati ci sarà la schermata con le icone disposte da elementor sulla sinistra. Il caso precedentemente descritto permette di modificare la grafica del tema già esistente.
In basso si notano le icone da cambiare dal desktop al mobile e tablet. Nella lista degli elementi di Elementor notiamo diverse icone- Per ogni icona selezionata e portata sullo schermo oppure per ogni elemento o blocco da modificare nella pagina, troverai le aree “contenuto, “stile, e “avanzato”.
Clicca sulla sezione “avanzato” e poi “responsive”. Successivamente nascondi gli elementi che non vuoi far vedere sul cellulare e aggiungi di seguito lo stesso elemento (duplicalo), ma rendilo nascosto per pc.