[Ad_1]
Pojďme.
přehled
Než se ponoříme do výukového programu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
Kancelář
Mobilní aplikace
Stáhněte si rozvržení ZDARMA
Chcete-li získat bezplatné rozložení, musíte si je nejprve stáhnout pomocí tlačítka níže. Chcete-li získat přístup ke stažení, budete se muset přihlásit do našeho seznamu adresátů Divi Daily pomocí formulář níže. Jako nový předplatitel získáte ještě více výhod Divi a každé pondělí zdarma balíček Divi Layout! Pokud jste již na seznamu, zadejte níže svou e-mailovou adresu a klikněte na tlačítko Stáhnout. Nebudete „obnoveni“ ani nebudete dostávat další e-maily.
Začněme znovu vytvářet!
Přidejte 2x zástupné sekce
Přidejte novou sekci
Začněte přidáním zástupného oddílu na stránku, na které pracujete.
dimenzování
Otevřete nastavení sekce a změňte výšku v nastavení velikosti.
Klonovat sekci
Klonujte sekci jednou. Na vaší stránce tak zůstanou dvě zástupné sekce. Tyto zástupné sekce vám pomohou vidět konečný efekt po absolvování kurzu. Na živém webu budou zástupné sekce nahrazeny normálními sekcemi, které používáte na celé stránce.
Přidat novou sekci mezi zástupné sekce
Jakmile jsou zástupné sekce na svém místě, přidejte novou sekci mezi zástupné sekce.
Barva pozadí
Otevřete nastavení sekce a použijte bílou barvu pozadí.
- Barva pozadí: #ffffff
vzdálenost
Přepněte na kartu návrhu sekce a podle toho změňte hodnoty horní a dolní výplně:
- Horní polstrování: 10vh
- Spodní polstrování: 10vh
Přidejte řádek č. 1
Struktura sloupu
Pokračujte přidáním nového řádku do sekce pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů zatím otevřete nastavení řádku, přejděte na nastavení velikosti a změňte hodnoty maximální šířky a šířky.
- Šířka: 100%
- Maximální šířka: 100%
Do sloupce přidejte textový modul
Přidat kopii
Jediný modul, který pro tento řádek potřebujeme, je textový modul. Přidejte kopii podle svého výběru.
Nastavení textu
Přepněte na kartu návrhu modulu a podle toho změňte nastavení textu:
- Písmo textu: Montserrat
- Hmotnost písma textu: Ultra Bold
- Styl písma textu: velká písmena
- Barva textu: # fff2ea
- Velikost textu: 11vw
- Výška řádku textu: 1 em
- Zarovnání textu: na střed
Přidejte řádek č. 2
Struktura sloupu
Přidejte další řádek do sekce pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů ještě otevřete nastavení řádku a změňte nastavení velikosti následujícím způsobem:
- Použít vlastní šířku žlabu: Ano
- Šířka žlabu: 2
- Šířka: 90%
- Zarovnání čar: Střed
Přidat modul obrázku do sloupce
Nahrajte obrázek
Přidejte modul obrázku do sloupce řádku. Nahrajte obrázek podle svého výběru.
zarovnání
Přepněte na kartu návrhu modulu a změňte podle toho zarovnání obrázku:
dimenzování
Poté přejděte na nastavení velikosti a vynutí plnou šířku modulu.
Přidejte do sloupce modul tlačítek
Přidat kopii
Další a poslední modul, který přidáme do sloupce, je tlačítkový modul. Použijte kopii podle svého výběru.
Zarovnání tlačítka
Přejděte na kartu Návrh a změňte zarovnání tlačítek.
Nastavení tlačítek
Potom stylizujte tlačítko následujícím způsobem:
- Použít vlastní styly pro tlačítko: Ano
- Velikost textu tlačítka: 16 pixelů
- Barva textu tlačítka: # 000000
- Barva pozadí tlačítka: #ffffff
- Šířka ohraničení tlačítka: 0px
- Rozteč písmen mezi tlačítky: 2px
- Písmo tlačítka: Montserrat
- Váha písma tlačítka: tučně
- Styl písma tlačítka: velká písmena
vzdálenost
V nastavení mezer také použijte vlastní hodnoty odsazení.
- Horní polstrování: 20 px
- Dolní polstrování: 20 px
- Levé polstrování: 5%
- Pravé polstrování: 5%
Přidejte absolutní umístění do řádku 1
Jakmile dokončíte druhý řádek, vraťte se na řádek # 1. Otevřete nastavení řádku, přejděte na kartu Upřesnit a proveďte sekci absolutní. Tímto způsobem bude řádek a textový modul uvnitř umístěn pod řádek obsahující modul obrázku.
- Pozice: Absolutní
- Umístění: Střed
Klonujte řádek č. 1 a umístěte duplikát pod řádek č. 2
Aby se textový modul mohl zobrazit nad obrázkem, budeme potřebovat další řádek s vyšší hodnotou z-indexu. Klonujte první řádek a umístěte duplikát pod druhý řádek.
Použít efekty na řádek 3
Zvyšte index Z
Otevřete duplicitní řádek a změňte index z na kartě Upřesnit.
Změnit barvu textu
Otevřete textový modul v řádku a změňte barvu textu.
Použít režim prolnutí na čáru
Poté otevřete nastavení řádku a změňte režim prolnutí v nastavení filtrů.
Použijte efekt posouvání na textovém modulu v řádku # 3
Přidejte efekt fade in and fade out
Dokončete výukový program znovu otevřením textového podu, přechodem na efekty posouvání a zapnutím efektu prolínání a vyblednutí. A je to!
- Povolit prolínání a stmívání: Ano
- Počáteční neprůhlednost: 0%
- Střední neprůhlednost: 0% (až 26%)
- Konečná neprůhlednost: 100% (při 28%)
- Motion Effect Trigger: Middle of Element
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ář
Mobilní aplikace
Závěrečné myšlenky
V tomto článku jsme vám ukázali, jak být kreativní s vestavěnými efekty posouvání Divi. Konkrétně jsme vám ukázali, jak zamíchat rolovací kopii. Kopie se nejprve zdá být pod obrázkem. Po rolování se kopie odhalí nad obrázkem a splyne s obrázkem. Také jste si mohli zdarma stáhnout soubor JSON! Pokud máte nějaké dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.
Pokud se chcete dozvědět více o Divi a získat více Divi zdarma, nezapomeňte se přihlásit k odběru našich bulletin e-mailem a na naše Kanál YouTube abyste byli vždy jedním z prvních, kdo se dozví a využije tento bezplatný obsah.
[Ad_2]
