Come ottimizzare la barra laterale su dispositivi mobili utilizzando Divi Theme Builder

In alcuni casi, mantenere una barra laterale sul cellulare può essere un po' eccessivo. Gli utenti sono felici di scorrere le informazioni rilevanti sui loro tablet e telefoni (fino a un certo punto). Ma quando hai una quantità significativa di contenuto della barra laterale dopo il contenuto principale della pagina, gli utenti potrebbero non raggiungere mai il piè di pagina, che di solito consiste in alcuni importanti inviti all'azione. Ecco perché è importante ottimizzare la barra laterale sui dispositivi mobili.

In questo tutorial, esamineremo i modi in cui puoi utilizzare Divi Theme Builder per ottimizzare la barra laterale sul display mobile. Ecco alcune delle cose che tratteremo in questo articolo:

• Come creare un modello con una barra laterale
• Creazione di contenuti della barra laterale utilizzando i moduli Divi e i widget di WordPress
• Utilizzo di più aree widget per nascondere/mostrare determinati widget su dispositivi mobili
• Controllo della spaziatura tra i contenuti della barra laterale sui dispositivi mobili
• Nascondere completamente il contenuto della barra laterale sui dispositivi mobili
• Nascondere alcuni contenuti della barra laterale su dispositivi mobili
• Nascondere gli elementi all'interno dei moduli per ridurre al minimo il contenuto sui dispositivi mobili
• Rendere reattivo il contenuto della barra laterale regolando le dimensioni e la spaziatura del testo
• Come modificare l'ordine di sovrapposizione della barra laterale su dispositivi mobili

Iniziamo.

Sbirciata

Ecco una rapida occhiata al layout della barra laterale sul desktop e come è stato ottimizzato per la visualizzazione mobile.

Scarica il modello GRATUITO con la barra laterale ottimizzata sui dispositivi mobili

Per mettere le mani sul modello di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai iresubscribei o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai installare e attivare il tema Divi. Assicurati di avere l'ultima versione di Divi.

Avrai anche bisogno di alcuni post/pagine creati a scopo di test affinché il contenuto della pagina mostri effettivamente i risultati.

Dopodiché, sei pronto per partire.

Come ottimizzare la barra laterale del tuo modello Divi su dispositivi mobili

Prima di iniziare a ottimizzare la nostra barra laterale su dispositivi mobili, dobbiamo prima creare un modello funzionante. Costruiremo la nostra barra laterale su un modello di pagina utilizzando Divi Theme Builder. Questo ci aiuterà a comprendere meglio cosa comporta la creazione di una barra laterale in Divi in ​​modo che possiamo capire meglio come ottimizzarla sui dispositivi mobili.

Creazione del modello con la barra laterale

Importazione di Divi Theme Builder Pack #3

Per iniziare, utilizzeremo il Divi Theme Builder Pack n. 3 per avviare il design del nostro sito. Quindi, utilizzeremo uno dei modelli per aggiungere la barra laterale che ottimizzeremo per i dispositivi mobili.

Una volta scaricato il pacchetto, decomprimi la cartella.

Dal dashboard di WordPress, vai a Divi > Generatore di temi. Quindi fare clic sull'icona della portabilità nel menu in alto a destra della pagina. Dalla modalità di portabilità, seleziona la scheda di importazione e scegli il file divi-theme-builder-pack-3-all.json dalla cartella che hai scaricato in precedenza. Quindi fare clic sul pulsante di importazione.

Importante: utilizza un sito di prova con una nuova installazione di Divi in ​​modo da non sovrascrivere i contenuti live sul tuo sito Web o rompere qualcosa.

Vedrai che tutti i modelli sono stati importati nel generatore di temi.

Costruire il layout della barra laterale all'interno del modello di pagina di categoria

Trova il modello di tutte le pagine di categoria e fai clic per modificare il layout del corpo personalizzato.

Il layout corrente della pagina utilizza una riga di una colonna per l'area del contenuto principale della pagina. Dovremo cambiarlo in una struttura di layout della barra laterale. Per fare ciò, fai clic sull'icona "Scegli layout" nel menu di riga della seconda riga e scegli la struttura del layout di due terzi e un terzo di colonna.

Ora avrai un'area sul lato destro per la barra laterale.

AVVISO: non sto utilizzando una sezione speciale per questo layout della barra laterale. Le sezioni speciali non sono necessarie durante la creazione di un layout della barra laterale per la tua pagina, tuttavia, se desideri mantenere funzionalità di riga separate per l'area del contenuto principale, ti consigliamo di utilizzare una sezione speciale.

