Evidenziazione del plug-in Divi: modulo Divi Ribbon

Divi Ribbon Module è un plug-in di terze parti per Divi che aggiunge un nastro stilizzabile al contenuto del modulo. Aggiungi un'immagine, un pulsante, un titolo, un contenuto e uno stile per ogni elemento nel modo più dettagliato che desideri. Usalo per evidenziare la vendita di un prodotto, creare un invito all'azione o attirare l'attenzione su qualsiasi elemento. In questo momento saliente del plugin Divi, daremo un'occhiata al Divi Ribbon Module e vedremo cosa può fare.

Installazione del modulo nastro Divi

1. Vai su e scarica il plugin
2. Nella dashboard di WordPress, vai su Plugin > Aggiungi nuovo
3. Fare clic su Carica plug-in
4. Seleziona il file zippato dal tuo computer
5. Fare clic su Installa ora
6. Quando vedi "Plugin installato correttamente", fai clic su Attiva plugin
7. Vai su Strumenti > Divi Ribbon Plugin License e inserisci la tua chiave di licenza

Modulo nastro Divi

Un nuovo modulo viene aggiunto a Divi Builder chiamato Divi Ribbon. Il modulo crea un contrassegno (completo di titolo, contenuto, icona, immagine e pulsanti) e posiziona un nastro su quel contrassegno. Hai il controllo sul posizionamento e sullo stile della barra multifunzione, nonché sugli altri elementi nel modulo. Il blurb include un'ombra box per impostazione predefinita.

Scheda Contenuto della barra multifunzione Divi

La scheda Contenuto include le impostazioni principali, la rotazione del blurb, l'immagine e l'icona, il collegamento, lo sfondo e l'etichetta dell'amministratore. Le impostazioni principali forniscono selezioni per il tipo di nastro, la posizione, il testo, il titolo e il contenuto.

Impostazioni principali

Ci sono 7 tipi di nastro tra cui scegliere. Funzionano allo stesso modo e includono lo stesso contenuto, ma mostrano forme diverse. Le forme includono nastri con estremità biforcute, nastri che attraversano i bordi, nastri sul lato o in alto e hanno diversi tipi di estremità come forchette o cerchi. Questo ti dà molte scelte di visualizzazione.

Ciascuno dei tipi di nastro ha opzioni di posizione diverse a seconda delle capacità di visualizzazione. Questo esempio mostra il nastro d'angolo. Può essere posizionato in alto a sinistra oa destra, oppure in basso a sinistra oa destra.

Il fork può essere visualizzato in alto a sinistra o a destra.

L'intera larghezza può essere visualizzata sopra o sotto.

Alcuni tipi di nastro hanno altre opzioni che si aprono quando li selezioni. Questo esempio mostra il nastro a tutta larghezza. Puoi regolarne la posizione e l'altezza.

Il nastro laterale include le regolazioni per la posizione, la larghezza e l'altezza. Tutti i controlli sono gli slider Divi standard, quindi sono facili da usare.

Il titolo e il contenuto vengono aggiunti alla scheda stessa. L'area del contenuto ha schede per immagini e testo e possono includere media, collegamenti, codice e shortcode.

Rotazione blurb

La rotazione Blurb aggiunge un'opzione di capovolgimento 3D che mostra il contenuto dopo che la carta si è girata su un lato e un'immagine e un'icona da mostrare sul carattere.

Aggiungi immagini dalla tua libreria multimediale e icone dall'elenco. L'immagine/icona verrà mostrata per prima, quindi la scheda si capovolgerà per mostrare il contenuto al passaggio del mouse. Puoi anche aggiungere immagini come sfondo.

Pulsante

Il pulsante include testo, collegamento, opzioni della finestra, riempimento e margine. Ho aggiunto un margine sinistro per estrarre il pulsante da sotto il nastro.

Scheda Design del nastro Divi

La scheda Divi Ribbon Design include le impostazioni per l'immagine e l'icona, la rotazione, il testo, il ridimensionamento, la barra multifunzione, il testo del titolo, il corpo del testo, il pulsante, la spaziatura, il bordo, i filtri, la trasformazione e l'animazione.

Immagine e icona

Le impostazioni dell'immagine e dell'icona consentono di regolare la larghezza dell'immagine, il bordo, l'ombra del riquadro, i colori, la modalità di fusione, ecc.

Rotazione

Le impostazioni di rotazione consentono di regolare il colore del viso. Questo è lo sfondo dietro l'immagine. Disabilita il bordo della carta originale in modo da poterne creare uno tuo. Regola l'icona di rotazione. Ha molte opzioni per l'icona. Aggiungi un colore dell'icona, uno sfondo, un bordo e usa una dimensione del carattere pre-rotazione.

All'inizio, era un po' confuso che la regolazione dell'icona fosse qui invece delle impostazioni dell'immagine e dell'icona, ma ha senso essere in questa sezione. Avrebbe senso inserire anche qui le impostazioni dell'immagine, ma ce ne sono così tante che ha bisogno di una scheda separata.

Spaziatura del testo

