Evidenziazione del plug-in Divi – DotNav

Divi ha una funzione di navigazione integrata, chiamata Dot Navigation, che posiziona una serie di punti lungo il lato destro dello schermo. Ogni punto rappresenta una sezione di quella pagina. Fare clic sui punti porta a quella sezione. I punti sono semplici e si fondono con la maggior parte dei progetti di siti web. E se volessi modellarli? Ancora meglio, cosa succede se volessi mostrare un'etichetta o animarli al caricamento? Potresti essere interessato a un plugin chiamato DotNav.

DotNav è un plugin di terze parti di Divicio.us. DotNav ti offre gli strumenti per modificare il colore, le dimensioni e la forma dei punti e degli sfondi, aggiungere etichette, disabilitare punti specifici e controllare l'animazione di caricamento. Puoi nascondere DotNav per dispositivo. In questo momento saliente del plugin daremo un'occhiata a DotNav.

In questi esempi sto usando un layout fornito con Divi chiamato Product Features. Le immagini sono prese da Unsplash.com. Innanzitutto, abilitiamo la navigazione a punti di Divi.

Abilitazione della navigazione a punti

La navigazione a punti può essere abilitata o disabilitata in base alla pagina. Troverai le impostazioni nell'editor visivo per la pagina, nell'angolo in alto a destra sotto Dot Page Settings.

La navigazione a punti apparirà sul lato destro della pagina. I punti rappresentano le sezioni. Facendo clic su un punto si accede a quella sezione. In questo esempio sono passato alla seconda sezione e il secondo punto è illuminato.

Installazione di DotNav

Per prima cosa, decomprimi il file di download. Ci saranno tre file all'interno della cartella. Carica e attiva il file divi-dotnav.

Impostazioni di personalizzazione del tema DotNav

Le impostazioni per DotNav si trovano in Theme Customizer. Comprende tre aree:

• impostazioni generali
• Impostazioni punto
• Impostazioni etichetta

Diamo un'occhiata a ciascuna area.

Impostazioni generali DotNav

Le impostazioni generali ti consentono di nascondere DotNav per dispositivo, regolare l'offset, il bordo, il riempimento, i colori e l'animazione. Ci sono 11 animazioni tra cui scegliere, tra cui muoversi da una direzione scelta, dissolvenza in una direzione o capovolgimento sull'asse x o y.

Esempi

Quando regoli i controlli, vedi i cambiamenti in tempo reale. In questo esempio ho impostato l'offset corretto su 38 e regolato la larghezza, il raggio e l'imbottitura del bordo per creare un bordo arrotondato.

In questo esempio ho impostato la larghezza del bordo su 10 e il raggio del bordo su 30 su tutti i lati e il padding superiore su 20, da destra a 10, in basso a 20 e da sinistra a 9. Ho usato i colori dello sfondo e del bordo dalla pagina stessa così si fonderà.

DotNav Dot Settings

