Il cursore a tutta larghezza è dotato di alcune fantastiche funzionalità tra cui la possibilità di aggiungere cursori con sfondi video. Ma una caratteristica che lo rende ancora più potente è la possibilità di espandere il cursore per visualizzare in modalità a schermo intero. Quindi ti mostreremo come aggiungere la funzionalità a schermo intero a un dispositivo di scorrimento.
L'aggiunta di una funzionalità a schermo intero al modulo di scorrimento di Divi è estremamente facile da implementare con poche righe di CSS e JavaScript. In soli 5 minuti, puoi convertire il tuo dispositivo di scorrimento a larghezza intera in uno a schermo intero che si espande per riempire l'intero schermo, proprio come le intestazioni a schermo intero.
L'implementazione della funzionalità di scorrimento a schermo intero su Divi
Se non hai letto il nostro tutorial sulla presentazione dell'interfaccia Divi, Ti invito a farlo.
Passaggio 1: aggiungere un dispositivo di scorrimento con diapositive in modalità a larghezza intera
Usa il " Divi Builder »Aggiungi una sezione« larghezza »E clicca su« Inserisci un modulo '.
Aggiungere un modulo di grande ampiezza.
aggiungere un cursore modulo di Divi #
Nelle impostazioni del dispositivo di scorrimento a schermo intero, nella scheda "CSS personalizzato", aggiungi una classe CSS chiamata " et_fullscreen_slider '.
In "Impostazioni generali" aggiungi una nuova diapositiva.
Nelle impostazioni della diapositiva, in Impostazioni generali, aggiorna i seguenti elementi:
- Sezione: [inserire il tuo argomento]
- Pulsante Testo: [inserire il testo del pulsante]
- Pulsante URL: [inserire il pulsante URL]
- Immagine di sfondo: [aggiungere un'immagine di sfondo] (Sto usando un'immagine da unsplash.com)
Ripeti questo passaggio per tutte le diapositive che desideri aggiungere.
Al termine, fai clic su " Salva ed esci '.
Come aggiungere CSS e JavaScript personalizzati
Dalla dashboard di WordPress, vai a " Divi → Opzioni tema E in "Impostazioni generali", inserisci il seguente CSS nella casella di testo CSS personalizzato:
.et_pb_slides .et_fullscreen_slider, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-height: 100% significativa; altezza: 100%! important; }
fare clic sulla scheda successiva e aggiungere il seguente javascript alla casella di testo intitolata " Aggiungi il codice alla testa il tuo blog "
(function($) { $(window).on('load resize', function() { $('.et_fullscreen_slider').each(function() { et_fullscreen_slider($(this)); }); }); function et_fullscreen_slider(et_slider) { var et_viewport_width = $(window).width(), et_viewport_height = $(window).height(), et_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 et_viewport_height = et_viewport_height - $admin_bar.height(); } if ($top_header.length) { var et_viewport_height = et_viewport_height - $top_header.height(); } if (!$('.et_transparent_nav').length) { var et_viewport_height = et_viewport_height - $main_header.height(); } if (et_viewport_height > et_slider_height) { $(et_slider).height(et_viewport_height); } } })(jQuery);
infine
Ora hai un dispositivo di scorrimento della modalità a schermo intero per il tuo sito web. Usalo per creare efficaci slider a tutta larghezza per la maggior parte dei browser.
Se avete domande, non esitate a porle.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]
Altri tutorial di Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin
ciao e grazie per questo tutorial! Non riesco a trovare il codice js e css da inserire nello slider qui
Ciao, ottimo tutorial.
D'altra parte non viene visualizzato a schermo intero su iphone ad esempio, inclinando l'iPhone lo slider viene visualizzato di volta in volta a schermo intero ma non sempre…. come se non fosse reattivo, avresti idea di risolvere questo piccolo problema?
Grazie in anticipo,
Cordiali saluti,
Buongiorno,
Prova a disattivare tutti gli altri plugin, controlla anche che le tue versioni di WordPress e Divi siano aggiornate.
Buon pomeriggio, come posso personalizzare le dimensioni della diapositiva in modo che corrispondano alle dimensioni dell'immagine del banner in modo da non poter ritagliare l'immagine?
Buongiorno,
Non capisco la domanda.
Buongiorno,
Grazie per questo articolo. Ho letto che non è necessariamente necessario installare un tema figlio con Divi fintanto che non modifichiamo troppo il CSS.
C'è ancora un po 'di personalizzazione qui ...
Quindi consigli un child theme prima di applicare il tuo super tutorial?
Grazie in anticipo per tutti i tuoi buoni consigli, spesso ne traggo ispirazione 🙂
Buongiorno,
Non necessariamente. Puoi mantenere i divi se non hai troppe conoscenze tecniche.
Ciao, ottimo articolo!
Ho seguito quanto indicato nell'articolo ma il mio slider non viene visualizzato a tutto schermo su DIVI.
Mi potete aiutare ? Vorrei inserirlo nella mia home page.
Grazie per il vostro aiuto
Buongiorno,
Hai contattato il team DIVI?
Ciao Aliénor,
Ho lo stesso problema ... Hai trovato una soluzione?
grazie in anticipo
Buongiorno,
Sto costruendo la mia home page con builder ... quando faccio un'anteprima, vedo la pagina.
Il problema è che quando salvo la mia pagina e la riapro, il cursore non appare.
Qualcuno può aiutarmi?
Buongiorno,
Ciò potrebbe essere dovuto a un bug, hai provato a contattare l'assistenza di Eleganthemes?
Buongiorno,
Grazie per il tuo articolo!
Sapete come posso cambiare le diapositive velocità di scorrimento?