Non ci concentreremo troppo a ricreare l'esatto design dei moduli in questo tutorial. Invece, ci concentreremo su quegli elementi che aiuteranno a ottimizzare la barra laterale sui dispositivi mobili.

Detto questo, dobbiamo aggiungere un colore di sfondo e un'imbottitura alla colonna della barra laterale.

Impostazioni della colonna della barra laterale

Apri le impostazioni per la colonna designata per la barra laterale e aggiorna quanto segue:

• Colore di sfondo: #f2f5f9
• Imbottitura: 25px in alto, 25px in basso, 25px a sinistra, 25px a destra

Creazione del contenuto della barra laterale con moduli Divi e widget di WordPress

Il contenuto della barra laterale varia in base alle esigenze di un sito web. Tuttavia, se stiamo parlando di un sito blog, in genere troverai una combinazione dei seguenti elementi di contenuto della barra laterale:

• Informazioni sull'autore (nome, foto, biografia)
• Pulsanti per seguire i social media
• E-mail opt-in
• Collegamenti a prodotti e/o servizi
• Annunci
• Categorie
• Post recenti/popolari

La creazione di questi elementi in Divi può essere eseguita utilizzando una combinazione di moduli Divi. Per questo esempio, aggiungeremo i seguenti moduli Divi per creare il nostro contenuto della barra laterale.

