Come creare un cursore a schermo intero su Divi

da Blair Jersyer | Divi, WordPress Tutorial

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.

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 uno slider a schermo intero per il tuo sito web. Usalo per creare dispositivi di scorrimento efficaci a larghezza intera 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 =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL TEMA DIVI [/ vcex_button] [/ width_column] [» [vc_column] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "vuoto" layout = "espanso" align = "centro" 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 MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Altri tutorial di Divi