Divi vám umožňuje umístit posuvníky do sekcí o celé šířce, díky čemuž se vaše posuvníky budou rozkládat po celé šířce prohlížeče. Posuvníky Divi podporují pozadí paralaxy i pozadí videa!

Jak přidat modul Diabo s plnou šířkou od firmy Divi

Než budete moci na svou stránku přidat modul posuvníku v plné šířce, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalovaný na vašem Webové stránky, všimnete si tlačítka Použijte nástroj Divi Buildernad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder a získáte přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Použijte Visual Builder když si prohlížíte své Webové stránky v popředí, pokud jste přihlášeni do svého řídicího panelu WordPress.

Jakmile jste ve Visual Builderu, můžete kliknutím na šedé tlačítko plus přidat na stránku nový modul. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek.

Vyhledejte modul posuvníku s plnou šířkou v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modů je prohledávatelný, což znamená, že můžete také napsat slovo „Slide“ a poté kliknout na Enter pro automatické vyhledání a přidání modulu posuvníku v celé šířce! Jakmile je modul přidán, budete uvítáni seznamem možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

Příklad případu: Přidání sekce Hero s posuvníkem s plnou šířkou na domovskou stránku

Posuvník na celou šířku je skvělý způsob, jak předvést více CTA nad prahovou hodnotu domovské stránky. Kombinace obrázků a obsahu může opravdu dát vaší sekci profesionální pocit, který vynikne.

V tomto příkladu přidám snímek na celou šířku, který bude sloužit jako hlavní část na domovské stránce.

Pomocí Visual Builderu přidejte sekci Fullwidth v horní části webové stránky. Poté do nové sekce vložte modul Posuvník Fullwidth. Na kartě Obsah nastavení snímku v celé šířce klikněte na + Přidat novou položku vytvořit první snímek.

V nastavení snímku prvního snímku aktualizujte následující možnosti:

Možnosti obsahu

En-hlava : [zadejte název snímku]
Text tlačítka : [zadejte text tlačítka]
Obsah : [zadejte textový obsah snímku]
Tlačítko URL : [zadejte cílovou adresu URL tlačítka Slide]
Obrázek na pozadí : [zadejte obrázek, který bude sloužit jako pozadí snímku]

Možnosti návrhu

Použijte překrytí pozadí : ANO
Barva překrytí pozadí : rgba (0,0,0,0.2) toto překrytí mírně ztmaví obrázek na pozadí, aby byl text čitelnější.

Uložte nastavení snímku

Nyní duplikujte právě vytvořený snímek a podle potřeby nový snímek aktualizujte o nový obsah. Tento postup opakujte pro všechny snímky, které chcete přidat.

To je vše. V tomto příkladu uvádím pouze dva snímky, ale výsledkem je efektivní posuvník hrdiny v celé šířce s několika výzvami k akci, který uživatele přiměje kliknout na tlačítko pro další informace. Protože toto je vaše hlavní výzva k akci Webové stránky, doporučuji spustit rozdělené testy na snímku s plnou šířkou pomocí Divi Leads a zjistit, který z nich převádí nejlépe.

Posuňte možnosti úplného obsahu

Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.

šipky

Zvolte, zda chcete zobrazit levé a pravé navigační šipky.

řízení

Zvolte, zda chcete zobrazit nebo zobrazit tlačítka kruhu / ukazatele snímků ve spodní části kurzoru.

Štítek správce

Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.

Možnosti návrhu modulu posunu

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete cokoli změnit.

Odstraňte vnitřní stín

Ve výchozím nastavení se v kurzoru zobrazuje vnitřní stín. Pokud chcete tento stín vypnout, můžete tak učinit pomocí tohoto nastavení.

Parallaxový efekt

Povolením této možnosti získáte obrázky na pozadí při posouvání pevnou pozici. Mějte na paměti, že když je toto nastavení povoleno, vaše obrázky zvětší vaše obrázky na výšku prohlížeče.

Písmo záhlaví

Písmo textu záhlaví můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma záhlaví

Zde můžete upravit velikost textu záhlaví. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu záhlaví

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu záhlaví, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Mezery v záhlaví

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu záhlaví, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku záhlaví

Výška řádku ovlivňuje mezeru mezi každým řádkem textu záhlaví. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupní pole napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Tělesná policie

Písmo těla můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma těla

Zde můžete upravit velikost textu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu těla

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup tělových písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi jednotlivými písmeny v textu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška linie těla

