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
ahoj a děkuji za tento návod! Nemohu zde najít kód js a css, který bych vložil do posuvníku
Dobrý den, skvělý tutoriál.
Na druhou stranu se na iPhonu nezobrazuje na celou obrazovku, například nakloněním iPhonu se posuvník čas od času zobrazí na celé obrazovce, ale ne pořád… jako by to nereagovalo, měli byste nějaký nápad vyřešit tento malý problém?
Díky předem,
S pozdravem,
Dobrý den,
Zkuste deaktivovat všechny ostatní pluginy a také zkontrolujte, zda jsou vaše verze WordPress a Divi aktuální.
Dobré odpoledne, jak mohu přizpůsobit velikost snímku tak, aby odpovídala velikosti obrázku banneru, abych nemohl obrázek oříznout?
Dobrý den,
Nerozumím této otázce.
Dobrý den,
Díky za tento článek. Přečetl jsem si, že není nutné instalovat podřízené téma s Divi, pokud příliš nezměníme CSS.
Stále existuje malé přizpůsobení ...
Doporučujete tedy před použitím svého super tutoriálu dětské téma?
Předem děkuji za všechny vaše dobré rady, často z nich čerpám inspiraci 🙂
Dobrý den,
Ne nutně. Pokud nemáte příliš technických znalostí, můžete si nechat divi.
Dobrý, velmi dobrý článek!
Sledoval jsem, co bylo naznačeno v článku, ale můj posuvník se na DIVI nezobrazí na celou obrazovku.
Můžeš mi pomoci ? Chtěl bych to uvést na svou domovskou stránku.
Děkujeme vám za vaši pomoc
Dobrý den,
Kontaktovali jste tým DIVI?
Hello Aliénor,
Mám stejný problém ... Našli jste řešení?
Merci d'avance
Dobrý den,
Stavím svou domovskou stránku pomocí nástroje Builder ... když zobrazím náhled, zobrazí se mi stránka.
Problém je v tom, že když stránku uložím a znovu ji otevřete, posuvník se nezobrazí.
Mohl by mi někdo prosím pomoci?
Dobrý den,
Může to být způsobeno chybou, pokusili jste se kontaktovat podporu Eleganthemes?
Dobrý den,
Děkujeme vám za váš článek!
Víte, jak mohu změnit rychlost rolování snímků?