Evidenziazione del plug-in Divi – Owl Carousel Pro

Hai mai desiderato visualizzare post, progetti, tipi di post personalizzati e immagini all'interno di un carosello utilizzando Divi Builder? I post e le immagini vengono in genere visualizzati all'interno di un dispositivo di scorrimento, che mostra un post o un'immagine alla volta, ma cosa succede se si desidera un vero e proprio carosello che visualizza più post contemporaneamente? Puoi farlo facilmente con un plugin chiamato Owl Carousel Pro.

Owl Carousel Pro è un plug-in di terze parti che aggiunge due nuovi moduli a Divi Builder. Il primo mostra i tipi di post come progetti, post e tipi di post personalizzati. Il secondo è un carosello di immagini in competizione con l'editor visuale per aggiungere qualsiasi tipo di contenuto tu voglia.

È disponibile una versione gratuita del plugin. Sto dando un'occhiata alla versione pro, che aggiunge diverse nuove funzionalità tra cui:

• tipi di post personalizzati
• visualizza campi personalizzati
• query personalizzata
• cambia la dimensione della miniatura
• cambia il numero di immagini mostrate
• apri immagine in lightbox

Le immagini per gli esempi sono prese da Unsplash.com.

Installazione di Owl Carousel Pro

Carica e attiva il plugin normalmente. Vedrai quindi due nuovi moduli nel Divi Builder: DP Owl Carousel e DP Owl Image Carousel. I moduli sono colorati in modo diverso rispetto ai moduli Divi standard per aiutarli a distinguersi. Questa è la mia preferenza per i moduli di terze parti perché li rende più facili da trovare.

DP Owl Carousel

DP Owl Carousel visualizza post, progetti e tipi di post personalizzati all'interno di un carosello. Mostrerà i tuoi ultimi 10 post o da categorie o tag che selezioni. La sua scheda contenuto include le impostazioni per il contenuto e gli elementi. La scheda Design include testo, testo del titolo del post, metatesto del post, testo dell'estratto del post, testo archiviato personalizzato, spaziatura, freccia, controlli e miniature.

La scheda avanzata contiene le impostazioni CSS previste ma aggiunge anche azione di clic, animazione (determina i tempi per lo scorrimento), sfondo e visibilità. I colori di sfondo in entrambi i moduli sono solo a colori singoli, quindi non sono disponibili sfumature o immagini. Normalmente non guarderei nella scheda avanzata a meno che non volessi usare i CSS, quindi mi sarei perso queste impostazioni come mi aspettavo che fossero nella scheda contenuto.

È possibile creare una query personalizzata (esempi forniti sul sito Web) oppure utilizzare le impostazioni all'interno del modulo per controllare ciò che viene visualizzato. Include diverse impostazioni per controllare la visualizzazione come il numero di post, un numero di offset, il nome del tipo di post personalizzato, le categorie, i tag da includere e i tag da escludere. Ha aggiunto automaticamente i miei tipi di post personalizzati.

Le query personalizzate vengono aggiunte al tema figlio all'interno del codice PHP (apporta sempre modifiche PHP in un tema figlio e non nel tema padre in modo da non perdere le modifiche quando il tema si aggiorna). Il sito web dello sviluppatore include alcuni esempi.

Nota: prova sempre il codice su un sito di prova prima di aggiungerlo al tuo sito live.

DP Owl Carousel Esempi

Questo è il design standard (ho aggiunto uno sfondo per farlo risaltare). Visualizza i miei ultimi 10 post in tutte le categorie. Ho incluso l'intestazione Divi e il meta del post per mostrare come appare all'interno della pagina. Facendo clic su una delle immagini si accede al post.

Questo aggiunge il titolo, la categoria e la data. Puoi anche mostrare campi personalizzati se li hai impostati.

Questo mostra il titolo e l'estratto del post utilizzando i 270 caratteri predefiniti.

In questo ho impostato l'estratto del post a 70 caratteri.

In questo ho disabilitato le frecce e i controlli. L'animazione funziona ancora, ma gli utenti non possono scorrere le diapositive.

In questo ho modificato le dimensioni e i colori dei caratteri, reso rosse le frecce, aumentato la dimensione dei controlli e reso viola, aumentato la dimensione delle miniature, ridotto il margine a 0 e impostato per visualizzare 3 immagini. Il secondo colore per i controlli è una versione più scura del colore che ho scelto. Il secondo colore è fornito dal plugin.

In questo ho aggiunto uno sfondo nel modulo stesso e modificato il margine dell'elemento in modo che lo sfondo venga visualizzato tra i post. Ho anche cambiato i colori dei caratteri e questa volta ho regolato l'altezza e la spaziatura della linea. Mostra 4 post per schermata e ho ridotto la dimensione delle miniature. Ho impostato le frecce su grandi e i controlli su piccoli.

