Come creare uno slider full screen con Divi

Scopriamo insieme come creare uno slider full screen (a schermo intero) con il tema Divi

Alla versione attuale (4.17.3) il tema Divi non ha ancora una funzione integrata che permetta la creazione di uno slider full screen, disponibile invece nel modulo “Intestazione a larghezza piena”.

Vediamo insieme come è possibile ottenere lo stesso risultato con il modulo “Slider a larghezza piena” grazie all’aiuto di un po’ di CSS e Javascript.

Prima di tutto crea una nuova pagina dalla bacheca di WordPress, dagli un nome e clicca su “Usa il builder Divi”. Attendi il caricamento del builder (se si apre un popup clicca sul pulsante blu “Inizia a costruire”) e clicca sul pulsante + blu e poi sul pulsante viola “Larghezza piena”, qui scegli il modulo “Slider a larghezza piena”; ora puoi anche cancellare la sezione blu creata in automatico.

A questo punto puoi decidere se proseguire usando il builder in questo modo, oppure se realizzare il tutto con il builder visivo, per farlo clicca in alto sul pulsante “Costruisci sul front-end”, in questo modo sarà possibile vedere visivamente cosa stai realizzando.

Una volta finito di realizzare le tue slide personalizzate, recati nelle impostazioni del modulo e clicca in alto su Avanzate > ID & Classi CSS e nello spazio Categoria CSS inserisci questa classe: slider_fullscreen

A questo punto salva la pagina, recati nella bacheca di WordPress e vai su Divi > Opzioni tema > Generale, qui scorri in basso fino allo spazio CSS personalizzato.

All’interno di questo spazio inserisci il seguente codice CSS:

/* Slider full screen Aiutonerd.it */
.slider_fullscreen .et_pb_slides, .slider_fullscreen .et_pb_slide, .slider_fullscreen .et_pb_container
{min-height: 100% !important;
height: 100% !important;}

Dopodiché, sempre nelle impostazioni di Divi, andiamo nella scheda Integrazione e all’interno dello spazio “Aggiungi codice a < head > del tuo blog” inserisci il seguente codice Javascript:

<!-- Slider full screen Aiutonerd.it -->
<script>
(function($) {
    $(window).on('load resize', function() {
        $('.slider_fullscreen').each(function() {
            slider_fullscreen($(this));
        });
    });
    function slider_fullscreen(et_slider) {
        var slider_fullscreen_viewport_height = $(window).height(),
            slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
            $admin_bar = $('#wpadminbar'),
            $main_header = $('#main-header'),
            $top_header = $('#top-header');
        $(et_slider).height('auto');
        if ($admin_bar.length) {
            var slider_fullscreen_viewport_height = slider_fullscreen_viewport_height - $admin_bar.height();
        }
        if ($top_header.length) {
            var slider_fullscreen_viewport_height = slider_fullscreen_viewport_height - $top_header.height();
        }
        if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
            var slider_fullscreen_viewport_height =  slider_fullscreen_viewport_height - $main_header.height();
        }
        if (slider_fullscreen_viewport_height > slider_height) {
            $(et_slider).height(slider_fullscreen_viewport_height);
        }
    }
})(jQuery);
</script>

Ora ti basterà salvare le impostazioni e i tuoi slider diventeranno full screen su qualsiasi dispositivo, non importa quale sia la grandezza dello schermo. Ovviamente, nella scelta delle immagini, considera sempre che per mantenere lo slider full screen, le immagini verranno tagliate ai lati a seconda della risoluzione e grandezza del dispositivo.

Da adesso in poi, impostare uno slider full screen con Divi sarà molto più semplice!

Ti lascio di seguito il progetto dello slider da me realizzato per questo tutorial, con la classe già inserita, dovrai solo aggiungere il codice CSS e Javascript nelle impostazioni di Divi.

Scarica il template di questo tutorial

Questa guida è testata e funzionante alla versione 4.17.3 del tema Divi

Il tema Divi

Consiglio molto questo tema per utilizzare WordPress, anche Aiutonerd.it è stato realizzato grazie a Divi.

È adatto a tutti, sia per chi si trova alle prime armi, sia per chi è già un web designer affermato, perché le sue funzioni ti permettono di creare tutto quello che vuoi, dalle cose più semplici fino alle più complicate, l’unico limite è la tua immaginazione!

Alcuni collegamenti in questo articolo sono link di affiliazione.