Vai al contenuto principale

Come creare un cursore a schermo intero su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 '.

Come aggiungere un modulo su divi builder

Aggiungere un modulo di grande ampiezza.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 '.

Modifica CSS avanzata del cursore divi

In "Impostazioni generali" aggiungi una nuova diapositiva.

Aggiungi un diaspositivo su divi

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)

Impostazioni diapositiva Divi

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 fine del 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 a schermo intero per il tuo sito web. Usalo per creare efficaci cursori a larghezza intera per la maggior parte dei browser.

Se avete domande, non esitate a porle.

Altri tutorial di Divi

Questo articolo contiene i commenti 12

  1. 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,

    1. Buongiorno,

      Prova a disattivare tutti gli altri plugin, controlla anche che le tue versioni di WordPress e Divi siano aggiornate.

  2. 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?

  3. 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 🙂

  4. 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

  5. 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?

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
13 azioni
quota5
Tweet1
Enregistrer7