Chtěli byste dát svůj další rozměr webové stránky s maskou na pozadí divi Lepkavý?
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 udě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í aplikace
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.
Opusťte oblast obsah prázdný. 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.
Kancelář
Stáhnout DIVI hned!!!
Mobilní aplikace
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
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.
...
