Divi: Jak vytvořit karty s efektem hoveru z čar

Divi: Jak vytvořit karty s efektem hoveru z čar

Chcete vytvořit karty s efektem hover z čar pomocí Divi?

Karty jsou rozhodně užitečné pro zpřístupnění důležitých informací ve stručné oblasti vašeho webu. To snižuje potřebu pro uživatele procházet obsahem dlouhé stránky. Modul Divi's tabs se snadno používá a je skvělý pro procházení jednoduchého obsahu jediným kliknutím.

Ale v tomto tutoriálu vám ukážeme, jak převést celé řádky Divi na karty, které se zobrazí po najetí myší. 

Ukážeme vám také, jak vytvořit vodorovné a svislé karty. Tím se odemkne síla Divi pro vytváření úplných rozvržení s více moduly pro každou oblast obsahu karty. 

Nejsou potřeba žádné pluginy!

Začněme.

přehled

Zde je přehled karet, které v tomto tutoriálu společně vytvoříme.

Stáhnout DIVI hned!!!

Vytvořte novou stránku pomocí Divi Builder

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

Divi čáry převedené na tabulátory

Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

Divi čáry převedené na tabulátory

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Vytváření vodorovných záložek s přechodem pomocí „řádků Divi“

V přítomné výchozí sekci přidejte řádek se dvěma sloupci.

Linka pozadí, pole výplň a stín

Než přidáme naše moduly, nejprve si trochu přizpůsobíme nastavení řádků. Otevřete Nastavení linky a aktualizujte následující:

  • Barva levého přechodu: #284f91
  • Barva pravého přechodu: #4646c4
  • Výplň: 50 pixelů (nahoře a dole), 50 pixelů (vlevo a vpravo)
  • Box Shadow: viz snímek obrazovky
  • Barva stínu krabice: rgba (70,70,196,0.66)

Přidejte obsah do řádku

Nyní do našeho řádku přidáme zástupný obsah. Do sloupce 1 přidejte obrázek podle svého výběru pomocí modulu Obrázek. Zde jsme použili obrázek z balíčku rozložení « Designový balíček rozvržení konference« .

V pravém sloupci přidejte modul Výzva k akci a aktualizujte následující:

  • Adresa URL odkazu tlačítka: # (prozatím jen pro zobrazení tlačítka)
  • Použít barvu pozadí: NE
  • Zarovnání textu: vlevo
  • Písmo názvu : Lato
  • Velikost textu nadpisu: 60px (počítač), 50px (telefon)

Vytvoření záložky

Chcete-li vytvořit skutečnou kartu, na kterou uživatelé umístí ukazatel myši, aby se zobrazil obsah daného řádku, musíme vytvořit modul Text a umístit jej vpravo nahoře pomocí nějakého vlastního CSS.

Pokračujte a přidejte nový textový modul pod obrázek ve sloupci 1 a aktualizujte následující:

  • Text: "Tab 1"
  • Pozadí: #284f91 (to by mělo odpovídat barvě levého přechodu čáry)
  • Zarovnání textu: na střed
  • Barva textu: #ffffff
  • Šířka: 100px
  • Výška: 50px
  • Okraj: -100px (nahoře), -50px (vlevo)
  • Výplň: 14px (nahoře)

Nakonec přidejte následující vlastní css do hlavního prvku, abyste mu dali absolutní pozici v horní části řádku.

position: absolute !important;
top: 0;

Výška a rozteč sekce

Prozatím otevřete nastavení sekce a aktualizujte následující:

  • Minimální výška: 500 pixelů (počítač), 900 pixelů (tablet), 750 pixelů (telefon)
  • Okraj: 100 pixelů (nahoře a dole)
  • Odsazení: 0px (nahoře a dole)

Vytvoření druhého řádku

Chcete-li vytvořit druhý řádek, duplikujte řádek, který jste vytvořili dříve. Přesuňte textový modul do sloupce 1 a obrázek do sloupce 2. Poté aktualizujte obrázek novým. To vám pomůže získat představu o tom, jak vypadá různý obsah na každé kartě.

Poté otevřete nastavení modulu Text použitý k vytvoření záložky ve sloupci 1 a přesuňte záložku doprava tak, že tam, kde tento řádek překrývá řádek výše, uvidíte záložku přímo napravo od záložky prvního řádku.

  • Okraj: 50 pixelů (vlevo)

Přidán efekt hoveru

Otevřete nastavení řádku a přidejte následující filtr:

  • Neprůhlednost: 70 % (výchozí), 100 % (nájezd)

Poté přidejte dobu trvání přechodu a křivku rychlosti pro efekt přechodu filtru krytí.

  • Doba přechodu: 500 ms
  • Křivka rychlosti přechodu: Lineární

Vytvoření třetí záložky

Nyní můžeme přidat naši poslední kartu. Chcete-li to provést, zkopírujte druhý řádek, který jste právě vytvořili. Potom přesuňte textový modul do sloupce 1 a obrázek do sloupce 2. A aktualizujte modul obrázku novým obrázkem.

Aktualizujte nastavení čáry novým gradientem pozadí.

  • Barva přechodu vlevo na pozadí: #333333
  • Barva přechodu pravého pozadí: #4646c4

Poté otevřete nastavení modulu Text použité k vytvoření karty ve sloupci 1 a aktualizujte barvu a okraj.

  • Pozadí: #333333
  • Okraj: 150 pixelů (vlevo)

Zde je návod, jak by vaše stránka měla vypadat, než umístíme naše řádky tak, aby se překrývaly.

Překrývající se linie s absolutním umístěním

Abychom překryli naše linie, musíme použít absolutní umístění. Nejprve aktualizujte výšku všech tří řádků na 100 %.

  • Výška: 100 %

