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.

...

Divi: Jak přidat ikonu hamburgeru do modulu Menu

Divi: Jak přidat ikonu hamburgeru do modulu Menu

Chcete přidat ikonu hamburgeru do modulu Divi Menu?

Pokud vytváříte hlavičku v Divi, existuje několik způsobů, jak to udělat. 

Ukážeme vám, jak přidat ikonu hamburgeru do modulu Divi Menu. Tato ikona hamburgeru se již ve výchozím nastavení zobrazuje na menších obrazovkách. Ale v tomto tutoriálu se ujistíme, že se ikona hamburgeru objeví i na ploše. 

To dává vaší hlavičce minimální vzhled a zároveň přidává interakci.

Pojďme.

přehled

Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek.

Stáhnout DIVI hned!!!

Vytvořte novou šablonu globálního záhlaví pomocí Divi Builderu

Přejděte do Divi Theme Builder

Na hlavním panelu WordPress přejděte na „Divi > Tvůrce motivů' pak klikněte 'Přidat globální záhlaví'

Divi Theme Builder

Přidejte novou globální hlavičku

Zobrazí se rozbalovací nabídka. Chcete-li začít stavět od začátku, pokračujte výběrem "Vytvořit globální záhlaví".

Návrh globálního návrhu záhlaví

Nastavení sekce

Barva pozadí

Jakmile jste v editoru šablon, je čas začít navrhovat záhlaví. Všimnete si, že již existuje sekce. Otevřete nastavení sekce a přidejte barvu pozadí.

  • Barva pozadí: #f6f9fb

vzdálenost

Přepnout na kartu Design části a upravte následující parametry.

  • 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í

Otevřete nastavení linky, přejděte na kartu Design a změňte maximální šířku v nastavení velikosti.

  • Maximální šířka: 1 pixelů

vzdálenost

Poté změňte horní a spodní výplň v nastavení mezer.

  • Výplň (nahoře a dole): 5px

Přidejte do sloupce modul nabídky

Vyberte nabídku, kterou chcete přidat

Dále přidejte modul Menu do sloupce řádku a vyberte dynamickou nabídku podle svého výběru.

Stáhnout logo

Nahrajte logo.

Odstraňte barvu pozadí

Dále z modulu odeberte výchozí bílou barvu pozadí.

Nastavení textu nabídky

Přepnout na kartu Design modulu a podle toho upravte textové parametry menu:

  • Nabídka písem: Poppins
  • Tloušťka písma nabídky: Polotučné
  • Barva textu: #003e51
  • Velikost textu nabídky: 16px
  • Zarovnání textu: vpravo

Nastavení rozevírací nabídky

Poté změňte nastavení z rozevírací nabídky.

  • Barva řádku rozbalovací nabídky: #7159c8

Nastavení ikon

Změňte také nastavení ikon.

  • Barva ikony nákupního košíku: #670fff
  • Barva ikony vyhledávání: #670fff
  • Barva ikony menu hamburger: #670ffff

dimenzování

Dále přejděte do nastavení velikosti a přiřaďte maximální šířku loga.

  • Maximální šířka loga: 280 pixelů

vzdálenost

Odstraňte také výchozí spodní okraj z modulu.

  • Okraj (dole): 0px

Make Section Sticky

Nyní, když je naše nabídka na místě, uděláme také sekci lepivou. Otevřete nastavení sekce, přejděte na kartu pokročilý a použijte následující nastavení:

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

Barva pozadí v lepkavém stavu

Poté změňte barvu pozadí sekce na lepivý stav.

  • Barva pozadí: #ffffff

Lepkavý stín pole stavu

Na sekci také použijte stín krabice.

  • Barva stínu (počítač): rgba (0,0,0,0)
  • Barva stínu (lepkavá): rgba (0,0,0,0.04)

Do modulu Menu přidána ikona hamburgeru

Přidejte CSS ID do modulu nabídky

Nejprve otevřete nastavení modulu Menu a přejděte na kartu pokročilý a přiřadit CSS ID.

  • CSS ID: divi-menu