La spaziatura del testo fornisce le impostazioni di margine e riempimento per il titolo e il corpo del testo. Normalmente, la barra multifunzione verrà visualizzata sopra il contenuto. Ciò ti consente di regolare il posizionamento del testo in base alla posizione della barra multifunzione se desideri che sia visibile. Ho aggiunto il riempimento sia per il titolo che per il corpo del testo in questo esempio.

Impostazioni della barra multifunzione

Le impostazioni del nastro consentono di modificare il colore, aggiungere un'immagine che riempirà il nastro, disattivare l'estremità del nastro (per evitare che lo stile si sovrapponga alla scheda), regolare i caratteri, aggiungere un'ombra di testo, regolare gli angoli del nastro e il bordo. Ho cambiato il colore del nastro in questo esempio.

L'immagine riempirà il nastro. Sono riuscito a far funzionare solo i JPG, ma funziona bene. Ti consiglio di scegliere un'immagine che sia già delle dimensioni che desideri in modo da avere il controllo su come viene visualizzata.

Spegnendo l'estremità del nastro si elimina la parte che si ripiega dietro la carta, come puoi vedere a sinistra del nastro in questo esempio.

Testo

Il titolo e il corpo del testo includono tutte le opzioni previste. In questo esempio, ho aumentato la dimensione di entrambi, cambiato il colore del testo del titolo e centrato entrambi.

Pulsante

Lo stile del pulsante include tutte le opzioni previste e aggiunge una funzionalità per visualizzare il gradiente sopra l'immagine di sfondo. In questo esempio, ho aumentato la dimensione del carattere, cambiato il colore del carattere e del bordo, arrotondato il bordo, dato una sfumatura allo sfondo e aggiunto un'ombra.

Esempi di nastri Divi

Ecco alcuni esempi di come appare Divi Ribbon all'interno dei layout Divi.

Nastro in vendita

Per il primo esempio, sostituirò il CTA a destra.

È stato realizzato con tre moduli: immagine, testo e pulsante. Userò lo stesso sfondo, testo e pulsante e lo ricreerò con un singolo modulo Divi Ribbon.

Ecco il risultato usando Divi Ribbon. Ho aggiunto l'immagine, il testo del titolo e il corpo del testo in modo che corrispondano all'originale. Ho anche aggiunto il nastro all'angolo e spostato il pulsante al centro e ho usato il colore del bordo dallo sfondo del nastro. L'originale utilizzava l'immagine nella colonna. L'ho rimosso e aggiunto l'immagine al modulo, ma funzionerebbe in entrambi i casi.

Non ho incluso l'immagine ondulata (un'onda triangolare), ma potrebbe essere aggiunta facilmente nell'area del contenuto. Il titolo dovrebbe anche essere spostato nell'area del contenuto per far apparire l'immagine sopra il titolo. Il nastro in vendita lo fa risaltare un po' di più.

Nastro Ultimi Progetti

Per questo, ho sostituito un'immagine con il modulo Divi Ribbon e ho aggiunto un nastro a tutta larghezza come CTA per vedere gli ultimi progetti. Il nastro ha un'immagine di sfondo e caratteri dal layout. L'ombra della casella è l'impostazione predefinita. Ho centrato il testo.

Nastro di invito all'azione del prodotto

Per questo esempio, ho aggiunto un modulo Divi Ribbon alla sezione degli eroi della pagina del negozio del layout di Leather Company. Utilizzando un'immagine dal layout, ho sostituito il CTA di vendita standard. La barra multifunzione e il pulsante utilizzano i colori del layout. Ho spostato il nastro nell'angolo in basso a destra e ho rimosso l'estremità del nastro.

Questa è una sezione Specialità. Sono contento di vedere che funziona bene nelle sezioni Specialità. Molti moduli di terze parti non sono sempre compatibili con questo tipo di sezione.

Prova e Acquista

È possibile acquistare Divi Ribbon Module dal sito Web dello sviluppatore per $ 11 per uso personale o commerciale su un singolo sito Web.

Puoi anche testare il plug-in prima dell'acquisto per vedere se funzionerà per le tue esigenze. Il link per testare il plugin si trova nella pagina di vendita dello sviluppatore. Ti dà pieno accesso a Divi Builder e al plug-in, in modo da poterlo modellare a tuo piacimento. Consiglio di provarlo.

Pensieri finali

Divi Ribbon Module è un modulo interessante per Divi Builder. Include diversi posti per aggiungere immagini e puoi includere un titolo, un contenuto, un'icona e un pulsante. Con tutte queste funzionalità, funziona benissimo come blurb, invito all'azione, collegamento al prodotto, collegamento al blog, ecc. Aggiungi a questo un nastro stilizzabile per richiamare l'attenzione sulle vendite o altri CTA e questo plug-in fornisce opzioni di stile difficili da ottenere con un singolo modulo.

Divi Ribbon Module funziona alla grande con Visual Builder e Theme Builder. È un ottimo plugin facile da consigliare.

Vogliamo sentire da voi. Hai provato Divi Ribbon Module? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite Foxys Graphic / shutterstock.com