A teljes szélességű csúszka néhány félelmetes funkcióval rendelkezik, beleértve a videó hátterű csúszkák hozzáadásának lehetőségét. Az egyik funkció azonban még erőteljesebbé teszi a csúszka kibővítését, hogy teljes képernyős módban jelenjen meg. Tehát megmutatjuk, hogyan adhat hozzá teljes képernyős funkcionalitást egy csúszkához.

A teljes képernyős szolgáltatás hozzáadása a csúszka modulhoz Divi rendkívül könnyen megvalósítható néhány sor CSS-sel és JavaScript-sel. Mindössze 5 perc alatt átalakíthatja teljes szélességű csúszkáját teljes képernyős csúszkává, amely kibővül, hogy kitöltse az egész képernyőt, hasonlóan a teljes képernyős fejlécekhez.

A teljes képernyős csúszka funkció megvalósítása a Divi-n

Ha még nem olvasta el a mi oldalunkat bemutató a Divi felület bemutatásáról, Felkérem Önt, hogy tegye meg.

1 lépés: Adjon hozzá egy csúszkát diákkal teljes szélességű módban

Használja a " Divi Builder »Szakasz hozzáadása« teljes szélességű »És kattintson a«  Helyezzen be egy modult ".

Add a teljes szélességű modult.

hozzá egy modult csúszka Divi #

A Teljes képernyős csúszka beállításai "Egyéni CSS" lapján adjon hozzá egy "CSS osztályt" et_fullscreen_slider ".

Az "Általános beállítások" részben adjon hozzá egy új diát.

A dia beállításai alatt az Általános beállítások alatt frissítse a következő elemeket:

• Szekció: [adja meg a szakaszt]
• Szöveg gomb: [írja be a szöveges gombot]
• URL gomb: [adja meg az URL-gombját]
• Háttérkép: [adja hozzá háttérképét] (Egy képet használok az unsplash.com webhelyről)

Ismételje meg ezt a lépést annyi diának, amennyit hozzáadni szeretne.

Ha kész, kattintson a " Mentés és kilépés ".

Egyéni CSS és JavaScript hozzáadása

A WordPress irányítópultján ugorjon a " Divi → Témabeállítások Az "Általános beállítások" alatt írja be a következő CSS-t az Egyéni CSS mezőbe:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-magasság: 100% szignifikáns; magasság: 100%! important; }

kattintson a következő fülre, és adja hozzá a következő javascriptet a "" mezőbe Adja hozzá a kódot a fejhez a blogod "

(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);

végül

Most már van egy teljes képernyős mód csúszkája weboldal. Használja hatékony, teljes szélességű csúszkák létrehozására a legtöbb böngészőhöz.

Ha bármilyen kérdése van, ne habozzon feltenni őket.

[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”]DIVI TÉMA LETÖLTÉSE [/vcex_button][/vc_column][vc_colum /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LETÖLTÉS TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Egyéb Divi oktatóanyagok

• 5 weboldalak éttermi felhasználásra Divi téma
• Hogyan lehet szöveget hozzáadni a Divi WooCommerce termékhez?
• Hogyan változtathatja meg a menü színét a Divi oldalak között
• Hogyan lehet személyre szabni egy blog rácsát a Divi-vel
• Hogyan kell használni a szerepe Divi szerkesztő WordPress
• Hogyan készítsünk teljes képernyős Divi csúszkát?
• Hogyan változtathatja meg a menük színét a Divi oldalak között
• Funkciók, amelyeket valószínűleg nem ismer a Divi-ről
• A Divi Builder használata a WordPress-en
• Hogyan használjuk a Divi video scrolling modult
• A Divi Builder Flip modul használatának módja
• Hogyan adhatunk hozzá egy beszámolót a Divi Builderhez
• A Divi szövegmodul használata
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• A Divi felhasználói szerepkör szerkesztése
• A Divi Social Media használata
• Hogyan lehet használni az üzlet modult a WordPress Divi témában?
• A Divi oldalsáv moduljának használata
• A Divi áratábla modul használatának módja
• A Divi kiadványok címmoduljának használata
• Hogyan adhatunk hozzá egy Divi video modult
• A cikk navigációs moduljának használata
• A Divi keresőmodul használata
• A Divi pénztárca moduljának használata
• A személyi modul használata a Divi Builder-en
• A pénztárca moduljának használata a Divi szűrővel
• A teljes szélességű csúszka modul használata
• A Divi Builder képmodul használata
• A Divi Builder teljes szélességű navigációs moduljának használata
• A képgaléria modul használata
• A Divi Builder teljes szélességű kártya moduljának használata
• A Divi teljes szélességű portfólió moduljának használata
• A Divi teljes szélességű fejléc moduljának használata
• A Divi számláló modul használata
• Hogyan lehet használni a Divi Builder cikkcsúszkáját?
• A Divi Email Optin modul használata