Přidejte modul Kód pod modul Menu

Dále přidejte modul Kód pod modul Menu.

Přidejte značky skriptu a stylu

Použijeme kód CSS a JQuery. Abychom se na to připravili, přidáme značky stylu a skriptu.

Přidejte kód CSS

Mezi značky stylu vložíme následující řádky kódu CSS:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Přidejte JQuery

Přidejte řádky úvodního kódu JQuery

Dále budeme mít kód JQuery. Přidejte následující řádky kódu JQuery mezi značky skriptu:

jQuery(function($){
$(document).ready(function(){
 
});
});

Vytvořte proměnné

Dále vytvořte nějaké proměnné.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Umístěte ikonu přepínání do modulu Menu

Dále umístěte proměnnou ikony přepínače do modulu Menu pomocí následujícího řádku kódu:

toggleIcon.insertAfter(desktopMenu);

Přidejte funkci kliknutí

Přidáváme také funkci kliknutí.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

Uložte změny Divi Theme Builder

Nyní, když je vše na svém místě, zbývá pouze uložit všechny úpravy Divi Theme Builder a zobrazit výsledek!

Divi Theme Builder

přehled

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

ikonu hamburgeru v modulu Divi Menu

Stáhnout DIVI hned!!!

závěr

V tomto článku jsme vám ukázali, jak být kreativní s globální hlavičkou v Divi Theme Builder. 

Konkrétně jsme vám ukázali, jak přidat ikonu nabídky hamburgeru také na plochu. Ve výchozím nastavení se na tabletu a mobilu zobrazuje ikona hamburgeru.

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 dokončení projektů tvorby webových stránek. Nebo se podívejte také na našeho průvodce na 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 nabídku rotujícího kolečka při vznášení

Divi: Jak vytvořit nabídku rotujícího kolečka při vznášení

Chtěli byste si vytvořit originální Divi menu v podobě točícího se kola na hoveru?

Vytvoření rotujícího kolečka nabídky při umístění kurzoru je zábavný způsob, jak předvést užitečné odkazy na vašem webu. Byl by to skvělý způsob, jak v záhlaví poskytnout více výzev k akci, které uživatele nasměrují tam, kam potřebují. A také by to byla skvělá nabídka podkategorií pro váš blog.

V tomto tutoriálu vám ukážeme, jak vytvořit otočné kolečko nabídky při najetí myší v Divi. To lze provést pomocí kombinace vestavěných možností Divi a některých vlastních úryvků css.

přehled

Než se pustíme do tohoto tutoriálu, podívejme se na výsledek, kterého chceme dosáhnout.

Stáhnout DIVI hned!!!

Vytvořte novou stránku pomocí Divi Builder

Chcete-li začít, budete potřebovat následující:

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

originální menu Divi v podobě otočného kolečka při vznášet se

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)

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

Návrh otočného menu v Divi

Vytvořte sekci a řádek 1

Ve výchozím nastavení přidejte řádek s následující strukturou sloupců.

Poté přidejte textový modul na řádek s následujícím obsahem.

Dále aktualizujte návrh textu následovně:

  • Písmo textu: Share Tech
  • Mezera mezi písmeny textu: 1px
  • Velikost textu nadpisu 2: 8vw

Přidejte řádek 2 a vytvořte kolo

Dále musíme přidat nový řádek do sloupce pod řádkem 1.

Než začneme přidávat naše textové moduly pro naše odkazy, musíme naši linku navrhnout jako kolo. Aby bylo možné vytvořit náš design kola, na řadě bude potřeba mnoho optimalizací.

Čtěte také: Jak odhalit obsah na rozdělovači sekce Hover v Divi 