Výška řádku ovlivňuje mezeru mezi každým řádkem textu v těle Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Horní polstrování

Tento parametr řídí vnitřní prostor mezi horní částí modulu a textovým obsahem v modulu. Chcete-li tento prostor zvětšit nebo zmenšit, zadejte zde požadovanou hodnotu. Chcete-li například zmenšit prostor a celkovou velikost kurzoru, můžete zadat hodnotu 100 pixelů. Můžete také zadat procentuální hodnotu, například 10%, aby byla výška dynamičtější.

Spodní výplň

Tento parametr řídí vnitřní prostor mezi spodní částí modulu a textovým obsahem v modulu. Pokud chcete tento prostor zvětšit nebo zmenšit, zadejte zde požadovanou hodnotu. Chcete-li například zmenšit prostor a celkovou velikost kurzoru, můžete zadat hodnotu 100 pixelů. Můžete také zadat procentuální hodnotu, například 10%, aby byla výška dynamičtější.

Pro tlačítko použijte vlastní styly

Povolení této možnosti odhalí různá nastavení přizpůsobení tlačítek, která můžete použít ke změně vzhledu tlačítka vašeho modulu.

Velikost textu tlačítka

Toto nastavení lze použít ke zvětšení nebo zmenšení velikosti textu v tlačítku. Tlačítko se přizpůsobuje, jak se zvětšuje a zmenšuje velikost textu.

Barva textu tlačítka

Ve výchozím nastavení přijímají tlačítka barvu zvýraznění motivu, jak je definována v nástroji Customizer Theme. Tato možnost umožňuje přiřadit vlastní barvu textu tlačítku tohoto modulu. Vyberte svou vlastní barvu pomocí nástroje pro výběr barvy a změňte barvu tlačítka.

Barva pozadí tlačítka

Ve výchozím nastavení mají tlačítka průhlednou barvu pozadí. To lze změnit výběrem požadované barvy pozadí z výběru barev.

Šířka okraje tlačítka

Všechna tlačítka Divi mají ve výchozím nastavení ohraničení 2px. Toto ohraničení lze pomocí tohoto nastavení zvýšit nebo snížit. Okraje lze odstranit zadáním hodnoty 0.

Barva ohraničení tlačítek

Ve výchozím nastavení okraje tlačítek převezmou akcentní barvu motivu, jak je definována v nástroji Customizer Theme. Tato možnost umožňuje přiřadit vlastní barvu ohraničení tlačítku tohoto modulu. Vyberte svou vlastní barvu pomocí nástroje pro výběr barvy a změňte barvu ohraničení tlačítka.

Okraj okraje tlačítka

Poloměr ohraničení ovlivňuje zaoblení rohů vašich tlačítek. Ve výchozím nastavení mají tlačítka v Divi malý poloměr ohraničení, který zaobluje rohy o 3 pixely. Tuto hodnotu můžete snížit na 0, abyste vytvořili čtvercové tlačítko, nebo ji výrazně zvýšit, abyste vytvořili tlačítka s kruhovými okraji.

Rozestup písmen na tlačítku

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu tlačítka, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Button Font

Písmo textu tlačítka můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Přidejte ikonu tlačítka

Zakázáno, toto nastavení odstraní ikony z vašeho tlačítka. Ve výchozím nastavení všechna tlačítka Divi zobrazují na ukazateli ikonu šipky.

Ikona tlačítka

Pokud jsou ikony povoleny, můžete pomocí tohoto nastavení vybrat, která ikona se ve vašem tlačítku použije. Divi má na výběr různé ikony.

Tlačítko barevné ikony

Úpravou tohoto nastavení změníte barvu ikony, která se zobrazí na vašem tlačítku. Ve výchozím nastavení je barva ikony stejná jako barva textu tlačítka, ale toto nastavení vám umožňuje upravit barvu nezávisle.

Tlačítko pro umístění ikony

Můžete zvolit zobrazení ikony tlačítka vlevo nebo vpravo od tlačítka.

Zobrazit pouze ikonu při najetí myší na tlačítko

Ve výchozím nastavení se ikony tlačítek zobrazují pouze při najetí myší. Pokud chcete, aby se ikona vždy zobrazovala, vypněte toto nastavení.

Hover textové barvy tlačítka

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Podržte tlačítko barvy pozadí

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Tlačítko hranice Hover Border

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Tlačítko Hover Border Radius

