1.
5 cose da sapere per fare un sito
responsive su WordPress
SITEGROUND WEBINAR
#SGwebinar | @siteground.it | it.siteground.com

2.
#SGwebinar | @siteground.it | it.siteground.com
Carmela Maggio
FB: @CarmelaMaggio
Graphic e Web Designer
Ospite speciale
IN: @CarmelaMaggio
IG: @mynameiscarmela

3.
#SGwebinar | @siteground.it | it.siteground.com
Quando navighi sul sito noti che dal
computer è perfetto e dal dispositivo
mobile non si vede bene?
(Succede quando il sito non è progettato secondo
le regole, criteri, dimensioni
e adattamenti del responsive web design.)
I siti mobile friendly al giorno d’oggi risultano un modo per stare
al passo con il mondo del mobile.

4.
#SGwebinar | @siteground.it | it.siteground.com
Perché avere un sito web responsive?
Per posizionarsi sui motori di ricerca.
L’utente ricerca sempre più informazioni attraverso i
cellulari (In Italia il 67% delle ricerche online avviene via
telefono, rispetto al 32% da desktop. Fonte Sistrix).
Garantisce maggiore accessibilità dei contenuti.
Buona UX/UI= conversione utente

5.
#SGwebinar | @siteground.it | it.siteground.com
Cosa accade quando il sito non è
responsive?
Non è raggiungibile per via del posizionamento SEO
penalizzante da parte dei motori di ricerca, quindi minore
visibilità
Non fruibile perché chi entra da mobile esce subito per via
della difficile navigazione

6.
#SGwebinar | @siteground.it | it.siteground.com
Premessa iniziale:
cosa fare e cosa non fare
Immagini non orizzontali (verificare pixel per ogni box)
Menù hamburger
Ottimizzazione della velocità
Layout semplice (una colonna per volta)
I dispositivi Android ignorano alcuni font (Usare caratteri di
Google Font)

7.
#SGwebinar | @siteground.it | it.siteground.com
WordPress è già responsive?
Si, il template di base permette di avere un sito web
mobile-friendly. Ma il tema di default (twentytwenty) è
molto semplice. Anche se si può personalizzare, il tema
predefinito, rispetto ad altri gratuiti disponibili su
WordPress dovrà essere editato da un professionista per
far sì che identifichi e rispecchi al meglio il tuo Brand.
Invece, alcuni template già divisi per categorie (es.
Giornale, blog, e-commerce) saranno più facili da
modificare, scegliendo un tema con una grafica che
rispecchia al meglio il tuo marchio.

8.
1. Cos’è un sito responsive?

9.
Cos’è un sito responsive?
Il mobile friendly è il futuro!
● Tecnica di web design che rende accessibile il portale su tutti i
dispositivi
● La grafica si adatta in automatico per mobile
● Viene approvato da Google, premiato e reso noto
● Si ridimensiona in modo diverso su ogni dispositivo
● Più visibilità, leggibilità e migliore esperienza utente

10.
2. Come realizzare un sito responsive su
WordPress

11.
Come realizzare un sito responsive
su WordPress
In vari modi, facile e veloce
● Tema responsive (verificare nella demo)
● Plugin di supporto
● Lavorare su velocità, SEO, menù, immagini, font e grafica

12.
3. Soluzioni e plugin per sito mobile-friendly
su WordPress

13.
Soluzioni e plugin per sito mobile-friendly
su WordPress
Un grande supporto da scaricare e installare senza
linguaggio di programmazione!
● “Wptouch” è un plugin che consente di realizzare un’altra
versione mobile del sito senza toccare o modificare quello
esistente
● Per correggere errori in ambito responsive si può usare il plugin
“Lightbox & Gallery”
● Per reimpostare il menu e renderlo responsive è possibile
utilizzare “Responsive Menu”
● “Elementor”: supporto numero uno per creare layout ad hoc

14.
4. I migliori temi responsive su WordPress

15.
I migliori temi responsive su WordPress
I più popolari:
● Divi
● Astra
● OceanWp
● Storefront
● Newspaper
● Flatsome
● Neve
● Bravada

16.
5. Come fare un sito responsive su WordPress
con il plugin Elementor

17.
Come fare un sito responsive su WordPress
con il plugin Elementor
Una estensione dalle mille risorse!
● Drag and Drop
● Scegliere tema compatibile (es. Hello oppure Storefront per
e-commerce)
● Permette di impostare sezioni, colonne e altri elementi dalle
icone presenti a sinistra della pagina
● In basso ci sono i simboli per cambiare la visualizzazione
dell’anteprima dal desktop al mobile e tablet

18.
Come fare un sito responsive su WordPress
con il plugin Elementor
Una estensione dalle mille risorse!
● Attivare il plugin e recarsi sulla pagina di riferimento e digitare
“modifica con Elementor”
● Oppure sulla casella laterale a destra “template” e nella lista
sottoposta sezionare “elementor canvas”
● Nel caso in cui si vuole solamente modificare ma usare il tema
scelto, selezionare “template predefinito”

19.
Come fare un sito responsive su WordPress
con il plugin Elementor
Una estensione dalle mille risorse!
● Aree presenti modificabili “contenuto, “stile, e “avanzato”
● Cliccare sulla sezione “avanzato” e poi “responsive”
● Nascondere gli elementi che non si vogliono far vedere sul
cellulare e aggiungere di seguito lo stesso elemento (duplicato),
ma reso nascosto per pc

20.
Step Elementor:
Non solo responsive: questo plugin è molto di più

21.
Step Elementor:
Non solo responsive: questo plugin è molto di più

22.
Step Elementor:
Non solo responsive: questo plugin è molto di più

23.
Step Elementor:
Non solo responsive: questo plugin è molto di più

24.
Step Elementor:
Non solo responsive: questo plugin è molto di più

25.
Step Elementor:
Non solo responsive: questo plugin è molto di più

26.
Step Elementor:
Non solo responsive: questo plugin è molto di più

27.
Grazie!
Webinar Guest
Work Position Title
#SGwebinar | @siteground.it | it.siteground.com
FB: @CarmelaMaggio
IN: @CarmelaMaggio
IG: @mynameiscarmela

28.
#SGwebinar | @siteground_it | it.siteground.com