Chcete-li začít, otevřete nastavení řádku 2 a aktualizujte následující:

  • Barva pozadí: #02366b
  • Barva přechodu levého pozadí: rgba(0,0,0,0.45)
  • Pravá barva přechodu pozadí: #02366b
  • Typ přechodu: Kruhový
  • Radiální směr: Střed
  • Výchozí pozice: 36 %
  • Koncová pozice: 0 %
  • Použít vlastní šířku okapu: ANO
  • Šířka žlabu: 1
  • Šířka: 500px
  • Maximální šířka: 500 pixelů (počítač), automaticky (tablet a telefon)
  • Výška: 500 pixelů (počítač), automaticky (tablet a telefon)
  • Odsazení (počítač): 0px (nahoře a dole)
  • Výplň (tablet a telefon): 20 pixelů (nahoře, dole a vlevo)
  • Marže (telefon): -10 % (vpravo)

Musíme nastavit výšku i šířku čáry na 500 pixelů, aby to byl dokonalý čtverec. To nám umožní dát mu dokonalý kruhový tvar pomocí možnosti Divi zaoblených rohů (poloměr okraje).

  • Zaoblené rohy: 50 %

Dále můžeme přidat další úroveň návrhu kruhu pomocí stínu rámečku následovně:

  • Síla rozostření rámečku: 0px
  • Síla rozložení stínu krabice: 210 pixelů
  • Barva stínu: rgba (2,54,107,0.66)

Dále přidáme malý úryvek CSS, který svisle vycentruje obsah našeho řádku. Pod záložkou pokročilý, přidejte do hlavního prvku následující vlastní CSS.

display:flex;align-items:center;

Přidávání odkazů

Každý odkaz v kole bude vytvořen pomocí modulu text. Vytvoříme celkem šest modulů text. Pět modulů text bude obsahovat odkazy na kolo a druhý bude obsahovat název nabídky.

Začněte vytvořením nového modulu „Text“.

Dále aktualizujte nastavení textu následovně:

  • Body: "Prvek 1"
  • Písmo textu: Share Tech
  • Barva textu: #ffffff
  • Velikost: 16px (výchozí), 20px (umístění kurzoru)
  • Mezera mezi písmeny: 1px
  • Výška řádku textu: 60px
  • Šířka: 250 pixelů (počítač), automaticky (tablet a telefon)
  • Výška: 60px
  • Výplň (vlevo): 20 pixelů

Nastavení prozatím uložte. Poté 4krát duplikujte textový modul, abyste vytvořili celkem 5 textových modulů.

Umístění textových odkazů/modulů

Nyní jsme připraveni umístit naše články podél obvodu kola. Za tímto účelem aktualizujeme každý modul text s možnostmi transformace, které pohybují/překládají a otáčí modul na místě.

Objevte také: Jak vytvořit mřížku sloupce tekutiny při vznášení v divi

Chcete-li to usnadnit, aktivujte režim drátového zobrazení a označte textové moduly počínaje odkazem 1 nahoře až po odkaz 5 dole.

Odkaz 1

Začneme úpravou odkazu 1. Otevřete nastavení modulu Text pro odkaz 1 a aktualizujte následující:

  • Transformovat překlad (osa Y): 120 px (počítač), 0 px (tablet a telefon)
  • Transformace Rotace (osa Z): 60 stupňů (počítač), 0 px (tablet a telefon)
  • Původ: 50 % (vpravo uprostřed)

Odkaz 2

Otevřete nastavení textového modulu pro odkaz 2 a aktualizujte následující:

  • Změnit
    • Přeložit (osa Y): 60 pixelů (počítač), 0 pixelů (tablet a telefon)
    • Rotace osy Z: 30 stupňů (počítač), 0 pixelů (tablet a telefon)
    • Původ: 50 % (vpravo uprostřed)

Odkaz 3

Vzhledem k tomu, že modul Text pro odkaz 3 je uprostřed, můžeme jej ponechat na místě.

Odkaz 4

Otevřete nastavení textového modulu pro odkaz 2 a aktualizujte následující:

  • Přeměnit:
    • Přeložit osa Y: -60px (počítač), 0px (tablet a telefon)
    • Rotace osy Z: -30 stupňů (počítač), 0px (tablet a telefon)
    • Původ: 50 % (vpravo uprostřed)

Odkaz 5

