Posuvník na celú šírku má niekoľko úžasných funkcií vrátane možnosti pridávania posúvačov s pozadím videa. Jednou z funkcií, ktorá ho robí ešte výkonnejším, je možnosť rozšíriť posúvač tak, aby sa zobrazoval v režime celej obrazovky. Ukážeme vám teda, ako do posúvača pridať funkcie na celú obrazovku.

Pridanie funkcie celej obrazovky do posuvného modulu aplikácie divi je mimoriadne ľahko implementovateľný pomocou niekoľkých riadkov CSS a JavaScript. Za iba 5 minút môžete konvertovať posuvník na celú šírku na posuvník na celú obrazovku, ktorý sa roztiahne tak, aby vyplnil celú obrazovku, podobne ako hlavičky na celú obrazovku.

Implementácia funkcie posúvania na celú obrazovku na zariadení Divi

Ak ste nečítali naše návod na predstavenie rozhrania Divi, Pozývam vás, aby ste to urobili.

Krok 1: Pridajte posúvač so snímkami v režime plnej šírky

Použite " divi Builder »Pridať časť« plná šírka »A kliknite na«  Vložte modul ".

Pridajte plnou šírkou modulu.

Pridanie modulu jazdec Divi #

V nastaveniach posúvača na celú obrazovku na karte „Vlastné CSS“ pridajte triedu CSS s názvom „ et_fullscreen_slider ".

V časti Všeobecné nastavenia pridajte novú snímku.

V nastaveniach snímky v časti Všeobecné nastavenia aktualizujte nasledujúce položky:

• Sekcia: [zadajte sekciu]
• Textové tlačidlo: [zadajte textové tlačidlo]
• Tlačidlo adresy URL: [zadajte tlačidlo URL]
• Obrázok na pozadí: [pridať obrázok na pozadí] (Používam obrázok z unsplash.com)

Tento krok opakujte pre toľko obrázkov, koľko chcete pridať.

Po dokončení kliknite na „ Uložiť a ukončiť ".

Ako pridať vlastné CSS a JavaScript

Na informačnom paneli WordPress prejdite na „ Divi → Možnosti tém A v časti „Všeobecné nastavenia“ zadajte do textového poľa Vlastné CSS nasledujúce CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min výška: 100% významný; výška: 100% dôležité ;! }

kliknite na ďalšiu kartu a do textového poľa s názvom „pridajte nasledujúci javascript“ Pridajte kód do hlavy váš 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);

konečne

Teraz máte k dispozícii posúvač režimu celej obrazovky webové stránky. Použite ho na vytvorenie efektívnych posúvačov s plnou šírkou pre väčšinu prehliadačov.

Ak máte akékoľvek otázky, neváhajte sa ich spýtať.

[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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /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”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi

• 5 webové stránky pre použitie v hoteli Divi tému
• Ako pridať text na produktoch Divi WooCommerce
• Ako zmeniť farbu ponuky medzi stránkami Divi
• Ako si prispôsobiť mriežky blogu s Divi
• Ako používať role Divi editor na WordPress
• Ako vytvoriť posuvník Divi na celej obrazovke
• Ako zmeniť farbu ponúk medzi stránkami Divi
• Funkcie, ktoré pravdepodobne neviete o Divi
• Ako používať Divi Builder na WordPress
• Ako používať modul posúvania videa Divi
• Ako používať modul Divi Builder Flip
• Ako pridať modul posudkov na Divi Builder
• Ako používať textový modul Divi
• Ako vytvoriť posúvač na Divi
• Ako upraviť rolu používateľa Divi
• Ako používať modul Divi Social Media
• Ako používať modul obchodu na tému WordPress Divi
• Ako používať modul bočného panela Divi
• Ako používať modul tabuľky cien Divi
• Ako používať titulný modul publikácií Divi
• Ako pridať video modul Divi
• Ako používať navigačný modul článku
• Ako používať vyhľadávací modul Divi
• Ako používať modul peňaľenky Divi
• Ako používať osobný modul na nástroji Divi Builder
• Ako používať modul peňaženky s filtrom Divi
• Ako používať posuvný modul s plnou šírkou
• Ako používať modul obrazu Divi Builder
• Ako používať navigačný modul v celej šírke nástroja Divi Builder
• Ako používať modul galérie obrázkov
• Ako používať modul kariet Divi Builder s plnou šírkou
• Ako používať portálový modul Divi s plnou šírkou
• Ako používať modul záhlavia Divi s plnou šírkou
• Ako používať počítací modul Divi
• Ako používať posúvač článkov v aplikácii Divi Builder
• Ako používať modul Divi Email Optin