Quando cambi la dimensione della miniatura, si adatterà solo al numero di post che stai mostrando. Quindi, se desideri che le immagini siano più grandi, dovrai ridurre manualmente il numero di post visualizzati.

DP Owl Image Carousel

Il DP Owl Image Carousel visualizza le immagini all'interno di un carosello. Ti consente di aggiungere immagini e visualizzare le frecce e i controlli. Le impostazioni di progettazione includono testo, testo del titolo dell'immagine, testo del contenuto dell'immagine, spaziatura, freccia, controlli e miniature. La scheda avanzata è la stessa del modulo DP Owl Carousel.

Puoi aggiungere tutte le immagini che desideri, farle aprire in una lightbox e farle utilizzare una versione copiata dell'immagine o dell'immagine originale. Ho scelto appositamente immagini di diverse dimensioni per vedere come funziona.

Le immagini si mostrano bene. Mi piace che tu possa collegarti a un URL o aprirli in una lightbox. Mi piacerebbe vedere le sovrapposizioni aggiunte alle immagini in quanto ciò migliorerebbe ulteriormente l'esperienza.

DP Owl Image Carousel Esempi

Ecco come appare il modulo sulla pagina utilizzando le impostazioni predefinite. Ho aggiunto uno sfondo nella sezione per farlo risaltare.

In questo esempio ho aggiunto titoli e testo alle immagini. Ho anche impostato le frecce e i controlli su colori grandi e modificati per ciascuno.

Questo mostra 4 immagini. Ho aumentato la dimensione dell'immagine e diminuito il margine dell'elemento da 8 a 4. Successivamente ho regolato le dimensioni ei colori dei caratteri, delle frecce e dei controlli. I caratteri del titolo hanno una spaziatura aumentata.

Questo utilizza uno sfondo scuro con nuovi colori per i caratteri, i controlli e le frecce.

Ecco come appaiono le immagini quando le apri in una lightbox. L'animazione di scorrimento funziona ancora in background.

Tipi di post personalizzati

Nel modulo Owl Carousel Pro assicurati che Custom Query sia disabilitato (questo è usato solo se vuoi creare i tuoi filtri personalizzati invece di scegliere categorie dall'elenco) e scegli il tuo tipo di post sotto Custom Post Type Name. Ho installato WooCommerce e ora ho automaticamente Prodotto come opzione.

Ciascuna delle mie categorie di prodotti viene aggiunta automaticamente all'elenco delle categorie. Ora posso scorrere verso il basso e selezionare i prodotti che voglio visualizzare nel carosello.

I prodotti verranno visualizzati, ma per mostrare i prezzi devo abilitare il campo personalizzato, scegliere il campo da visualizzare e aggiungere un'etichetta per mostrare il simbolo di valuta desiderato. Scorri verso il basso e abilita Mostra campi personalizzati. Aggiungi _price ai nomi dei campi personalizzati e $ alle etichette dei campi personalizzati.

Ora ho un carosello di prodotti che mostra le categorie WooCommerce che ho selezionato. Ho scelto di mostrare 4 post, ho aumentato le dimensioni dell'immagine, cambiato i colori dei caratteri per il titolo, il meta e i campi personalizzati e ho aumentato le dimensioni dei caratteri per il titolo e i campi personalizzati. In questo esempio mostro solo la data per il meta, ma proprio come i post normali potrei mostrare qualsiasi meta informazione e un estratto.

Utilizzo di Owl Carousel Pro con Extra e il plug-in Divi Builder

Owl Carousel Pro funziona benissimo anche con Extra. Questo è il carosello di immagini.

Ecco uno sguardo al plugin con il plugin Divi Builder installato sul tema Twenty Seventeen WordPress. Questo mostra i miei prodotti WooCommerce.

Licenza

Il plug-in può essere utilizzato su siti Web illimitati per te e i tuoi clienti. Include 1 anno di aggiornamenti e supporto.

Pensieri finali

Owl Carousel Pro aggiunge due simpatici moduli a Divi Builder che ti consentono di visualizzare post, progetti, tipi di post personalizzati e immagini all'interno di un carosello personalizzabile. Sono incluse la maggior parte delle personalizzazioni previste del modulo Divi e alcune nuove funzionalità per controllare il display.

Ho trovato quasi tutte le funzionalità e le impostazioni intuitive. Ho trovato i filtri personalizzati confusi per l'utente medio. Mi piacerebbe vedere diversi esempi completi di creazione di filtri in quanto ciò dimostrerebbe le vaste capacità di questo plugin. Anche se non vuoi avere a che fare con il codice, la versione pro aggiunge funzionalità sufficienti per valerne la pena.

Ci piacerebbe sentire da voi. Hai provato Own Carousel Pro? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite gst / shutterstock.com