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
ahoj a ďakujem za tento návod! Nemôžem nájsť kód js a css, ktorý by som tu vložil do posúvača
Dobrý deň, skvelý návod.
Na druhej strane sa to na iphone nezobrazuje na celú obrazovku, napríklad naklonením iphonu sa posúvač z času na čas zobrazí na celej obrazovke, ale nie stále…. akoby to nereagovalo, mali by ste nejaký nápad na vyriešenie tohto malého problému?
Vopred ďakujem,
S pozdravom,
Dobrý deň,
Pokúste sa deaktivovať všetky ostatné doplnky, tiež skontrolujte, či sú verzie WordPress a Divi aktuálne.
Dobré popoludnie, ako môžem prispôsobiť veľkosť snímky tak, aby zodpovedala veľkosti obrázka bannera, aby som nemohol obrázok orezať?
Dobrý deň,
Nerozumiem tejto otázke.
Dobrý deň,
Ďakujem za tento článok. Čítal som, že nie je nevyhnutne potrebné inštalovať detskú tému s Divi, pokiaľ príliš neupravujeme CSS.
Stále je tu malé prispôsobenie ...
Odporúčate teda pred použitím svojho super tutoriálu detskú tému?
Vopred ďakujem za všetky vaše dobré rady, často z nich čerpám inšpiráciu 🙂
Dobrý deň,
Nie nevyhnutne. Ak nemáte príliš veľa technických znalostí, môžete si nechať divi.
Dobrý deň, veľmi dobrý článok!
Sledoval som to, čo bolo uvedené v článku, ale môj posuvník sa na DIVI nezobrazuje na celú obrazovku.
Môžeš mi pomôcť ? Chcel by som to umiestniť na svoju domovskú stránku.
Ďakujeme vám za vašu pomoc
Dobrý deň,
Kontaktovali ste tím DIVI?
Hello Aliénor,
Mám rovnaký problém ... Našli ste riešenie?
Merci d'avance
Dobrý deň,
Staviam svoju domovskú stránku s programom Builder ... keď urobím ukážku, zobrazí sa mi stránka.
Problém je v tom, že keď svoju stránku uložím a znova otvorím, posúvač sa nezobrazí.
Mohol by mi niekto prosím pomôcť?
Dobrý deň,
Môže to byť kvôli chybe. Pokúsili ste sa kontaktovať podporu Eleganthemes?
Dobrý deň,
Ďakujeme za váš článok!
Viete, ako by som mohol zmeniť rýchlosť snímok diapozitívov?