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ář
Mobilní
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
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.
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.
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
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.
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.
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.
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:
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.
Konečný výsledek
Nyní, když jsme prošli všemi kroky, pojďme se podívat na konečný výsledek.
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.
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.
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.
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.
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í:
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.
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ů.
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.
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.
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í'
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:
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.
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.
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
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í.
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ě.
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)
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ě:
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.
Chtěli byste vědět, jak odhalit obsah při najetí myší na oddělovač sekcí v Divi?
Oddělovače sekcí jsou i nadále oblíbeným designovým prvkem Divi. Na výběr je mnoho stylů oddělovačů s užitečnými možnostmi, které usnadňují přidání jedinečných přechodů a pozadí na stránku.
V tomto tutoriálu použijeme oddělovače sekcí trochu jinak. Divi umožňuje upravit výšku a rozložení každé přepážky. To nám umožňuje umístit oddělovače nad určité oblasti nebo obsah sekce.
Použitím možnosti hover pro výšku rozdělovače můžeme přidat jedinečné efekty hoveru, které odhalí částečně skrytý obsah. Funguje to skvěle, když chcete upozornit na konkrétní výzvu k akci nebo tlačítko, na které mají návštěvníci kliknout.
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
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 efektu přechodu rozdělovače sekcí v Divi
Vytvoření sekce a linie
Vytvořte pravidelný úsek s řadou dvou sloupců.
Před přidáním modulu otevřete nastavení sekce a aktualizujte následující:
Přechod pozadí (vlevo): #73ba57 Přechod pozadí (vpravo): #2a4c23 Šířka: 80 % Maximální šířka: 1px Zarovnání řezu: Střed
Přidejte název sekce
Chcete-li přidat název sekce, vytvořte modul Text a vložte následující text:
<h2>The Juice</h2>
Dále aktualizujte design následovně:
Písmo: Lato Velikost textu: 80px Mezera mezi písmeny: -5px Okraj: -50px (nahoře), -40px (dole) Index Z: -1
Vlastní okraj a z-index umožní, aby text zůstal za obrázkem, který přidáme v dalším kroku.
Přidat obrázek
Pod modulem Text s nadpisem ve sloupci 1 přidejte modul Obrázek. Poté nahrajte obrázek s průhledným pozadím. Používáme obrázek z balíčku rozložení Obchod s džusy 240 pixelů na 300 pixelů.
Úprava zarovnání obrazu na střed.
Do sloupce 2 přidejte modul „Výzva k akci“.
Ve sloupci 2 přidejte modul Výzva k akci.
Přidejte adresu URL odkazu na tlačítko, abyste zajistili, že se tlačítko zobrazí.
CTA pozadí a styl textu nadpisu
Dále aktualizujte následující nastavení návrhu:
Pozadí: #ffffff Barva textu: tmavá Písmo názvu : Lato Tloušťka písma názvu: Těžká Styl písma: TT Velikost textu nadpisu: 18px
Přizpůsobte tlačítko CTA
Aktualizujte design tlačítka následovně:
Použít vlastní styly pro tlačítko: ANO
Barva textu tlačítka: #ffffff
Barva pozadí tlačítka: #73ba57
Šířka okraje: 0px
Přizpůsobte ohraničení modulu CTA
Poté přidejte rámeček pro rámování modulu následovně:
Do rozdělovače byl přidán efekt hoveru, aby se odhalil modul „Výzva k akci“.
Nyní je čas přidat efekt hoveru na oddělovač sekcí, aby se odhalil modul „Výzva k akci“. Abychom to mohli udělat, musíme nejprve vytvořit naše oddělovače sekcí.
Otevřete parametry sekce a horní oddělovač s následujícími parametry.
Styl horního oddělovače: viz snímek obrazovky Barva horního oddělovače: #73ba57 Výška oddělovače: 70 % (výchozí), 0 % (při umístění kurzoru myši) Překlopení horního rozdělovače: horizontální
Všimněte si, že výška oddělovače začíná výchozí výškou 70 % a poté se při umístění kurzoru změní na výšku 0 %.
Přidána spodní přepážka
Poté přidejte dolní oddělovač podobný oddílu s následujícími parametry.
Styl spodního oddělovače: viz snímek obrazovky
Barva spodního oddělovače: #73ba57
Výška oddělovače: 70 % (výchozí), 0 % (při umístění kurzoru myši)
Překlopení rozdělovače: Horizontální
Uspořádání: Nad obsahem sekce
Tato spodní přepážka také začíná s výškou 70 %, která při vznášení klesne na 0 %. Protože je však možnost uspořádání rozdělovače nastavena nad obsahem, rozdělovač sekcí skryje spodní část modulu "Výzva k akci" ve sloupci 1. Poté se při najetí myší zobrazí zbytek modulu.
Přidán efekt stínového vznášení pole pro jedinečný přechod a design
Pro jedinečný přechod a design při vznášení můžeme přidat efekt box shadow hover, který bude probíhat současně s efektem splitter hover. Chcete-li to provést, přidejte do oddílu následující stín pole.
Doufáme, že vám tento článek poskytl nějakou inspiraci k vytvoření jedinečných efektů rozdělování sekcí, které odhalí obsah.
Ve skutečnosti může být nastavení hover splitteru samo o sobě skvělým designovým prvkem. Vzorové návrhy by vám navíc měly pomoci zahájit vlastní průzkum a návrhy.
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.
Důvěrnost a soubory cookie: tento web používá soubory cookie. Pokračováním v procházení těchto stránek souhlasíte s naším používáním.
Další informace, včetně toho, jak ovládat soubory cookie, najdete v následujících tématech:
Pravidla pro soubory cookie