Le impostazioni dei punti ti consentono di mostrare o nascondere singole sezioni (richiede l'aggiunta di CSS alla sezione), regolare i margini, il raggio del bordo, la larghezza e il colore. Le impostazioni dei punti includono colore, larghezza e altezza e colore, larghezza e altezza al passaggio del mouse.

Esempi

In questo esempio ho impostato il raggio del bordo del punto su 10 tutt'intorno e regolato la larghezza del punto su 30. Questo crea interessanti linee orizzontali invece di punti rotondi.

La regolazione della larghezza del bordo e dell'altezza del punto può creare alcuni effetti interessanti. Qui ho impostato la larghezza del bordo del punto su 4 per la parte superiore e 10 per la destra.

Qui ho impostato il raggio del bordo in alto a sinistra su 0, quello in alto a destra su 98 e ho lasciato gli altri su 10. Ho anche impostato la larghezza del bordo del punto su 6 e ho regolato sia il colore del punto che il colore del punto attivo.

Questo utilizza le impostazioni generali predefinite e ha una larghezza del bordo di 1, una larghezza del punto e un'altezza di 15 e una larghezza del punto attiva e un'altezza di 20. I punti sono grigio scuro con un bordo rosso. Il punto attivo è bianco con un bordo rosso.

Questa è la stessa impostazione del punto e aggiunge una larghezza, un raggio e un'imbottitura del bordo superiore e inferiore per creare il bordo arrotondato.

Impostazioni etichetta DotNav

Le impostazioni dell'etichetta consentono di mostrare o nascondere le etichette dei punti, regolare il carattere, lo sfondo, la larghezza, applicare una larghezza fissa, ecc. Larghezza fissa aggiunge regolazioni per la larghezza dell'etichetta normale, la larghezza dell'etichetta attiva e l'allineamento del testo dell'etichetta. Per mostrare le etichette, le sezioni devono avere un ID (che viene utilizzato come etichetta).

Aggiungi l'etichetta al campo ID CSS nella scheda Avanzate per ogni sezione.

Le etichette verranno visualizzate automaticamente. Le etichette possono essere personalizzate e puoi scegliere di non visualizzare etichette specifiche. Questo esempio mostra le impostazioni predefinite.

In questo ho cambiato lo sfondo e i colori del carattere e ho creato l'offset della sezione attiva e un colore salmone per il suo carattere. È possibile regolare l'interlinea orizzontale, ma per la verticale è necessario regolare i margini dei punti nelle Impostazioni dei punti. Per me questo era l'unico che confondeva le regolazioni.

Se non vuoi che tutte le etichette vengano visualizzate, puoi impostarlo su Solo attivo, Solo al passaggio del mouse o Attivo e al passaggio del mouse.

Ho regolato le impostazioni dei punti per mettere un po' di spazio tra le etichette. Questo mi permetterà di rendere le etichette più alte senza sovrapporle. In questo i margini dei punti sono impostati su 16 per l'alto e il basso. Il raggio del bordo superiore destro e inferiore sinistro è impostato su 72 e quello superiore sinistro e inferiore destro è impostato su 22.

Nelle impostazioni dell'etichetta ho regolato l'imbottitura su 10 su tutti i lati, impostato l'offset destro del passaggio del mouse attivo su 45 e aumentato la dimensione del carattere a 18. Le etichette risaltano un po' di più.

Nascondere punti specifici

Se lo desideri, puoi nascondere punti specifici. Aggiungi la classe CSS alla scheda Impostazioni avanzate del modulo della sezione. Troverai il CSS in Dot Settings nel Theme Customizer.

Nelle Impostazioni punto, la prima impostazione è una casella a discesa. È impostato su Mostra per impostazione predefinita. Seleziona Nascondi. Questo nasconde tutte le sezioni a cui hai aggiunto la classe CSS della sezione nascondi (la classe CSS si trova nella nota sopra la casella a discesa). La sezione denominata TUTTE LE COSE GIUSTE non è più all'interno della struttura di navigazione dei punti.

Questo esempio viene mostrato solo al passaggio del mouse. Il carattere e il colore del punto attivo/al passaggio del mouse è impostato su rosso. Sfondo e bordi sono trasparenti. Il margine del punto è impostato su 16 per l'alto e il basso. La larghezza è 15 e l'altezza è 5, con il punto attivo impostato su 20 e 8.

Questo usa una larghezza fissa per le etichette. Sto usando il nero per lo sfondo dell'etichetta attiva con un carattere rosso e un bordo rosso per sinistra e destra (che è impostato su 5). Il raggio del bordo è impostato su 9 per dargli una leggera curva. Ho centrato il testo all'interno delle etichette. L'offset destro è 6 per far pendere le etichette sulla linea. L'offset destro attivo è 20 per farlo saltare fuori dalla linea.

Ho anche accorciato i nomi delle sezioni e nascosto l'etichetta per la sezione chiamata All The Right Things. I caratteri sono in corsivo.

Per le impostazioni del punto ho impostato la larghezza su 6 e l'altezza su 38. Il punto attivo è 10 e 35. Questo fa sembrare i punti una linea verticale. Userò questo esempio per mostrare le animazioni.

Animazioni DotNav

Le animazioni mostrano come appaiono i punti quando la pagina viene caricata. Include 11 animazioni. La durata dell'animazione può essere regolata utilizzando il cursore. Ecco alcuni di loro.

a destra dentro

Right In è difficile da vedere ma si sposta da destra come appare.

In basso in

Viene visualizzato Bottom In e scorre verso l'alto.

Dissolvenza in entrata

Fade In dissolvenze già in atto.

Dissolvenza a sinistra

Fade In Left si dissolve in apertura e poi si sposta da sinistra a destra in posizione.

Dissolvenza in alto

Fade In Top si dissolve in entrata e poi fa un ampio movimento verso il basso.

Capovolgi X

Flip In X si ribalta dall'asse X e rimbalza quando si posiziona.

Flip In Sì

Flip In Y si ribalta dall'asse Y e sembra una porta.

Licenza e documentazione

Il plug-in può essere utilizzato con siti Web illimitati per te e i tuoi clienti. La documentazione è inclusa nel file di download. Ho trovato i controlli abbastanza intuitivi da non aver bisogno della documentazione, ma sono contento che sia incluso per ogni evenienza.

Pensieri finali

Ho trovato DotNav facile da usare. Fornisce molte personalizzazioni ai punti e agli sfondi e mi piace poter aggiungere etichette. Le sezioni hover e active si distinguono e possono essere personalizzate separatamente. Le animazioni sono interessanti ma non ce ne sono molte e si animano solo al caricamento. La regolazione della larghezza e dell'altezza dell'etichetta su due schede separate (regolare l'altezza del punto per l'altezza dell'etichetta) può creare confusione all'inizio, ma una volta presa la mano non ho avuto problemi a effettuare le regolazioni.

Come tutte le impostazioni in Theme Customizer, le impostazioni di DotNav sono a livello di sito. Dovrai sperimentare con i colori dei caratteri e dello sfondo per trovare una combinazione che funzioni con ogni sfondo del tuo sito web.

Se sei interessato a personalizzare la navigazione a punti di Divi, DotNav di Divicio.us potrebbe essere il plugin che stai cercando.

Vogliamo sentire da voi. Hai usato DotNav per Divi? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite newelle / shutterstock.com