Poté přidejte následující vlastní CSS do hlavního prvku všech tří řádků:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Takto aktuálně vypadají naše karty.

Změna pořadí řádků při umístění kurzoru pomocí Z indexu

V tuto chvíli jste si možná všimli, že třetí řádek/záložka je v popředí. Potřebujeme tedy přeskupit řádky pomocí Z Index tak, aby se první karta zobrazovala jako první, dokud nenajedete na jinou kartu.

Čtěte také: Jak vytvořit vlastní překryvné obrázky v Divi

Chcete-li to provést, otevřete nastavení prvního řádku a aktualizujte z-index následovně:

Z-index: 10

Poté umístěte kurzor na Z index dalších dvou řádků.

Z-Index: 11 (přejetí myší)

Hotovo ! Pojďme se podívat na konečný výsledek.

Konečný výsledek

Stáhnout DIVI hned!!!

Vytváření vertikálních záložek

Pokud chcete do řádků přidat svislé tabulátory, postupujte takto.

Pokračujte a duplikujte sekci obsahující karty s přechodem, které jsme právě vytvořili, abyste měli nový design, se kterým můžete pracovat.

Poté otevřete nastavení sekce a aktualizujte následující:

  • Polstrování: 10 % (vlevo a vpravo)

Aktualizujte následující parametry pro všechny tři řádky duplicitní sekce následujícím způsobem:

  • Šířka: 70 % (počítač), 70 % (tablet), 80 % (telefon)
  • Maximální šířka: 980 pixelů

Dále aktualizujte směr přechodu na 90 stupňů pro všechny tři čáry.

  • Směr gradientu: 90 stupňů

Nyní je čas umístit naše karty modulu Text nalevo od našich řádků, abyste získali požadované vertikální karty.

Viz také: Jak vytvořit nabídku rotujícího kola na Hover v Divi

Otevřete nastavení karty textového modulu na prvním řádku a aktualizujte následující:

  • Okraj (počítač): -50 pixelů (nahoře), -150 pixelů (vlevo)

Dále otevřete kartu Nastavení modulu Text řádku 2 a aktualizujte následující:

  • Okraj (počítač): 0 pixelů (nahoře), -150 pixelů (vlevo)

A pro poslední kartu ve třetím řádku aktualizujte následující:

  • Okraj (počítač): 50 pixelů nahoře, -150 pixelů vlevo
divi

Konečný výsledek

Nyní se podívejme na konečný výsledek.

Stáhnout DIVI hned!!!

závěr

S trochou kreativity a sílou Divi můžete vytvořit pěkné vlastní karty pomocí Divi linek. Existují určitá omezení toho, co můžete zobrazit. 

Například s touto konfigurací musí mít všechny řádky stejnou výšku jako sekce. Ale abyste nemuseli používat plugin, je to skvělé řešení. 

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...

Divi: Jak vytvořit přilnavou a rozbalitelnou nabídku pro najetí myší

Divi: Jak vytvořit přilnavou a rozbalitelnou nabídku pro najetí myší

Chcete být kreativní vytvořením rozšiřitelného lepivého menu při najetí myší s Divi?

V tomto tutoriálu vám ukážeme, jak vytvořit rozšiřitelné lepivé menu při umístění kurzoru myši od Divi's Mechanic Layout Pack . 

Postaráme se o dva různé vzorové návrhy, které můžete znovu vytvořit od začátku a použít je na jakýkoli typ webu, který vytvoříte! 

Nabídka se zobrazí po najetí myší na plochu a aktivuje se po kliknutí na mobilních zařízeních.

Pojďme!

přehled

Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.

Příklad 1

Stolní počítač

rozšiřitelná lepivá nabídka při najetí myší pomocí Divi

Mobilní

rozšiřitelná lepivá nabídka při najetí myší pomocí Divi

Stáhnout DIVI hned!!!

Příklad 2

Stolní počítač

rozšiřitelná lepivá nabídka při najetí myší pomocí Divi

Mobilní

rozšiřitelná lepivá nabídka při najetí myší pomocí Divi

Stáhnout DIVI hned!!!

Obecné kroky

Zakázat pevnou navigaci

Přístup k možnostem motivu Divi

Začneme několika obecnými kroky. Tyto kroky jsou pro oba příklady stejné a jsou nezbytné k dosažení požadovaného výsledku.

Pokud máte v úmyslu použít rozšiřující se pevnou nabídku v dolní části stránky, možná budete chtít vynechat hlavní lištu nabídky v horní části. 

Čtěte také: Jak vytvořit vlastní překryvné obrázky v Divi

K tomu budete muset jít Divi >> Možnosti motivu z řídicího panelu WordPress

Zakázat pevnou navigaci

Tam budete muset deaktivovat "Pevný navigační panel" abyste se ujistili, že v horní části stránky nezbývá žádné místo.

  • Pevná navigační lišta: Vypnuto

Skrýt lištu hlavní nabídky na stránce

Otevřete nastavení stránky

Přejděte na stránku, na kterou chcete přidat rozbalitelnou pevnou nabídku, a otevřete nastavení stránky.

Přidejte vlastní CSS

Skryjte hlavní nabídku přidáním následujících řádků kódu CSS na stránku.

#main-header {
display: none;
}

Přidejte novou sekci na konec stránky

Bez ohledu na to, který příklad chcete znovu vytvořit, některé základní kroky zůstávají stejné. Prvním krokem je přidání běžné sekce do spodní části stránky.

vzdálenost

Otevřete nastavení sekce a změňte následující nastavení na kartě Design pod opcí Vzdálenost.

  • Výplň (nahoře a dole): 0 pixelů

Přidat nový řádek

Struktura kolony

Pokračujte přidáním nového řádku pomocí následující struktury sloupců:

dimenzování

