Od nových možností velikosti divi Když byly vydány, existuje několik tutoriálů, které vám ukáží, jak vytvořit odhalení po nanesení. V těchto tutoriálech je obsah maskovaný byl umístěn svisle. V některých případech však můžete chtít vytvořit horizontální ostění. V tomto tutoriálu vám ukážeme, jak odhalit obrázky pomocí mřížek a možností přetečení. divi. Dělat tuto práci vyžaduje trochu jiný přístup. Použijeme řadu jednoho sloupce a všechny moduly umístíme pod sebe. Při vznášení změníme sloupec na vodorovnou mřížku. Můžete si také zdarma stáhnout soubor JSON!
Pojďme.
přehled
Než se ponoříme do tutoriálu, pojďme se rychle podívat, jak to vypadá na různých velikostech obrazovky.
Začněme znovu!
Přidejte novou sekci
Začněte přidáním nové pravidelné sekce na stránku, na které pracujete.
Přidat nový řádek
Struktura sloupců
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
Výchozí pozadí přechodu
Bez přidání dalších modulů otevřete parametry linky a přidejte následující pozadí přechodu:
- 1 barva: #b1ffc4
- Barva 2: #ffffff
- Typ přechodu: Radiální
- Radiální směr: Střed
- Počáteční pozice: 28%
- Koncová pozice: 28%
Létání nad přechodem pozadí
Přechodem změníte pozadí přechodu.
- 1 barva: #b1ffc4
- Barva 2: #ffffff
- Typ přechodu: Radiální
- Radiální směr: vlevo
- Počáteční pozice: 5%
- Koncová pozice: 5%
vzdálenost
Přejděte na nastavení mezer a poté změňte hodnoty odsazení a okraje.
- Vrchní polstrování: 0px
- Spodní výplň: 0px
- Horní okraj: 50px
- Dolní okraj: 50px
Výchozí ohraničení
Přidejte poloměr ohraničení 50 pixelů do pravého horního a dolního pravého rohu.
Hover Border
Přiveďte rohy do polohy „0px“.
Výchozí stín
Poté přidejte stín jemných polí pomocí následujících parametrů:
- Box Force Blur Force: 50px
- Barva stínu: rgba (0,0,0,0.09)
Hover Box Shadow
Při letu nad ním odstraňte stín z pole a nahraďte barvu stínu zcela průhlednou barvou.
- Barva stínu: rgba (0,0,0,0)
Přidejte textový sloupec do sloupce
Přidat obsah H2
Je čas začít přidávat moduly, počínaje textovým modulem. Zadejte obsah H2 dle vašeho výběru.
Nastavení textu H2
Přejděte na kartu Návrh a odpovídajícím způsobem změňte nastavení textu H2:
- Název 2 Písmo: Acme
- Název 2 Styl písma: Podtržení
- Název 2 Barva podtržení: #00ff3f
- Název 2 Barva textu: #000000
- Název 2 Velikost textu: 3vw
vzdálenost
Poté přidejte vlastní hodnoty výplně.
- Nejlepší polstrování: 6vw
- Spodní výplň: 7vw
- Levá výplň: 2vw
Přidat modul obrázku do sloupce
Nahrát obrázek
Druhý modul, který v tomto sloupci potřebujeme, je modul obrazu. Nahrajte obrázek krajiny podle vašeho výběru.
Světelný box
Poté v nastavení odkazu aktivujte možnost lightbox.
- Otevřeno v prohlížeči: ano
dimenzování
A vynutit plnou šířku obrázku v nastavení velikosti. Tím zajistíte, že obraz zůstane citlivý při všech velikostech obrazovky.
- Force Fullwidth: Ano
Klonovat obrazový modul dvakrát
Jakmile dokončíte první obrazový modul, můžete jej zkopírovat dvakrát.
Změnit obrázky
Změňte obrázky ve dvou duplikátech. Ujistěte se, že obrázky, které nahráváte, mají stejnou velikost jako první obrázek.
Přidejte do řádku efekt převrácení
dimenzování
Nyní, když jsme dokončili základní nastavení řádků a modů, je čas vytvořit efekt přechodu! Začneme změnou výšky a šířky čáry a skrytím přetečení. Otevřete nastavení velikosti řádků a proveďte následující změny:
- Použít vlastní šířku okapu: Ano
- Šířka okapu: 1
- Šířka: 20%
- Maximální šířka: 100%
- Výška: 15.9vw
Hover
Při pohybu myší zmenšete šířku na „100%“. To umožní, aby se obrázky zobrazily, jakmile je kurzor umístěn.
- Šířka: 100%
viditelnost
Přepněte na další pokročilou kartu a skryjte přetečení. Tím zajistíte, že obrázky budou maskovány před Návštěvníci umístěte kurzor (desktop) nebo klikněte (tablet/mobil) na textový modul.
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
Přechody
Také měníme dobu trvání přechodu v parametrech přechodu.
- Trvání přechodu: 0ms
Prvek rollover hlavního sloupce
Chcete-li vytvořit vznášející se mřížku, otevřete nastavení sloupce, přejděte na kartu Rozšířené možnosti a do hlavního prvku vznášení umístíme následující řádky kódu CSS:
displej: mřížka; sloupce mřížky-šablony: 20% 25% 25% 25%; mezera v mřížce: 10px;
Klonujte řádek dvakrát
Jakmile dokončíte první řádek, můžete jej klonovat tolikrát, kolikrát chcete. U tohoto konkrétního příkladu návrhu klonujeme řádek dvakrát.
Upravit pozadí přechodu řádku 1
Změňte barvu prvního přechodu na pozadí přechodu druhého řádku.
- Barva 1: # ffdc96
Změňte pozadí přechodu řádku 2
Totéž proveďte pro třetí řádek.
- 1 barva: # b7c7ff
Změňte kopii textového modulu a barvu podtržení dvou duplikátů
Pokračujte změnou barvy podtržení duplikátů textového modulu s kopií a máte hotovo!
- Podtržená barva # 1: # ffaa00
- Podtržená barva # 2: # 0037ff
Závěrečné myšlenky
V tomto tutoriálu jsme vám ukázali, jak zobrazit obrázky ve vodorovných mřížkách přechodu pomocí možností přetečení. divi. Obrázky byly odhaleny při najetí myší na plochu a kliknutí na tabletu/telefonu. Přestože jsme odhalili obrázky, můžete je prozradit obsah dle vašeho výběru úpravou parametrů v generátoru. Doufáme, že vás tento tutoriál inspiruje k vytvoření vlastních alternativních návrhů mřížky! Pokud máte nějaké dotazy nebo návrhy, nezapomeňte zanechat komentář v sekci komentářů níže!
