Klizač pune širine dolazi s nekim sjajnim značajkama, uključujući mogućnost dodavanja klizača s pozadinom videozapisa. Ali, jedna značajka koja ga čini još moćnijim je mogućnost proširenja klizača za prikaz u načinu cijelog zaslona. Pokazat ćemo vam kako klizaču dodati funkcionalnost preko cijelog zaslona.

Dodatak značajke punog zaslona klizaču modula Divi je izuzetno lako implementirati s nekoliko redaka CSS-a i JavaScript-a. U samo 5 minuta klizač pune širine možete pretvoriti u klizač cijelog zaslona koji se proširuje kako bi ispunio cijeli zaslon, slično kao i zaglavlja cijelog zaslona.

Implementacija klizača na cijelom zaslonu na Divi-ju

Ako niste pročitali naš tutorial o prezentaciji Divi sučelja, Pozivam vas da to učinite.

Korak 1: Dodajte klizač s dijapozitivima u načinu pune širine

Upotrijebite " Divi Graditelj »Dodaj odjeljak« pune širine »I kliknite na«  Umetnite modul ".

Dodaj pune širine modula.

dodati modul klizač Divi #

U postavke klizača preko cijelog zaslona, ​​na kartici "Prilagođeni CSS" dodajte CSS klasu pod nazivom " et_fullscreen_slider ".

U "Opće postavke" dodajte novi slajd.

U postavkama dijapozitiva ispod Općih postavki ažurirajte sljedeće stavke:

• Kategorija: [unesite naslov]
• Tekstni gumb: [unesite vaš tekstni gumb]
• URL gumb: [upišite gumb URL-a]
• Pozadinska slika: [dodaj svoju pozadinsku sliku] (Koristim sliku s unsplash.com)

Ponovite ovaj korak za onoliko slajdova koje želite dodati.

Nakon završetka kliknite " Spremi i izađi ".

Kako dodati prilagođeni CSS i JavaScript

Na nadzornoj ploči WordPressa idite na " Divi → Opcije teme I pod "Opće postavke", u tekstualni okvir Prilagođeni CSS unesite sljedeći CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min visina: 100% značajna; visina: 100% važno;! }

kliknite sljedeću karticu i dodajte sljedeći javascript u tekstni okvir s oznakom " Dodajte kod u glavu 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);

napokon

Sada imate klizač za način rada preko cijelog zaslona web stranica. Koristite ga za stvaranje učinkovitih klizača pune širine za većinu preglednika.

Ako imate bilo kakvih pitanja, ne oklijevajte ih postaviti.

[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”]PREUZMI DIVI TEMU [/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”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]

Ostali Divi tutoriali

• 5 web stranice za restoran korištenja Divi temu
• Kako dodati tekst na proizvod Divi WooCommerce
• Kako promijeniti boju izbornika između Divi stranica
• Kako personalizirati rešetke bloga s Divi-jem
• Kako koristiti uređivač uloga Divija na WordPressu
• Kako stvoriti klizač Divi na cijelom zaslonu
• Kako promijeniti boju izbornika između Divi stranica
• Značajke koje vjerojatno ne znate o Divi-ju
• Kako koristiti Divi Builder na WordPressu
• Kako koristiti modul za pomicanje videozapisa Divi
• Kako koristiti modul Divi Builder Flip
• Kako dodati testimonijalni modul na Divi Builderu
• Kako koristiti tekstualni modul Divi
• Kako stvoriti klizač na Divi
• Kako urediti Divi korisničku ulogu
• Kako koristiti modul Divi Social Media
• Kako se koristi modul trgovine na temi WordPress Divi
• Kako koristiti modul Divi bočne trake
• Kako koristiti modul Divi Table Table
• Kako koristiti naslovni modul Divi publikacija
• Kako dodati video modul Divi
• Kako koristiti navigacijski modul članka
• Kako koristiti modul Divi pretraživanja
• Kako koristiti modul Divi wallet
• Kako koristiti modul osobe na Divi Builderu
• Kako koristiti modul lisnice pomoću Divi filtar
• Kako koristiti modul klizača pune širine
• Kako koristiti modul Divi Builder Image
• Kako koristiti navigacijski modul pune širine Divi Buildera
• Kako se koristi modul galerije slika
• Kako koristiti modul Divi Builder za cijelu širinu kartice
• Kako koristiti modul Divi punog širine portfelja
• Kako se koristi Divi zaglavni modul pune širine
• Kako koristiti modul Divi Counter
• Kako koristiti klizač članaka na Divi Builderu
• Kako koristiti modul Divi Email Optin