Bez přidání jakýchkoli modulů otevřete nastavení linky a změňte následující nastavení na kartě Design pod opcí Rozměry

  • Použít vlastní šířku okapu: ANO
  • Šířka žlabu: 1
  • Šířka: 100 %
  • Max. šířka: 100 %

vzdálenost

Poté odstraňte všechna výchozí horní a spodní vycpávka pod možností Vzdálenost.

  • Výplň (nahoře a dole): 0 pixelů

Hlavní prvek

Umožňujeme, aby se celý řádek držel na konci naší stránky přidáním dvou jednoduchých řádků kódu CSS do prvku hlavního řádku.

bottom: 0px;
position: fixed;

Z-index

A zajistíme, že řádek (a modul Text, který přidáme v nadcházejících krocích) zůstane nad veškerým obsahem na stránce zvýšením indexu Z, možnosti Rozbalovací Pozice.

  • Z-index: 99

Přidejte modul kódu do sloupce

Přidejte kód CSS mezi značky stylu

Poslední částí obecných kroků je přidání modulu Code do nového řádku. CSS kód, který přidáme do tohoto modulu Code, nám pomůže dosáhnout efektu odhalení při najetí myší. 

Viz také: Jak vytvořit nabídku rotujícího kola na Hover v Divi

Do modulu vložte následující řádky kódu CSS:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Příklad designu #1

Přidejte do sloupce modul Text

Přidat obsah

Nyní, když jsme prošli všemi kroky, můžeme se začít soustředit na dva různé příklady designu, počínaje prvním! 

Přidejte do sloupce řádku modul Text. V oblasti obsahu používáme k zobrazení textu styl odstavce '≡Menu'

Všechny položky nabídky pak umístíme do neuspořádaného seznamu. Přidáme také odkaz na každý z nadpisů stránek jednotlivě.

Výchozí barva pozadí

Přejděte do nastavení pozadí modulu a změňte barvu pozadí.

  • Pozadí: #ffffff

Barva pozadí při najetí myší

Změňte tuto barvu pozadí při najetí myší.

  • Pozadí (Hover): rgba (255,255,255,0.83)

Přechodové pozadí

A také přidat výchozí pozadí s přechodem.

  • Barva vlevo: rgba (255,255,255,0)
  • Správná barva: #ffffff
  • Pozice vpravo: 60 %

Výchozí nastavení textu

Pokračujte přechodem na kartu Design a změna nastavení textu.

  • Písmo textu: Khand
  • Tloušťka písma: Tučné
  • Barva textu: #021827
  • Velikost textu: 3vh
  • Orientace: Střed

Nastavení textového kurzoru myši

