Gli slider carosello sono ampiamente utilizzati nel web design per la loro capacità di mostrare in modo efficiente servizi, immagini, funzionalità e vari altri contenuti senza occupare spazio eccessivo. Implementando un carosello, puoi ottimizzare l'utilizzo dello spazio e migliorare l'esperienza utente complessiva.
In questa guida ti guiderò attraverso il processo di integrazione della funzionalità carosello nel tuo sito web Divi . Sfrutteremo la libreria Swiper.js da una fonte di terze parti e applicheremo CSS personalizzati per adattare lo slider alle tue preferenze.
Per incorporare la funzionalità dello slider nel tuo sito web Divi, richiama semplicemente la libreria swiper.js nel file Functions.php del tuo tema figlio.
Progetta uno slider carosello senza plugin
Per abilitare la funzionalità per il nostro slider, dobbiamo includere la libreria swiper.js nel file Functions.php del nostro tema figlio Divi.
Create Amazing Websites
Con il miglior generatore di pagine gratuito Elementor
Parti oraInoltre, dobbiamo inserire il codice di configurazione che specifica parametri come il numero di colonne da visualizzare nello slider, se le diapositive devono essere ripetute in loop e se la navigazione tramite freccia e l'impaginazione devono essere abilitate, tra le altre impostazioni.
Per un elenco completo delle configurazioni disponibili, fare riferimento alla pagina API Swiper . Ora, tuffiamoci nell'implementazione.
Tutto il codice PHP deve essere incorporato nel file Functions.php del tema secondario Divi. Puoi apportare modifiche a questo file tramite FTP, il File Manager sul tuo server o utilizzando l'editor dei temi accessibile nella dashboard di WordPress. In questo caso procederemo con l'editor dei temi.
Per accodare la libreria swiper.js nel nostro tema figlio, segui questi passaggi:
- Passare ad Aspetto → Editor del tema
- Apri il file Functions.php nel tuo tema figlio e aggiungi il codice PHP personalizzato.
<?php
// Enqueue Swiper.js Library
function dp_carousel(){
wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);
function dp_carousel_slider_scripts() {
?>
<script type="text/javascript">
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.dp-carousel')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '<div class="swiper-pagination"></div>';
// If we need navigation buttons
extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 3000,
},
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts'); - Seleziona Aggiorna file.
Ora dobbiamo utilizzare Divi Builder per creare tutte le cose che verranno visualizzate nel nostro dispositivo di scorrimento. Sarà necessario aggiungere classi e ID personalizzati di riga, colonna e modulo. Può esserci solo un layout di colonna e verrà convertito in un carosello in base ai numeri di colonna specificati nel codice PHP delle impostazioni.
Per questo esempio ho utilizzato i moduli Blurb con un bellissimo design ed effetti al passaggio del mouse, ma puoi utilizzare qualunque modulo Divi ti piaccia.
Aggiungi una sezione con una riga di colonna alla tua pagina utilizzando Divi Builder.
Trova il modulo Blurb e aggiungilo alla pagina.
È possibile accedere alle impostazioni della riga facendo clic sul simbolo dell'ingranaggio nella barra degli strumenti verde.
Seleziona ID CSS e classi avanzati.
Includi dp-carousel nel campo Classe CSS.
Passa alla scheda Contenuto
Apri le impostazioni della colonna e aggiungi la classe swiper-wrapper al campo Classe CSS.
Per personalizzare il modulo blurb, apri le impostazioni del modulo e nativa nella scheda Avanzata. Quindi aggiungi lo scorrimento al campo CSS.
Passare alla scheda Contenuto e fare clic sull'interruttore Testo.
Includere titolo e corpo del testo.
Aggiungi un'immagine di sfondo nell'interruttore Sfondo.
Ora per il design del testo del titolo, ecco le impostazioni:
- Carattere del titolo – Abhaya Libre
- Colore – #415962
- Dimensioni del testo del titolo: 26px e 22px sui cellulari
Per il corpo del testo, segui queste impostazioni.
- Carattere del titolo: aperto Sans
- Colore – #879296
- Dimensioni del corpo del testo: 14px e 12px sui cellulari
- Altezza della linea del corpo: 1,5 em
In questa fase finale, aggiungeremo una spaziatura Blurb e un CSS personalizzato per dare al contenitore del contenuto uno sfondo bianco e un'animazione di zoom all'immagine di sfondo.
Attiva/disattiva l'opzione Spaziatura disegno nelle impostazioni Blurb.
- Dovrebbe essere aggiunta l'imbottitura per i desktop. 300px/1,5vw/1,5vw/1,5vw
- Dovrebbe essere aggiunta l'imbottitura per i tablet. 220px/30px/30px/30px
- Dovrebbe essere aggiunta l'imbottitura per i cellulari. 200px/20px/20px/20px
Passare alla scheda Avanzate e selezionare la casella di controllo CSS personalizzato.
Dimensione dello sfondo: 100%.
Transizione dello sfondo al campo dell'elemento principale.
Tutte le transizioni durano 0,5 secondi.
Al passaggio del mouse, aggiungi una dimensione di sfondo e passa all'elemento principale.
dimensione dello sfondo al 105%; Tutte le transizioni durano 0,5 secondi.
Per il colore di sfondo, incollalo nel campo CSS personalizzato.
background-color: white;
padding: 30px 1.5vw;Inoltre, devi aggiungere il colore di sfondo e il riempimento al campo Contenuto Blurb al passaggio del mouse.
background-color: white;
padding: 30px 4vw;
Ora che abbiamo completato il modulo Blurb, possiamo replicarlo quante volte vogliamo per aggiungere nuovi blurb al nostro carosello. Devi solo sostituire le parole e modificare l'immagine di sfondo in ogni modulo copiato.
Il nostro slider è quasi finito. Infine, aggiungeremo alcuni CSS personalizzati per decorare la navigazione e l'impaginazione del nostro slider. Questo codice può essere inserito in Divi/Opzioni tema/CSS personalizzato o nel file style.css del tuo tema figlio.
/* DP Slider Navigation */
.dp-carousel .swiper-button-prev {
transform: none;
margin-top: -100px;
top: 10px !important;
margin-left: auto!important;
right: 52px;
font-size: 20px !important;
background-color: #fff;
padding: 25px !important;
}
.dp-carousel .swiper-button-next {
transform: none;
top: 10px !important;
margin-top:-100px;
right: 0px !important;
background-color: #fff;
padding: 25px !important;
}
/* Arrow Size and Style */
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 20px;
color: #aed4e4;
}
/* DP Slider Pagination */
.dp-carousel .swiper-pagination-bullet-active {
background-color: #fff;
}
.dp-carousel .swiper-pagination-bullet {
background-color: #fff;
top: 15px;
}
Ora ecco la diapositiva finale.
Parole finali
La creazione di un carosello in Divi senza utilizzare un plug-in implica sfruttare le funzionalità integrate e le opzioni di personalizzazione fornite dal tema Divi. Seguendo questa procedura, puoi creare un carosello su misura per i tuoi contenuti specifici e le tue preferenze di progettazione senza fare affidamento su plug-in aggiuntivi.