Otevřete nastavení textového modulu pro odkaz 2 a aktualizujte následující:

  • Přeměnit:
    • Přeložit osa Y: -120px (počítač), 0px (tablet a telefon)
    • Rotace osy Z: -60 stupňů (stolní počítač), 0px (tablet a telefon)
    • Původ: 50 % (vpravo uprostřed)

Nyní se podívejme na dosavadní výsledek. Všimněte si, jak odkazy/text v textových modulech dokonale probíhají po obvodu kruhu.

Přidán popisek menu

Chcete-li přidat štítek nabídky, budeme muset přidat další textový modul k pěti textovým modulům, které již máme. Pokračujte a přidejte nový textový modul nad odkaz 1.

Dále aktualizujte obsah těla následujícím způsobem:

Menu

Poté pro urychlení návrhu zkopírujte styly modulu Text pro odkaz 3 a vložte tyto styly modulu do nového modulu Text.

Poté aktualizujte následující:

  • Výška řádku textu: 300 pixelů (počítač), 20 pixelů (tablet a telefon)
  • Výška: obnovit výchozí nastavení (auto)
  • Transformace Rotace (osa Z): 180 stupňů (počítač), 0 stupňů (tablet a telefon)
  • Počátek transformace: 50 % (vpravo uprostřed)

Jakmile je hotovo, musíme dát modulu Text Label Text absolutní pozici. Chcete-li to provést, přidejte do hlavního prvku následující vlastní CSS:

position: absolute!important;

Nyní zjistěte výsledek. Měli byste vidět, že položka nabídky je vzhůru nohama napravo od kolečka.

Přidán efekt rotujícího vznášení na čáru/kolečko

Chcete-li do řádku přidat efekt otočného najetí, aktualizujte nastavení řádku následovně:

  • Transformace Rotace (osa Z): 180 stupňů (počítač), 0 stupňů (přejetí myší), 0 stupňů (tablet a telefon)

Dále aktualizujte nastavení přechodu následovně:

  • Délka přechodu: 450 ms
  • Přechod rychlostní křivky: Snadný nástup a výstup

Nyní sledujte, jak se kolo otáčí, když na něj najedete.

Vytvoření dvousloupcového rozvržení sekce

V současné době se rozvržení skládá ze dvou jednosloupcových řad naskládaných na sebe. Můžeme však použít vlastnost flex css k vodorovnému zarovnání dvou čar. 

K tomu můžeme do sekce přidat malý úryvek vlastního CSS. Až to bude hotové, budeme muset trochu upravit rozestupy, aby bylo vše v pořádku.

Otevřete nastavení sekce a přidejte následující vlastní css do hlavního prvku:

display:flex;

Aktualizujte řádkování 1

Dále aktualizujte velikost a mezery řádku 1 následovně:

  • Šířka: 40 % (počítač)
  • Marže (počítač): zbývá 5 %.

Konečný výsledek

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

Stáhnout DIVI hned!!!

Alternativní provedení polokola

Zajímavým alternativním provedením je skrytí pravé poloviny kola mimo sekci tak, aby byly spoje skryty a následně odhaleny při visení. 

Chcete-li to provést, pokračujte a duplikujte celou sekci obsahující výkres, který jsme právě vytvořili. 

V sekci duplikátů aktualizujte parametry na řádku 1 následovně:

  • Šířka: 70 % (počítač)

Dále aktualizujte nastavení v řádku 2 tak, aby se kolo vysunulo ze sekce:

  • Okraj: -250 pixelů vpravo

Potřebujeme použít -250px, protože celková šířka kolečka je 500px a chceme skrýt přesně polovinu řádku.

Poté nastavte viditelnost sekce na skryté následovně:

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

Zde je konečný výsledek.

originální menu Divi v podobě otočného kolečka při vznášet se

Stáhnout DIVI hned!!!

závěr

Otáčející se článkové kolo je jedním z těch elegantních designových prvků, které mohou návštěvníky zaujmout jemným a jedinečným efektem vznášení. A je docela úžasné, jak snadno lze tento design provést pomocí vestavěných nastavení designu Divi. 

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.

...