Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

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

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.

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

Vuoi vendere i tuoi prodotti su Internet?

Scarica WooCommerce gratis, i migliori plugin di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress e creare facilmente il tuo negozio online. Perfetto per i principianti.

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.

[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

13 azioni
quota5
Tweet1
Enregistrer7