1. Modulo di ricerca: servirà come modulo di ricerca.
2. Modulo di attivazione dell'e-mail: servirà come modulo di attivazione dell'e-mail.
3. Modulo di testo: questo sarà il titolo dei pulsanti Segui social media
4. Modulo di follow sui social media: mostrerà i pulsanti di follow sui social media.
5. Modulo di testo (con immagine bg) – Questo servirà come annuncio di esempio per la barra laterale.
6. Modulo Blurb (con contenuto dell'autore): servirà come area delle informazioni sull'autore della barra laterale.
7. Modulo di testo: servirà come titolo per il modulo del blog sottostante.
8. Modulo blog: servirà come contenuto dei post recenti/in primo piano nella barra laterale.

Inserire i widget di WordPress utilizzando il modulo della barra laterale

Se non hai già familiarità, Divi ha un modulo barra laterale che ti consente di inserire il contenuto dell'area widget (o widget) nell'area della barra laterale Divi. In effetti, questo modello sta già utilizzando il widget della barra laterale nella riga direttamente sotto quella su cui stiamo lavorando.

Trascina il modulo della barra laterale dalla riga e posizionalo proprio sotto il modulo di attivazione della posta elettronica.

Quindi apri le impostazioni del modulo della barra laterale. Vedrai che il modulo sta tirando nell'area widget della barra laterale che dovrebbe essere simile alla seguente se hai l'impostazione predefinita in WordPress.

Utilizzo di più aree widget

In questo momento l'area widget "Barra laterale" mostra più widget perché ci sono più widget all'interno dell'area widget della barra laterale. Tuttavia, puoi effettivamente ottenere un maggiore controllo sul design della barra laterale di Divi utilizzando più aree widget che contengono un singolo widget. L'utilizzo di più aree widget ti darà un maggiore controllo sul design dei tuoi widget e sulla visibilità dei widget sui dispositivi mobili.

Per creare più widget, apri una nuova scheda e vai alla dashboard di WordPress. Vai su Aspetto > Widget.

Crea una nuova Area Widget inserendo un nome e facendo clic sul pulsante Crea. Poiché questa area widget sarà dove aggiungeremo il widget Categorie, chiamiamo l'area "Categorie". Aggiorna la pagina per vedere l'area del widget. Quindi trascina il widget Categorie nell'area del widget Categorie.

Ripetere il processo per creare una nuova area widget denominata "Archivi". Quindi trascina il widget Archivi nell'area del widget Archivi.

Torna al modello delle pagine di categoria con il layout della barra laterale e aggiorna il contenuto del modulo della barra laterale per visualizzare l'area del widget Categorie.

Duplica il modulo della barra laterale (per mantenere il design)

Aggiorna il modulo della barra laterale duplicato per inserire l'area widget degli archivi.

Assumere il controllo della spaziatura tra i moduli della barra laterale

Attualmente la riga che contiene la barra laterale ha un valore di larghezza del margine di 2. Ciò significa che ci sarà un margine/spaziatura inferiore predefinito tra ciascun modulo all'interno della barra laterale. Per ottenere un maggiore controllo su questa spaziatura, possiamo eliminare il margine inferiore di tutti i moduli nella colonna della barra laterale. Per fare ciò, apri le impostazioni del modulo di ricerca e aggiorna quanto segue:

• Margine inferiore: 0px (desktop), 15px (tablet)

Quindi fare clic sull'icona Altre impostazioni (o sul menu di scelta rapida) sull'opzione del margine. Quindi selezionare "Estendi margine".

Nel modulo Estendi stili, aggiorna le opzioni per estendere il margine a "Tutti i moduli" in "Questa colonna".

Quindi possiamo aggiungere la spaziatura tra i moduli utilizzando i moduli divisori.

Ottimizzazione della barra laterale su dispositivi mobili

Nascondere la barra laterale sul cellulare

A volte, potresti voler nascondere completamente la barra laterale sui dispositivi mobili. Per fare ciò, sarà necessario disabilitare la visibilità della colonna contenente la barra laterale su tablet e telefono.

Apri le impostazioni della riga e apri le impostazioni della colonna designata per la barra laterale. Quindi aggiorna la visibilità come segue:

• Disabilita su: tablet, telefono

Questo nasconderà l'intera barra laterale su tablet e display mobile.

Nascondere parte del contenuto della barra laterale su dispositivi mobili

Sul desktop, potresti avere spazio per conservare la maggior parte (o tutti) i contenuti della barra laterale senza che diventi una distrazione eccessiva dal contenuto. Ma sui dispositivi mobili, l'utente dovrà scorrere molti contenuti della barra laterale che potrebbe avere scarso interesse a vedere. Quindi, quando crei la tua barra laterale nel Divi Theme Builder, sfrutta le opzioni di visibilità per disabilitare alcuni degli elementi della barra laterale sul display mobile. E, se utilizzi i widget di WordPress per il contenuto della barra laterale, crea più aree widget per aiutare a progettare e nascondere determinati widget anche sui dispositivi mobili.

Per nascondere i moduli su dispositivi mobili, apri il modulo di visualizzazione wireframe, quindi utilizza la funzione di selezione multipla di Divi per selezionare tutti i moduli che desideri nascondere/disabilitare su tablet e telefono. Quindi apri le impostazioni per uno dei moduli selezionati e aggiorna quanto segue:

• Disabilita su: telefono, tablet

In questa illustrazione, abbiamo nascosto tutti i moduli (compresi i divisori) tranne i due moduli della barra laterale (contenenti le categorie e i widget degli archivi) e il modulo di testo (contenente l'annuncio) sul display del tablet e del telefono. Per dirla in un altro modo, solo le categorie, gli archivi e l'annuncio verranno visualizzati sui dispositivi mobili.

Anteprima dei risultati su una pagina del blog

Prima di vedere i risultati sulla pagina live, assegniamolo prima alla pagina del blog del sito. Per fare ciò, fai clic sull'icona a forma di ingranaggio sopra il modello, seleziona il Blog dall'elenco e salvalo.

Assicurati di avere una pagina dei post selezionata in Aspetto > Lettura.

Risultati

Ecco la differenza tra la barra laterale desktop e la barra laterale mobile. Nota come la barra laterale mobile ha il contenuto della lezione.

Evitare la duplicazione dei contenuti della barra laterale e del piè di pagina sui dispositivi mobili

Sul desktop, puoi farla franca aggiungendo contenuti duplicati nella barra laterale e nel piè di pagina. In effetti, questo è un buon modo per aumentare le conversioni. Ad esempio, sul desktop, ha senso includere un modulo di attivazione dell'email nella parte superiore della barra laterale e all'interno del piè di pagina in modo che gli utenti possano vedere l'opzione di attivazione dell'email durante la lettura del contenuto del post e alla fine del post. Tuttavia, sui dispositivi mobili, non esiste un layout della barra laterale. Tutto viene visualizzato in una colonna (forse due). Le barre laterali di destra si impilano sotto il contenuto del post/pagina e le barre laterali di sinistra si impilano sopra il contenuto del post/pagina. Quindi, se un modulo di attivazione e-mail della barra laterale si accumula sotto il contenuto del post/pagina, l'utente può scorrere più di un modulo di attivazione e-mail (uno nella barra laterale e uno nel piè di pagina). Inoltre, se c'è un'opzione di posta elettronica nella parte inferiore della barra laterale destra e una nella parte superiore del piè di pagina, l'utente scorrerà due opzioni di posta elettronica consecutive sul cellulare.

Nascondere gli elementi all'interno dei moduli per ridurre al minimo il contenuto sui dispositivi mobili

Puoi decidere che non è necessario nascondere un intero modulo sul cellulare. Invece, puoi ridurre al minimo il contenuto del modulo nascondendo alcuni elementi solo sul display mobile.

Ad esempio, potresti voler mostrare l'immagine in primo piano e l'estratto dei post in primo piano nella barra laterale del desktop. Ma, sui dispositivi mobili, puoi nascondere l'immagine in primo piano e l'estratto per creare una versione ridotta del contenuto.

Rendere reattivo il contenuto della barra laterale

Puoi decidere di mantenere tutto il contenuto della barra laterale sul display mobile. Perchè no? Se disponi di informazioni preziose che sai che gli utenti apprezzeranno, conservale con ogni mezzo. Tuttavia, ti consigliamo di adottare misure per assicurarti che il contenuto della barra laterale sia reattivo. Significa che vorrai regolare le dimensioni e la spaziatura degli elementi per adattarli a schermi più piccoli. Questo ridurrà la distanza di scorrimento della pagina e renderà il contenuto più facile da leggere.

Regola le dimensioni del testo sul cellulare

Un modo semplice per ridurre al minimo la spaziatura verticale e migliorare la leggibilità sui dispositivi mobili è regolare la dimensione del testo del contenuto del modulo nella barra laterale. Ad esempio, puoi regolare il testo dell'intestazione da 24 pixel su desktop a 14 pixel su dispositivi mobili.

Regola spaziatura/divisori su dispositivi mobili

In questo esempio, abbiamo aggiunto divisori tra i moduli per creare spazio. Tuttavia, possiamo utilizzare le impostazioni Divi's Divider per regolare la spaziatura di quei divisori sui dispositivi mobili. Questo ridurrà lo spazio sprecato durante lo scorrimento.

Ad esempio, puoi modificare il margine superiore e inferiore del divisore da 30 px a 15 px su tablet e telefono.

Modifica dell'ordine di sovrapposizione della barra laterale su dispositivi mobili

L'ordine di sovrapposizione è un problema comune con le barre laterali. Questo è particolarmente vero per le barre laterali di sinistra. Come accennato in precedenza, le barre laterali di destra si impilano sotto (o dopo) il contenuto del post/pagina e le barre laterali di sinistra si impilano sopra (o prima) il contenuto del post/pagina. Ciò significa che quando visualizzi una pagina con una barra laterale sinistra su un dispositivo mobile, la prima cosa che un utente vedrà è il contenuto della barra laterale, invece del contenuto principale del post/pagina. Questo non va bene per UX. Per risolvere questo problema, puoi nascondere del tutto la barra laterale o modificare l'ordine di impilamento in modo che la barra laterale sinistra rientri sotto il contenuto del post/pagina sul dispositivo mobile.

Per modificare l'ordine di impilamento di una barra laterale sinistra per impilare sotto (o dopo) il contenuto della pagina su dispositivi mobili, apri le impostazioni di riga della riga contenente il layout della barra laterale. Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Quindi apri le impostazioni della colonna della colonna designata come barra laterale e aggiungi il seguente CSS personalizzato al display Main Element Tablet:

order: 2;

Se non hai indovinato, questo piccolo frammento cambia l'ordine dal valore predefinito ("1") al valore di "2" che fa sì che l'intera colonna/barra laterale si sovrapponga sotto/dopo la colonna che contiene il contenuto principale.

Pensieri finali

Le barre laterali continuano a essere uno spazio familiare per gli utenti che forniscono utili contenuti secondari mentre interagiscono con il contenuto principale di una pagina. Tuttavia, lo stesso contenuto della barra laterale sui dispositivi mobili può diventare una distrazione. Si spera che questo post ti abbia ispirato a dare alle tue barre laterali l'attenzione che meritano su tablet e telefoni. Ciò potrebbe significare che nascondi completamente la barra laterale, mostri solo alcuni contenuti della barra laterale o semplicemente ottimizzi il contenuto esistente specificamente per la visualizzazione mobile.

La barra laterale che è stata creata per il modello in questo tutorial è stata progettata utilizzando gli elementi di design esistenti trovati nel pacchetto di layout n. 3 del generatore di temi. Se ti piace il design di questo modello con la barra laterale, sentiti libero di scaricarlo qui sopra per dare un'occhiata più da vicino.

Per maggiori informazioni, consulta questa guida all'utilizzo delle barre laterali con Divi Theme Builder.

Non vedo l'ora di sentirti nei commenti.

Saluti!