Když na tlačítko najedete myší návštěvníka, použije se tato hodnota. Hodnota se změní od základní hodnoty definované v předchozím nastavení.

Tlačítko pro oddálení poznámek

Když na tlačítko najedete myší návštěvníka, použije se tato hodnota. Hodnota se změní od základní hodnoty definované v předchozím nastavení.

Rozšířené možnosti posuvný modul s plnou šířkou

Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.

Automatická animace

Chcete-li, aby se kurzor automaticky posunul, aniž by musel návštěvník kliknout na další tlačítko, povolte tuto možnost a podle potřeby nastavte rychlost otáčení níže.

Rychlost automatické animace (v ms)

Zde můžete určit, jak rychle kurzor mizí mezi jednotlivými snímky, pokud je výše povolena možnost „Automaticky animovat“. Čím vyšší číslo, tím delší pauza mezi každou rotací.

Pokračujte automatickým posunutím na ukazatel myši

Zapnutím této funkce bude umožněno pokračovat v automatickém posuvu myši.

Skrýt obsah v mobilu

Jak se velikost obrazovky v mobilních zařízeních zmenšuje, stává se nemovitost na obrazovce cennější. Někdy je dobré vypnout některé méně důležité prvky kurzoru, abyste zmenšili velikost kurzoru a zvýšili jeho čitelnost. Povolení tohoto nastavení skryje textový obsah kurzoru v mobilu.

Skrýt CTA v mobilu

Jak se velikost obrazovky v mobilních zařízeních zmenšuje, stává se nemovitost na obrazovce cennější. Někdy je dobré vypnout některé méně důležité prvky kurzoru, abyste zmenšili velikost kurzoru a zvýšili jeho čitelnost. Povolením tohoto nastavení skryjete tlačítka volání výzvy k akci na mobilním telefonu.

Zobrazit obrázek / video na mobilu

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

Možnosti obsahu pro prvky modulu s celou šířkou

Titul

Sem zadejte text názvu kurzoru.

Text tlačítka

Chcete-li zobrazit tlačítko pod obsahem snímku, zadejte text tlačítka zde. Pokud nechcete zobrazit tlačítko, ponechte toto pole prázdné.

Obsah

Sem zadejte obsah těla kurzoru. Množství textu, které zde zadáte, určí výšku vašich snímků.

Tlačítko URL

Pokud zobrazíte tlačítko, vložte do tohoto pole platnou webovou adresu URL a nastavte cílový odkaz.

Přetáhněte obrázek

Pokud přidáte obrázek, zobrazí se nalevo od textu nad pozadím snímku. Pokud nezadáte snímek, budete nalevo se středovým, pouze textovým snímkem. Vzhledem k tomu, že výška každého snímku je určena textem, bude-li váš snímek dostatečně vysoký, bude klesat pod spodní část snímku a dole bude vytvořen zarovnaný obrázek.

Upozorňujeme, že výšku snímku s obrázkem snímku lze určit pomocí vyššího snímku v posuvníku. Pokud chcete obrázek zarovnat dole, ujistěte se, že je snímek dostatečně velký, aby se vešel. Z důvodu čitelnosti se obrázky snímků zobrazují pouze v posuvnících sloupců, sloupců nebo 1 sloupců. Podobně se snímky snímků nebudou zobrazovat na šířkách prohlížeče menších než 768 pixelů. Šířky snímků jsou definovány níže. Doporučujeme, aby vaše snímky byly alespoň stejně široké.

Video snímek

Pokud přidáte video ze snímku, zobrazí se nalevo od textu snímku nad pozadím snímku. Pokud nezadáte snímek videa, budete nalevo se středovým, pouze textovým snímkem. Protože výška každého snímku je určena textem, bude-li váš snímek dostatečně vysoký, bude klesat pod spodní část snímku a dole bude vytvořen zarovnaný obrázek.

Pozastavit video

Povolit pozastavení videa ostatními hráči, když začnou hrát

Obrázek na pozadí

Pokud je nastaven, bude tento obrázek použit jako pozadí pro tento modul. Chcete-li odstranit obrázek na pozadí, jednoduše odeberte adresu URL z pole nastavení.

Výška snímku je určena množstvím textu, který přidáte. Pokud máte více snímků, jezdec vezme výšku nejvyššího snímku.

Šířka kurzoru je určena šířkou prohlížeče. Na základě standardních velikostí obrazovky doporučujeme, aby vaše obrázky byly alespoň 1280 768 x XNUMX pixelů.

