Que diriez-vous d 'manifestoer il tuo blog Divi sotto forma di carosello dove scorrere facilmente gli articoli?
Per molti siti web, il blogging è diventato una parte importante della loro strategia di marketing. SEO.
Ma oltre a creare contenuti di alta qualità , è anche importante semplificare il processo di navigazione dei post per i tuoi visitatori. In questo modo, possono passare da un articolo all'altro e trascorrere più tempo sul tuo sito Web a leggere i contenuti che pubblichi lì.
In Divi, c'è un modulo Blog che puoi utilizzare per visualizzare dinamicamente i tuoi articoli e personalizzarli. Se stai cercando un modo per portare l'esperienza di ricerca dei post al livello successivo, adorerai questo articolo.
Ti mostreremo come trasformare il modulo Blog integrato di Divi in ​​un carosello utilizzando gli elementi integrati di Divi e un libreria js gratuita .
Andiamo.
Panoramica
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato.
Crea una pagina del blog con Divi Theme Builder
Inizia aggiungendo una nuova pagina al sito web su cui stai lavorando.
Assegna un titolo alla tua pagina, pubblica la pagina e fai clic su 'Usa Divi Builder'.
Scarica la pagina del blog di layout pre-progettata di "Società di design d'interni".
In questo tutorial, utilizzeremo la pagina del blog dal layout "Società di interior design", ma sei libero di utilizzare qualsiasi altro layout che ti piace.
Crea modelli di freccia "Precedente" e "Avanti" utilizzando il modulo Riepilogo di Divi
Una volta all'interno della pagina del blog, possiamo iniziare a creare il carosello.
La prima parte è dedicata alla creazione delle frecce di cui abbiamo bisogno per consentire ai visitatori di navigare tra gli articoli.
Leggi anche: Come creare un'intestazione globale appiccicosa in DIVI
Per progettare le frecce, utilizzeremo il modulo Riepilogo di Divi, ma sei libero di utilizzare qualsiasi altro modulo a tua scelta.
Aggiungi una nuova riga nella parte superiore della sezione il tuo blog utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della linea e lascia che la linea tocchi i lati sinistro e destro della sezione modificando le impostazioni del dimensionamento come segue:
- Larghezza massima: 100%
- Larghezza massima: 100%
Aggiungi un modulo Riepilogo
Aggiungi un modulo Riepilogo e inserisci un titolo.
Quindi seleziona un'icona.
- Usa icone: SÌ
Impostazioni delle icone
Passa alla scheda Stile e modifica le impostazioni dell'icona come segue:
- Colore icona: #000000
- Posizionamento immagine/icona: vertice
- Allineamento immagine/icona: centro
Impostazioni del testo del titolo
Quindi, modifica le impostazioni del testo del titolo.
- Carattere del titolo: Mulish
- Soft Light Titolo: Semi grassetto
- Allineamento del testo: al centro
- Colore del testo del titolo: #000000
dimensionamento
Quindi modifichiamo le impostazioni di dimensionamento del modulo su diverse dimensioni dello schermo.
- Larghezza massima: 10% (desktop), 20% (tablet), 30% (telefono)
- Allineamento del testo: a destra
Aggiungiamo anche una classe CSS. Questa classe CSS ci aiuterà ad attivare l'azione del carosello al clic.
- Classe CSS: pulsante indietro
Infine, aggiungeremo anche una riga di codice CSS all'elemento principale del modulo per trasformare il cursore in un puntatore.
cursor: pointer;
Clona la linea e posizionala in fondo alla sezione
Una volta completata la prima freccia, puoi clonare l'intero contenitore di righe e posizionare la riga duplicata alla fine della sezione del blog.
Apri il modulo Riepilogo nella riga duplicata e modifica il titolo.
Usa icone: SÌ.
Modifica anche la classe CSS.
- Classe CSS: pulsante successivo
Prepara il modulo Blog
dimensionamento
Con le frecce in posizione, è ora di iniziare a modificare il modulo Blog, a partire dalla riga in cui è posizionato. Apri le impostazioni della linea e modifica le impostazioni del dimensionamento di conseguenza:
- Larghezza massima: 100%
- Larghezza massima: 100%
Quindi imposta gli overflow di linea su "nascosto". Ciò contribuirà a garantire che il carosello non provochi la visualizzazione di una barra di scorrimento orizzontale nella nostra pagina.
- Overflow orizzontale: nascosto
- Troppopieno verticale: nascosto
Nascondi impaginazione
Una volta che le impostazioni della riga sono a posto, apri le impostazioni del modulo Blog. Assicurati che il paging sia disabilitato nelle impostazioni degli elementi.
- Mostra impaginazione: No
Quindi, passa alla scheda Stile e cambia il layout in "Schermo intero".
- Modello: schermo intero
Aggiungeremo anche una sovrapposizione.
- Immagine sovrapposta mostrata: ATTIVA
- Colore dell'icona in sovrimpressione: #ffffff
- Colore di sfondo sovrapposto: rgba (1,0,66,0.33)
Successivamente, aggiungeremo una classe CSS al nostro blog, che ci aiuterà ad abilitare il carosello più avanti nel tutorial.
- Classe CSS: modulo blog
E genereremo un po' di spazio tra il post meta e l'estratto aggiungendo un margine inferiore all'elemento Post Metadata CSS nella scheda avanzata.
Scopri anche: Come creare un menu scorrevole ea pressione in DIVI
margin-bottom: 50px;
Aggiungi la funzionalità Slick JS
Una volta che tutte le impostazioni di Divi sono a posto, è il momento di aggiungere la funzionalità slick js! Aggiungi un modulo Codice appena sotto il modulo Blog (o in qualsiasi altra parte della pagina).
Quindi aggiungi la libreria js slick nei tag di script (come puoi vedere nella schermata di stampa qui sotto). Sei anche libero di aggiungerli all'intestazione del tuo sito Web nelle impostazioni di Tema Divi.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Modificheremo leggermente ogni post del blog a livello individuale utilizzando il codice CSS.
Leggi anche: Come creare la pagina del blog con il modulo Blog in DIVI
Assicurati di inserire il codice tra i tag di stile come mostrato nello screenshot qui sotto.
.slick-slide {
float: left;
margin: 2vw;
}
E infine, aggiungeremo del codice JQuery per consentire al carosello di prendere forma. Nel codice sottostante, aggiungiamo anche i pulsanti che abbiamo progettato per la funzionalità del carosello.
Assicurati di inserire il codice nei tag di script come puoi vedere di seguito.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
Salva la pagina ed esci da Divi's Visual Builder per visualizzare il risultato
Nel Visual Builder non vedrai il risultato.
Quindi, appena hai finito, salva la tua pagina, esci dal Visual Builder e guarda il risultato sul tuo sito web!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Scarica DIVI ora!!!
Conclusione
Ecco ! Questo è tutto per questo articolo. Ti abbiamo mostrato come portare il design del tuo modulo Blog al livello successivo. In particolare, ti abbiamo mostrato come trasformare il modulo Blog integrato di Divi in ​​un carosello utilizzando una libreria js gratuita.
Se vuoi saperne di più su Divi, non esitare a visitare il nostro catalogo di Tutorial Divi. Puoi anche consultare Come creare la pagina Blog con il modulo Divi Blog
Vedi anche le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