Změňte některá nastavení textu při umístění kurzoru.

  • Barva textu (Hover: rgba(255,255,255,0)
  • Velikost textu (přejetí myší): 0vh

Nastavení textu odkazu

Dále přejděte do nastavení textu odkazu a změňte barvu textu odkazu.

  • Barva textu odkazu: #000000

Výchozí nastavení seznamu (počítač)

Přepněte na výchozí nastavení textu seznamu a upravte jej podle potřeby. Ujistěte se, že pro velikost textu ve výchozím stavu používáte '0px'.

  • Neuspořádaný seznam Písmo: Khand
  • Seznam Styl písma: TT
  • Zarovnání textu seznamu: na střed
  • Barva neuspořádaného textu: rgba (255,255,255,0)
  • Velikost textu neuspořádaného seznamu: 0 px
  • Hmotnost textu seznamu: 0 em
  • Pozice stylu neuspořádaného seznamu: Uvnitř

Nastavení seznamu ukazatelů myši

Poté změňte některé hodnoty při umístění kurzoru, aby se položky nabídky mohly zobrazovat.

  • Barva textu seznamu (umístění kurzoru): #000000
  • Velikost textu neuspořádaného seznamu (umístění myši): 2vh
  • Výška textu neuspořádaného seznamu (přejetí myší): 2,1 em

Výchozí mezera (počítač)

Poté přejděte na nastavení mezer (volba Vzdálenost) a dát tvar modulu Text.

  • Okraj (levý a pravý): 45vw (stolní počítač), 39vw (tablet), 33vw (telefon)
  • Polstrování (nahoře a dole): 2vw (stolní počítač), 4vw (tablet), 6vw (telefon)

Hover mezery

Upravte tyto stejné hodnoty při najetí myší.

  • Okraj (levý a pravý): 14vw
  • Polstrování (nahoře a dole): 8vw

Výchozí ohraničení (počítač)

Přejděte do nastavení ohraničení a ujistěte se, že každý ze zaoblených rohů má hodnotu '0px'.

Hranice při vznášení

Povolte možnosti umístění kurzoru na zaoblené rohy a změňte hodnoty vlevo nahoře a vpravo nahoře.

  • Vlevo nahoře: 50vw
  • Vpravo nahoře: 50vw

Stínová krabička

Pokračujte tím, že modulu dáte hloubku pomocí stínu rámečku. Tím zajistíte, že menu nezůstane na stránce bez povšimnutí.

  • Síla rozostření rámečků: 1000 pixelů
  • Barva stínu: rgba (0,0,0,0.68)

CSS třídy

Do modulu také přidáváme třídu CSS.

  • CSS Třída: dt-menu

Přechody

Nakonec snižte dobu trvání přechodu v nastavení přechodů.

  • Délka přechodu: 100 ms

Příklad designu #2

Přidejte do sloupce modul Text

Přidat obsah

Pojďme k druhému příkladu! Zde opět doplníme '≡Menu' pomocí stylu odstavcového textu a položek nabídky pomocí neuspořádaného seznamu. Přidáme také odkaz na každou z položek nabídky jednotlivě.

Výchozí barva pozadí (počítač)

Přejděte do nastavení pozadí a změňte barvu pozadí.

  • Pozadí: #ffffff

Barva pozadí při najetí myší

Při najetí myší změňte barvu pozadí.

  • Pozadí (umístění myši): #f71535

Výchozí nastavení textu (počítač)

Poté přejděte na kartu Design a provést nějaké změny ve vzhledu textu.

  • Písmo textu: Khand
  • Tloušťka písma: Tučné
  • Barva textu: #021827
  • Velikost textu: 3vh

Nastavení textu kurzorem

Změňte tato nastavení při umístění kurzoru myši.

  • Barva textu (umístění myši): rgba (255,255,255,0)
  • Velikost textu (přejetí myší): 0vh

Nastavení textu odkazu

Přejděte do nastavení textu a změňte barvu textu odkazu.

  • Barva textu odkazu: #ffffff

Výchozí nastavení textu seznamu

Změňte také nastavení návrhu neuspořádaných položek seznamu.

  • Neuspořádaný seznam Písmo: Khand
  • Neuspořádaný seznam Styl písma: TT
  • Zarovnání textu seznamu: na střed
  • Barva textu neuspořádaného seznamu: rgba(255,255,255,0)
  • Velikost textu seznamu: 0px
  • Výška řádku neuspořádaného seznamu: 0 em
  • Pozice stylu neuspořádaného seznamu: Uvnitř

Nastavení seznamu ukazatelů myši

A změňte některé z těchto hodnot při najetí myší.

  • Barva textu neuspořádaného seznamu: #ffffff
  • Velikost textu seznamu: 2vh
  • Výška řádku neuspořádaného seznamu: 2,1 em

Výchozí mezera (počítač)

Poté přejděte do nastavení rozteče a dejte modulu prostor.

  • Marže (vpravo): 88 vw (stolní počítač a tablet), 71 vw (telefon)
  • Výplň (horní): 6 vw (stolní počítač), 10 vw (tablet), 18 vw (telefon)
  • Polstrování (dole): 4 vw (stolní počítač), 10 vw (tablet), 12 vw (telefon)
  • Levé polstrování: 1vw

Hover mezery

Změňte hodnoty při najetí myší.

  • Marže (vpravo): 59vw
  • Polstrování: (nahoře) 13vw, (dole) 8vw, (vlevo)1vw, (pravé)13vw
lepivé rozšíření nabídky

Hranice

A abychom vytvořili tento čtvrtkruhový design, změníme pravý horní okraj v nastavení ohraničení.

  • Vpravo nahoře: 50vw

Stínová krabička

Přidáme také rámeček stínu pro vytvoření hloubky na stránce.

  • Síla rozostření rámečku: 1000 pixelů
  • Barva stínu: rgba (0,0,0,0.68)

CSS třídy

Dále do záložky přidáme třídu CSS pokročilý.

  • CSS Třída: dt-menu

Přechody

A zkraťte dobu trvání přechodu na kartě pokročilý vytvořit rychlý přechod.

  • Délka přechodu: 100 ms

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Příklad č. 1

Kancelář

Rozšíření rychlého menu

Mobilní

Rozšíření rychlého menu

Stáhnout DIVI hned!!!

Příklad č. 2

Stolní počítač

Mobilní

Stáhnout DIVI hned!!!

závěr

V tomto článku jsme vám ukázali, jak vytvořit rozšiřitelné lepivé menu pomocí z Divi Mechanic Layout Pack. Pokryli jsme dva různé vzorové návrhy, které můžete upravit a použít na jakýkoli typ webu, který vytvoříte!

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...

Divi: Jak vytvořit lepkavou masku na pozadí

Divi: Jak vytvořit lepkavou masku na pozadí

Chtěli byste dát svému webu další rozměr pomocí masky na pozadí Divi Sticky?

Lepivé možnosti Divi vám umožní vytvořit spoustu různých designů pro vaše webové stránky. Dnešní tutoriál přidává seznam věcí, které můžete dělat. Doufejme, že to pomůže rozproudit vaši kreativitu. 

Ukážeme vám, jak vytvořit lepivou masku na pozadí.

Tento tutoriál kombinuje lepivé možnosti Divi s režimy prolnutí filtrů. 

přehled

Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.

Kancelář

Divi Sticky maska ​​na pozadí

Mobilní

Divi Sticky maska ​​na pozadí

Vytvořte design v Divi

Přidejte novou sekci

Obrázek na pozadí

Začněte přidáním nové sekce na stránku, na které pracujete. 

  • Nahrajte obrázek na pozadí dle vlastního výběru.
  • Velikost obrázku na pozadí: obálka
divi

vzdálenost

Přepněte na kartu Návrh sekce a odeberte výchozí nastavení mezer níže:

  • Výplň (nahoře a dole): 0 pixelů

Přeteky

Poté skryjte přetečení sekce v záložce pokročilý.

  • Horizontální přetečení: Skryté
  • Vertikální přetečení: Skryté

Přidejte řádek #1

Struktura kolony

Pokračujte přidáním nového řádku pomocí následující struktury sloupců:

dimenzování

Aniž byste přidávali žádné moduly, otevřete nastavení čar a podle toho změňte nastavení velikosti:

  • Šířka: 100 %
  • Max. šířka: 100 %

vzdálenost

Odstraňte také všechny výchozí okraje.

  • Výplň (nahoře a dole): 0 pixelů

filtry

K této řadě přidáváme také režim prolnutí. Tento režim prolnutí nám pomůže vytvořit masku později v tutoriálu.

  • Režim prolnutí: Obrazovka

Z-index

Abychom zajistili, že tento řádek zůstane pod druhým řádkem, který přidáme do sekce, změníme z-index na kartě pokročilý.

  • Index Z: 9

Parametry sloupce

Dále otevřeme nastavení sloupců.

Barva pozadí

Použijeme zcela bílou barvu pozadí.

  • Barva pozadí: #ffffff

Hlavní prvek CSS

K hlavnímu prvku na kartě také přidáme hodnotu výšky pokročilý.

height: 100vh;

Přidejte na řádek modul "Text".

Ponechte oblast obsahu prázdnou

Jakmile budete s nastavením řádků hotovi, přidejte do jeho sloupce modul Text. 

Ponechte oblast obsahu prázdnou. Místo toho používáme tento modul k vytvoření tvaru, který odhaluje část obrázku na pozadí sekce.

Barva pozadí

Pro tento modul použijeme tmavší barvu pozadí.

  • Barva pozadí: #0b3835

dimenzování

Dále se dostaneme na kartu Design a upravte parametry velikosti následovně:

  • Šířka:
    • Desktop: 20vw
    • Tablet a telefon: 70 vw
  • Výška:
    • Stolní počítač: 30Vh
    • Tablet a telefon: 10Vh

vzdálenost

Přidáme také horní okraj.

  • Marže (nahoře): 3vh

okraj

A přidáme i zaoblené rohy.

  • Zaoblené rohy: 15px

Přidat řádek 2

Struktura kolony

Pokračujte přidáním dalšího řádku do sekce pomocí následující struktury sloupců:

dimenzování

Otevřete nastavení linky a proveďte následující změny v možnostech Rozměry Následující:

  • Šířka: 100 %
  • Max. šířka: 100 %

Z-index

Zvyšte také z-index řádku. To pomůže zajistit, že obsah řádku zůstane nad předchozím řádkem.

  • Z index: 12

Přidejte na řádek modul "Text".

Přidat obsah H2

Je čas přidat moduly, počínaje prvním textovým modulem obsahujícím obsah H2 dle vašeho výběru.

Nastavení textu H2

Upravte nastavení textu H2 následovně:

  • Písmo: Playfair Display
  • Zarovnání textu: Na střed
  • Barva textu: #0b3835
  • Velikost:
    • Plocha: 150 pixelů
    • Tablet a telefon: 45px
  • Výška řádku: 1,2 em

dimenzování

Dále přejděte na nastavení velikosti a použijte následující nastavení:

  • Maximální šířka: 980 pixelů
  • Modul zarovnání: Střed

vzdálenost

Zahrňte také záporný horní okraj.

Přidejte do řádku modul "Tlačítko".

Přidat obsah na tlačítko

Dalším a posledním modulem, který v tomto řádku potřebujeme, je modul Button. Přidejte obsah dle vlastního výběru.

Zarovnání tlačítek

Přepnout na kartu Design modulu a upravte zarovnání tlačítka.

  • Zarovnání tlačítek: Střed

Nastavení tlačítek

Dále přejděte do nastavení tlačítka a použijte následující styly:

  • Použít vlastní styly tlačítka: Ano
  • Velikost textu tlačítka: 15px
  • Barva textu tlačítka: #ffffff
  • Barva pozadí tlačítka: #000000
  • Šířka okraje tlačítka: 0 pixelů
  • Poloměr okraje tlačítka: 100 pixelů
  • Písmo tlačítka: Montserrat
  • Tloušťka písma tlačítka: Polotučné
  • Styl písma: TT

vzdálenost

Do nastavení mezer také přidáváme vlastní hodnoty okrajů a odsazení.

  • Marže (dole): 60vh
  • Výplň (nahoře a dole): 15px
  • Výplň (vlevo a vpravo): 40px

Použijte lepivé efekty

Otevřete řádek #1

Nyní, když jsme vytvořili základ našeho návrhu, je čas použít lepivé styly. Otevřete nastavení prvního řádku.

lepkavá spodní maska

Použijte lepivé možnosti

Přejděte na kartu pokročilý a použijte následující trvalá nastavení:

  • Sticky Position: Stick To Top
  • Spodní lepivý limit: Sekce
  • Odsazení od okolních lepivých prvků: ANO
  • Výchozí a rychlé styly přechodu: ANO

Možnosti uchycení textového modulu

Nyní, když je čára lepkavá, můžeme aplikovat styly na modul Text uvnitř čáry. Otevřete nastavení modulu.

lepkavá spodní maska

Sticky Size

Dále přejděte na nastavení velikosti a použijte následující hodnoty velikosti:

  • Šířka (Sticky): 80 vw
  • Výška (Sticky): 90vh
divi

Doba přechodu

Nakonec přejděte na kartu pokročilý a prodloužit dobu přechodu.

  • Délka přechodu: 500 ms

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Kancelář

Divi Sticky maska ​​na pozadí

Stáhnout DIVI hned!!!

Mobilní

Divi Sticky maska ​​na pozadí

Stáhnout DIVI hned!!!

závěr

V tomto článku jsme vám znovu ukázali, jak být kreativní s lepivými možnostmi Divi. 

Konkrétně jsme vám ukázali, jak zkombinovat nastavení filtru Divi a možnosti sticky.

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...

Divi: Jak vytvořit responzivní posuvník akordeonu

Divi: Jak vytvořit responzivní posuvník akordeonu

Chtěli byste vytvořit citlivý posuvník Divi akordeonu?

Posuvník akordeonu je zábavný a atraktivní způsob, jak zobrazit obsah na malém prostoru. 

Akordeonové posuvníky se obvykle skládají z několika prvků (nebo panelů) naskládaných vodorovně jako záhyby záclony. A když najedete na jeden z panelů, roztáhne se a odhalí obsah, zatímco ostatní panely harmoniky se smrští. To je místo, kde získáme efekt podobný akordeonu rozpínání a stahování.

V tomto tutoriálu vám ukážeme, jak vytvořit responzivní posuvník akordeonu v Divi pouze pomocí CSS. K tomu použijeme několik modulů Divi, které budou sloužit jako akordeonové panely. 

přehled

Zde je rychlý přehled toho, čeho v tomto tutoriálu dosáhneme.

Stáhnout DIVI hned!!!

Vytvoření nové stránky pomocí Divi Builder

Chcete-li začít, budete muset provést následující:

  • Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
citlivý akordeonový posuvník Divi
  • Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
  • poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
citlivý akordeonový posuvník Divi

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Vytvoření responzivního akordeonového slideru v Divi

Vytvoření linky

Chcete-li začít, přidejte do běžné sekce řádek s jedním sloupcem.

Poté otevřete nastavení linky a aktualizujte následující:

  • Použít vlastní šířku okapu: ANO
  • Šířka žlabu: 1
  • Šířka: 100 %
  • Maximální šířka: 800 pixelů
  • Výška: 400px (počítač); 700 pixelů (tablet a telefon)

Hodnoty šířky a maximální šířky lze změnit podle vašich potřeb. Harmonika se vejde a bude fungovat v jakékoli šířce linky.

Parametry sloupce

Nyní, když máme pro řádek definovanou výšku, otevřete nastavení sloupců a do hlavního prvku přidejte následující CSS:
Desktop

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

tableta

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

Vytvoření akordeonového panelu pomocí modulů Blurb

Harmonika může být postavena pomocí jakéhokoli typu modulu (modulů). Pokud bychom chtěli, mohli bychom použít kombinaci různých modulů, které by fungovaly jako harmonikový panel. Ale pro tento návrh použijeme moduly Blurb.

Začněte přidáním modulu Blurb na řádek.

Blurb Mod Design

Otevřete nastavení modulu prezentace a aktualizujte následující:

Zachovejte smyšlený název a obsah těla. Vždy to můžeme později změnit.

Dále aktualizujte ikonu prezentace následovně:

  • Ikona (Plocha): Ikona vodorovné šipky (viz snímek obrazovky)
  • Ikona (umístění kurzoru): (viz snímek obrazovky)
  • Ikona (tablet a telefon): (viz snímek obrazovky)

Pozadí

Poté dejte reklamě obrázek na pozadí a překryvný přechod při umístění kurzoru následovně:

  • Přidejte obrázek na pozadí široký alespoň 1000 pixelů
  • Pozice obrázku na pozadí: Střed vlevo

Poté přidejte překrytí pozadí.

Vznášet se

  • Přechod na pozadí vlevo (přejetí): #3e215b
  • Přechod na pozadí vpravo (přejetí): rgba(0,0,0,0)
  • Směr gradientu: 90 stupňů
  • Čtvercový přechod nad obrázkem pozadí: ANO

ikona

  • Barva ikony: #ffffff
  • Umístění obrázku/ikony: vpravo

Dále se přepněte na kartu Návrh a aktualizujte následující:

Název a text textu

  • Písmo názvu: Poppins
  • Tloušťka písma: polotučné
  • Barva textu nadpisu: průhledná (Desktop), #ffffff (Hover)
  • Velikost textu nadpisu: 22px
  • Barva textu těla: průhledná (počítač), #ffffff (přejetí myší)

Výška krabice a stín

Po přizpůsobení textu dejte modulu výšku 100 % a stín rámečku následovně:

  • Výška: 100 %
  • Box Shadow: Viz snímek obrazovky
  • Horizontální poloha: -12px
  • Vertikální pozice: 0px

Vlastní CSS

Aby naše akordeonové panely (nebo modul Blurb) rostly a stahovaly se se zbytkem modulů, musíme přidat vlastní CSS pro změnu velikosti modulu pomocí flex-grow. 

Protože budeme mít celkem 5 modulů, které tvoří akordeon, přidáme "flex:1" pro výchozí stav a poté jej změníme na "flex:5" ve stavu vznášení.

Na kartě Upřesnit přidejte do hlavního prvku Blurb následující vlastní CSS:

Kancelář

flex:1;
position: relative !important;
transition: flex 800ms !important;

Vznášet se

flex:5;
position: relative !important;
transition: flex 800ms !important;

Poté přidejte následující vlastní CSS do CSS obsahu Blurb:

Kancelář

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
vytvořte citlivý posuvník Divi akordeonu

tableta

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
vytvořte citlivý posuvník Divi akordeonu

Přetečení a přechod

  • Horizontální přetečení: Skryté
  • Vertikální přetečení: Skryté
  • Délka přechodu: 400 ms
  • Křivka rychlosti přechodu: Lineární
vytvořte citlivý posuvník Divi akordeonu

Velmi dobře! Jednalo se o seriózní přizpůsobení modulu Blurb. Ale dobrá zpráva je, že vše, co musíme udělat, je duplikovat je, abychom vytvořili zbývající akordeonové panely.

Duplicitní rozvržení pro více akordeonových panelů

Najeďte myší na prezentační modul a klikněte čtyřikrát na dvojitou ikonu, abyste vytvořili celkem pět akordeonových panelů (nebo modulů).

Dále aktualizujte obrázky na pozadí pro každý z nových reklam, které jste duplikovali.

vytvořte citlivý posuvník Divi akordeonu

Konečný výsledek

Nyní, když jsme prošli všemi kroky, pojďme se podívat na konečný výsledek.

Stáhnout DIVI hned!!!

závěr

Tento citlivý akordeonový posuvník má opravdu některé jedinečné prvky, díky kterým je jeho používání zábavné. Akordeonové panely se při přejetí myší plynule roztahují a smršťují bez jakýchkoli neočekávaných závad. 

A ikony prezentací se mění při umístění kurzoru myši a na mobilu, aby se zvýšilo uživatelské prostředí. Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najdete nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...

Divi: Jak vytvořit vlastní překryvné obrázky

Divi: Jak vytvořit vlastní překryvné obrázky

Chtěli byste se naučit, jak navrhovat vlastní překryvné obrázky pomocí Divi?

Překryvné obrázky jsou ve webovém designu již dlouhou dobu. Jsou skvělé pro zapojení návštěvníků tím, že odhalují další obsah a designové prvky, když najedete myší na obrázek. 

V tomto tutoriálu vám ukážeme, jak navrhnout vlastní překryvné obrázky v Divi. Tato překrytí se změní a odhalí prvky, když najedete na obrázek. 

Nejsou potřeba žádné pluginy.

Začněme!

přehled

Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.

Vytvořte novou stránku pomocí Divi Builder

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

Divi Builder

Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

Divi Builder

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Vytváření vlastních překryvných obrázků v Divi

Navrhněte sekci, řádek a sloupce

Chcete-li začít, vytvořte ve výchozí sekci řádek se třemi sloupci.

Otevřete nastavení sekce a přidejte následující barvu pozadí:

  • Pozadí: #3a0ca3

Dále otevřete nastavení sloupce 1 a aktualizujte následující:

  • CSS Třída: et-overlay-container
  • Horizontální přetečení: Skryté
  • Vertikální přetečení: Skryté

Přidat obrázek

Nyní, když jsou sekce, řádek a sloupec připraveny, přidejte nový modul Image do sloupce 1. Toto bude hlavní obrázek za našimi návrhy překrytí.

Nahrajte obrázek, který vypadá spíše jako portrét než na šířku. Ujistěte se, že je dostatečně široký, aby zabral celou šířku sloupce ve všech velikostech prohlížečů.

POZNÁMKA: Můžete použít obrázky na šířku, ale možná budete muset odpovídajícím způsobem upravit umístění překryvných prvků, aby se nepřekrývaly.

Na kartě Design, aktualizujte následující:

  • Okraj (dole): 0px

Na kartě pokročilý, přidejte následující třídu CSS:

  • Třída CSS: et-overlay-image

Přidání překryvné barvy obrázku pomocí modulu "Divider".

K vytvoření překryvné barvy obrázku použijeme modul Divider.

Nejprve přidejte pod obrázek modul Divider.

Poté umístěte oddělovač absolutně tak, aby byl umístěn nad obrázkem:

  • Pozice: Absolutní

Na kartě Obsah, aktualizujte následující:

  • Show Divider: NO
  • Barva pozadí: rgba (247,37,133,0.8)

Poté aktualizujte výšku a šířku oddělovače:

  • Šířka: 100 %
  • Výška: 100 %

Po vytvoření návrhu přidejte do rozdělovače následující třídu CSS:

  • a-překryvná-položka

POZNÁMKA: Tato třída by měla být přidána ke všem prvkům návrhu překrytí, které chcete zobrazit pouze při najetí myší. Pokud nechcete, aby byl prvek zpočátku skrytý, vynechejte ho.

Abyste měli přehled o konstrukčních prvcích/modulech, otevřete modální vrstvy a označte modul Oddělovač („Barva překrytí“).

Přidán překryvný text záhlaví

Pod modulem Oddělovač přidejte nový modul Text. To bude sloužit jako překryvný text záhlaví, který se zobrazí v horní části obrázku při umístění kurzoru.

Aktualizujte obsah názvem H2:

<h2>Coaching</h2>

Dále aktualizujte štítek textového modulu pro budoucí použití.

Na kartě Design, aktualizujte následující:

  • Zarovnání textu: Na střed
  • Barva textu: Světlá
  • Písmo: Cormorant Garamond
  • Tloušťka písma: Tučné
  • Velikost textu: 40px
  • Šířka: 100 %
  • Max. šířka: 85 %

Na kartě pokročilý, aktualizujte pozici následovně:

  • Pozice: Absolutní
  • Umístění: nahoře uprostřed
  • Vertikální posun: 10 %

POZNÁMKA: Svislé posunutí může být nutné upravit v závislosti na velikosti poměru stran obrazu. Například obrázek typu na šířku může vyžadovat menší odsazení

Dále do textového modulu přidejte následující třídy CSS:

  • Třída CSS: et-overlay-item move-down

Kromě třídy "a-překryvná-položka", přidáme další třídu "posunout dolů" abyste mohli použít vlastní CSS k mírnému posunutí záhlaví dolů při najetí myší.

Vytvoření překryvného hlavního textu

Chcete-li vytvořit překrytí hlavního textu, můžeme duplikovat modul Text použitý pro překrytí záhlaví. Před aktualizací duplicitních parametrů změňte popisek na "Překryvné tělo".

Otevřete nastavení textu nového modulu Text a aktualizujte obsah těla pomocí několika vět odstavcového textu.

Na kartě pokročilý, změňte absolutní umístění modulu na střed.

Protože nechceme, aby se to přesunulo při umístění kurzoru (pouze se objevilo), aktualizujte třídu CSS tak, aby zahrnovala pouze následující:

  • CSS Třída: et-overlay-item

Vytvoření překryvného tlačítka

Poslední překryvnou vrstvou na tomto obrázku bude tlačítko. Chcete-li vytvořit tlačítko, přidejte nový modul Button pod druhý modul Text.

Před úpravou návrhu aktualizujte polohu tlačítka následovně:

  • Pozice: absolutní
  • Vertikální posun: 10 %

Nyní by tlačítko mělo být ve středu spodní části obrázku.

Na kartě pokročilý, aktualizujte třídu CSS a přidejte vlastní fragment CSS do hlavního prvku následovně:

  • Třída CSS: et-overlay-item move-up
  • Hlavní prvek CSS:
min-width: 15em;

Všimněte si, že k tlačítku byla přidána další třída, která jej při najetí myší posune mírně nahoru. To má doplnit pohyb textu záhlaví dolů při umístění kurzoru myši.

Dále aktualizujte následující nastavení návrhu:

  • Zarovnání tlačítek: na střed
  • Použít vlastní styly pro tlačítko: ANO
  • Velikost textu tlačítka: 14px
  • Barva pozadí: #4361ee
  • Šířka okraje tlačítka: 0 pixelů
  • Vzdálenost mezi písmeny tlačítka: 0,1 em
  • Tloušťka písma: Tučné
  • Styl písma tlačítka: TT
  • Výplň: 0,8 em (nahoře a dole), 0 pixelů (vlevo a vpravo)

Přidání vlastního CSS pomocí modulu Kód

Přidejte modul kódu pod tlačítko.

Poté vložte následující CSS do obsahu kódu. Nezapomeňte kód zabalit do potřebných značek skriptu.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

Kód je okomentován, takže můžete pochopit, kde můžete upravit CSS tak, aby vyhovovalo vašim potřebám.

Duplikujte sloupec pro další design

Otevřete modální vrstvu, nejprve odstraňte dva prázdné sloupce.

Poté dvakrát duplikujte sloupec obsahující návrh překryvného obrázku. Měli byste mít celkem tři sloupce s identickými vzory.

Vytvoření návrhu překryvného obrázku č. 2

U tohoto dalšího návrhu umístíme tlačítko do středu obrázku (vždy viditelné). Dále přesuneme záhlaví a hlavní text do pohledu z horní a spodní části obrázku.

Upravte umístění hlavního textu a třídu CSS

Otevřete nastavení modulu překryvného textu ve sloupci 2 a aktualizujte pozici:

  • Umístění: dole uprostřed
  • Vertikální posun: 5 %

Dále aktualizujte třídu CSS o následující:

  • Třída CSS: et-overlay-item move-up

Upravte umístění tlačítka a třídu CSS

Dále otevřete nastavení tlačítka ve sloupci 2 a aktualizujte následující umístění:

  • Umístění: Centrum

Dále odstraňte třídu CSS, protože chceme, aby tlačítko zůstalo vždy viditelné.

Otevřete nastavení modulu Dělič (barva překrytí) a změňte pozadí následovně:

  • Pozadí: rgba(67,97,238,0.8)

Poté otevřete nastavení tlačítka a změňte barvu pozadí:

  • Barva pozadí: #f72585

Upravte obrázek a třídu CSS

Poté otevřete nastavení obrázku a nahrajte nový obrázek (pokud chcete).

Poté do obrázku přidejte následující třídu CSS:

  • Třída CSS: et-overlay-image et-scale

Všimněte si, že kromě třídy „et-overlay-image“ existuje další třída nazvaná „et-scale“, která zvětší velikost obrázku a vytvoří efekt přiblížení při najetí myší.

Vytvoření návrhu překryvného obrázku č. 3

Nyní je čas vytvořit třetí návrh překryvného obrázku ve sloupci 3.

Upravte obsah překryvného textu a třídu CSS

Začněte otevřením nastavení modulu překryvného textu ve sloupci 3. Dále přidejte nadpis H2 nad odstavcový text. Nyní budou oba uvnitř modulu.

Překryvné obrázky Divi

Poté odeberte třídu CSS, aby text zůstal viditelný nad obrázkem.

Upravte odsazení tlačítka a třídu CSS

Otevřete nastavení modulu tlačítka a aktualizujte posun vertikální polohy:

  • Vertikální posun: 5 %

Odebrat překryvné záhlaví

Dále odeberte modul Overlay Header Text.

Upravte barvu překrytí a třídu CSS

Otevřete nastavení modulu Dělič (barva překrytí) a aktualizujte pozadí na následující:

  • Barva přechodu levého pozadí: rgba (67,97,238,0.8)
  • Pravá barva přechodu pozadí: rgba (247,37,133,0.8)
  • Výchozí pozice: 25%
  • Konečná pozice: 75 %

A protože chceme, aby překrytí přechodu bylo vždy viditelné, odeberte třídu CSS.

Upravte třídu CSS obrázku

Nakonec do hlavního obrázku přidáme další třídu CSS („et-rotate“), která změní velikost a otočí obrázek při najetí myší.

  • Třída CSS: et-overlay-image et-rotate

Poslední úpravy

Než zkontrolujeme naše konečné výsledky, musíme provést nějaké úpravy.

Odeberte výchozí spodní okraj pro všechny moduly

Protože jsme již aktualizovali okraj se spodním okrajem 0px, můžeme tento okraj rozšířit na všechny moduly.

Klikněte pravým tlačítkem na nastavení okrajů a vyberte "Prodloužit marži".

Poté zvolte rozšíření okraje na Všechny moduly na stránce.

Odstraňte duplicitní moduly kódu

Ujistěte se, že jste odstranili nadbytečné moduly kódu, které byly přeneseny z duplikace prvního sloupce. Měli byste mít jen jeden. Můžete to udělat snadno z modálních vrstev.

divi

Konečné výsledky

Nyní, když jsou naše tři návrhy hotové, pojďme se podívat na konečné výsledky našich návrhů překryvných obrázků.

vlastní překryvné obrázky s Divi

Stáhnout DIVI hned!!!

A tady je design na mobilu. Překryvné efekty najetí kurzorem lze použít pouze na ploše. Překryvné vrstvy proto budou na mobilu stále viditelné.

vlastní překryvné obrázky s Divi

Stáhnout DIVI hned!!!

závěr

Vytváření vlastních překryvných obrázků je ve skutečnosti velká zábava. Existuje nespočet návrhů, které můžete vizuálně testovat pomocí Divi Builder. 

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...