Pozice obrázku na pozadí

Ve výchozím nastavení se obrázky na pozadí zobrazují ve středu snímku. Toto nastavení můžete použít ke změně umístění nahoře, dole, vlevo, vpravo nebo v kterémkoli ze čtyř rohů snímku.

Velikost obrázku na pozadí

Ve výchozím nastavení se obrázky na pozadí proporcionálně zvětší, aby se zajistilo, že vyplní celý snímek. Tuto možnost však můžete použít ke změně výchozího chování. „Pokrytí“ je výchozí chování, které změní velikost obrázku tak, aby pokryl celou oblast snímku. Možnost „Přizpůsobit“ také vynutí obrázek tak, aby pokryl celou oblast, vynutí však výšku a šířku obrázku tak, aby odpovídaly výšce a šířce kurzoru. To může mít za následek zkreslený obraz, ale zabráníte jeho oříznutí. „Skutečná velikost“ nezmění velikost obrázku a zobrazí jej v původní velikosti.

Barva pozadí

Pokud chcete pro snímek použít pouze jednofarebné pozadí, použijte pro výběr barvy pozadí výběr barvy.

Video na pozadí MP4

Všechna videa by měla být stažena v obou formátech .MP4 .WEBM, aby byla zajištěna maximální kompatibilita ve všech prohlížečích. Stáhněte si verzi .MP4 zde. Důležitá poznámka: Pozadí videa jsou z mobilních zařízení deaktivována. Místo toho bude použit váš obrázek bkacground. Z tohoto důvodu byste měli nastavit obrázek na pozadí i video na pozadí, abyste zajistili lepší výsledky.

Video na pozadí WEBM

Všechna videa by měla být stažena v obou formátech .MP4 .WEBM, aby byla zajištěna maximální kompatibilita ve všech prohlížečích. Stáhněte si verze .WEBM zde. Důležitá poznámka: Pozadí videa jsou z mobilních zařízení deaktivována. Místo toho bude použit váš obrázek bkacground. Z tohoto důvodu byste měli nastavit obrázek na pozadí i video na pozadí, abyste zajistili lepší výsledky.

Šířka videa na pozadí

Chcete-li mít videa správnou velikost, musíte zde zadat přesnou šířku videa (v pixelech).

Video výška pozadí

Chcete-li mít videa správnou velikost, musíte zde zadat přesnou výšku videa (v pixelech).

Možnosti návrhu prvků posuvných prvků

Použijte překrytí pozadí

Je-li tato možnost povolena, přidá se vlastní barva překrytí nad obrázek pozadí a za obsah posuvníku.

Barva překryvného pozadí

Pomocí nástroje pro výběr barvy vyberte barvu pozadí.

Použijte překryvný text

Pokud je tato možnost povolena, přidá se za text kurzoru barva pozadí, aby byla čitelnější na obrázcích pozadí.

Barva překryvného textu

Pomocí nástroje pro výběr barvy vyberte barvu textového překryvu.

Poloměr překrytí hranice textu

Poloměr ohraničení ovlivňuje zaoblení rohů oblasti překrytí textu. Ve výchozím nastavení mají rohy mírně zaoblený okraj 3 pixelů. Tuto hodnotu můžete snížit na 0, abyste vytvořili obdélníkový rámeček, nebo zvýšit hodnotu, aby byly rohy ještě více zaoblené.

Vlastní barevné šipky

Když podržíte ukazatel myši nad modulem posuvníku, zobrazí se šipky, které návštěvníkovi umožní procházet jednotlivé snímky. Ve výchozím nastavení tyto šipky dědí barvu hlavního textu snímku. Pomocí tohoto nastavení však můžete pro tyto šipky definovat vlastní barvu.

Dot Nav Custom Color

V každém kurzoru se pod obsahem kurzoru objevují položky navigace po bodech. Tyto prvky umožňují uživateli navigovat kurzorem. Pomocí nástroje pro výběr barev v tomto nastavení můžete definovat vlastní barvu, která se použije pro tyto prvky.

Svislé zarovnání snímku

Toto nastavení určuje svislé zarovnání obrázku. Váš obrázek může být vycentrován svisle nebo zarovnán ve spodní části snímku.

Barva textu

Pokud je pozadí snímku tmavé, měla by být barva textu nastavena na „Světlá“. Naopak, pokud je pozadí snímku světlé, měla by být barva textu nastavena na „Tmavý“.

Záhlaví písma