Posuvník na celou šířku přichází s některými úžasnými funkcemi, včetně možnosti přidávat posuvníky s pozadím videa. Jednou z funkcí, která ho činí ještě výkonnějším, je možnost rozšířit posuvník tak, aby se zobrazoval v režimu celé obrazovky. Ukážeme vám, jak do posuvníku přidat funkce celé obrazovky.

Přidání funkce celé obrazovky do posuvného modulu aplikace divi je velmi snadno implementovatelný pomocí několika řádků CSS a JavaScriptu. Za pouhých 5 minut můžete převést posuvník na celou šířku do jezdce na celou obrazovku, který se rozbalí a zaplní celou obrazovku, podobně jako záhlaví celé obrazovky.

Implementace funkce posuvníku na celou obrazovku na Divi

Pokud jste nečetli naše návod k prezentaci rozhraní Divi, Vyzývám vás, abyste to udělali.

Krok 1: Přidejte posuvník se snímky v režimu plné šířky

Použijte " divi Builder »Přidat sekci« plná šířka »A klikněte na«  Vložte modul ".

Přidejte plnou šířkou modulu.

Přidání modulu jezdec Divi #

V nastavení posuvníku Celá obrazovka na kartě „Vlastní CSS“ přidejte třídu CSS s názvem „ et_fullscreen_slider ".

V části „Obecná nastavení“ přidejte nový snímek.

V nastavení snímku aktualizujte v části Obecná nastavení následující položky:

• Sekce: [zadejte své téma]
• Tlačítko Text: [zadejte text tlačítka]
• URL Button: [zadejte tlačítko URL]
• Obrázek na pozadí: [přidání obrázku na pozadí] (Používám obrázek z unsplash.com)

Tento krok opakujte pro tolik snímků, kolik chcete přidat.

Po dokončení klikněte na „ Uložit a ukončit ".

Jak přidat vlastní CSS a JavaScript

Na ovládacím panelu WordPress přejděte na „ Divi → Možnosti motivu A v části „Obecná nastavení“ zadejte do textového pole Vlastní CSS následující 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é;! }

klikněte na další kartu a přidejte následující javascript do textového pole s názvem „ Přidejte 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čně

Nyní máte k dispozici posuvník režimu celé obrazovky webové stránky. Použijte jej k vytvoření efektivních posuvníků v plné šířce pro většinu prohlížečů.

Pokud máte nějaké dotazy, neváhejte se jich zeptat.

[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”]STÁHNOUT TÉMA DIVI [/vcex_button][/vc_column=][vc_column /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”]STAŽTE SI TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ostatní výukové programy Divi

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produkt Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami Divi
• Jak přizpůsobit mřížky blogu s Divi
• Jak používat role Divi editor na WordPress
• Jak vytvořit posuvník Divi na celé obrazovce
• Jak změnit barvu nabídek mezi stránkami Divi
• Funkce, které pravděpodobně nevíte o Divi
• Jak používat Divi Builder na WordPress
• Jak používat modul posunu videa Divi
• Jak používat modul Divi Builder Flip
• Jak přidat zkušební modul na Divi Builder
• Jak používat textový modul Divi
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele Divi
• Jak používat modul Divi Social Media
• Jak používat modul obchodu na téma WordPress Divi
• Jak používat modul bočního panelu Divi
• Jak používat modul tabulky ceny Divi
• Jak používat titulní modul publikací Divi
• Jak přidat video modul Divi
• Jak používat navigační modul článku
• Jak používat vyhledávací modul Divi
• Jak používat modul peněženky Divi
• Jak používat modul osob na nástroji Divi Builder
• Jak používat modul peněz s filtrem Divi
• Jak používat posuvný modul s plnou šířkou
• Jak používat modul obrazu Divi Builder
• Jak používat navigační modul plné šířky nástroje Divi Builder
• Jak používat modul galerie obrázků
• Jak používat modul karty Divi Builder Full-Width Card
• Jak používat portálový modul Divi s plnou šířkou
• Jak používat modul záhlaví Divi s plnou šířkou
• Jak používat počítací modul Divi
• Jak používat posuvník článků v Divi Builderu
• Jak používat modul Divi Email Optin