Divi: Jak používat "Gradient Builder" ke zkrášlení vašich obrázků

Chtěli byste dát svým obrázkům tvary pomocí generátoru přechodů? divi ?

Obrazové masky se často používají k přidání zajímavých tvarů do obrázků. Umožňují obrazu vidět skrz tvar a dodávají stránce jedinečný designový prvek.

s Tvůrce přechodů de divi, nemusíte nutně používat masky k vytváření tvarů. Místo toho můžete použít Přechodové zastávky a parametry pro jejich vytvoření!

V tomto článku se podíváme na to, jak zkrášlit své obrázky pomocí nástroje Gradient Builder of divi které vám pomohou přidat k vašim obrázkům jedinečné vzory.

Začněme.

přehled

Nejprve se podívejme, co v tomto tutoriálu vytvoříme na různých velikostech obrazovky.

První příklad – kruhový obrazový tvar

Stolní počítač

dejte svým obrázkům tvary pomocí Diviho generátoru přechodů

tableta

telefon

Druhý příklad – Lineární obrazový tvar

Kancelář

tableta

telefon

Třetí příklad – Eliptický tvar obrázku

Stolní počítač

tableta

telefon

Čtvrtý příklad – kónický tvar obrazu

Stolní počítač

tableta

telefon

Návrh rozložení s Divi

Začněme vytvořením rozložení, které budeme používat ve všech příkladech. Toto rozložení lze použít jako sekci hrdiny.

Na jedné straně bude obsahovat název a popis a na druhé obrázek. Toto rozložení a obrázek pak použijeme pro příklady.

Přizpůsobte sekci

Nejprve vytvořte novou stránku Divi a upravte sekci. Otevřete nastavení sekce a změňte barva pozadí na #f0f3fb.

Pozadí: #f0f3fb

Poté přejděte na kartu Design a změňte nastavení mezer následovně:.

Polstrování (nahoře a dole): 10 %

Přidat řádek

Poté přidejte a řádek se sloupcovou strukturou níže.

Přístup k parametrům linky na kartě Design, přejděte na možnost Rozměry a upravit parametry velikosti.

Použít vlastní šířku okapu: ANO
Maximální šířka: 1 pixelů

Nastavení prvního sloupce

Na kartě Obsah řádku, otevřete nastavení prvního sloupce řádku, přejděte na kartu Design. Upravte rozestup následovně.

Polstrování (vlevo a vpravo): 9% vlevo, vpravo

Parametry prvního modulu Text

Poté přidejte a Textový modul do levého sloupce.

vybrat Okruh 4 pro text obsah a přidejte obsah vašeho těla.

Text: "Vítejte v BlogPasCher"

Poté přejděte na kartu Design a změnit nastavení titulků.

Písmo: Montserrat
Tloušťka písma: Tučné
Styl: TT
Barva textu: #1d4eff

Velikost textu: Desktop 16px, Tablet 14px, Telefon 12px
Vzdálenost mezi písmeny: 0,3 em
Výška řádku: 1,6 em

Přejděte na Vzdálenost a změňte spodní okraj.

Okraj (dole): 0px

Parametry druhého modulu Text

Poté přidejte a Textový modul pod první.

Nastavte typ textu na "Nadpis 1" a přidejte obsah vašeho těla.

Obsah: „Naplánujte si svou finanční budoucnost“

Poté vyberte kartu Design a upravte možnosti titulku.

Písmo: Montserrat
Tloušťka písma: Tučné
Barva textu: #0f1154

Velikost: 80px stolní počítač, 40px tablet, 24px telefon
Výška řádku: 110 %

Parametry třetího Textového modulu

Poté přidejte a Textový modul pod druhou.

Ponechte typ textu na "Odstavec" a přidejte obsah svého těla.

Tělo: obsah

Poté přejděte na kartu Design a změnit nastavení textu.

Písmo textu: Roboto
Hmotnost písma: střední
Barva textu: #000000

Velikost textu: 18px (stolní počítač a tablet), 14px (telefon)
Výška řádku: 180 %

Nakonec přejděte dolů na vzdálenost a nastavte spodní okraj. Zavřete nastavení modulu.

Okraj (dole): 0px

Nastavení obrazového modulu

Nyní přidejte a Obrazový modul do pravého sloupce.

Za prvé, odstranit fiktivní obrázek kliknutím na odpadkový koš nebo na ikonu resetování nad obrázkem.

Potom přejděte dolů Bakground , vyberte kartu Obrázek a přidejte svůj obrázek. Ponechte všechna nastavení obrazu na výchozích hodnotách. Obrázek se zpočátku moc nezobrazí. Vyřešíme to za pochodu.

Poté vyberte kartu Styl a přejděte na Vzdálenost.

Marže (počítač): -10 % (nahoře), -30 % (vlevo), 10 % (vpravo)
Výplň (nahoře a dole): 300 pixelů

Okraj (tablet/telefon): 0 % (nahoře), 0 % (levý a pravý)

Výplň (telefon): 150 pixelů (nahoře a dole)

Příklady obrázků tvarovaných pomocí Divi's Gradient Builder

První příklad – Kruhový tvar

Náš první příklad dává obrázku kruhový tvar s dírou uprostřed.

Otevřete nastavení obrazového modulu a přejděte dolů Pozadí . Vybrat Záložka Přechod pozadí a nastavte 6 přechodových zastávek:

První zastávka: 0 %, #f0f3fb
Za druhé: 45 %, #f0f3fb
Třetí (nad druhým): 45 %, rgba (41,196,169,0 XNUMX XNUMX)
Za čtvrté: 69 %, rgba (250,255,214,0 XNUMX XNUMX)
Pátý (nad čtvrtým): 69 %, #f0f3fb
Za šesté: 100 %, #f0f3fb

Typ: Kulatý
Pozice: Střed
Jednotka: Procenta
Čtvercový přechod nad obrázkem pozadí: ANO

Druhý příklad – Lineární forma

Zde je náhled druhého příkladu tvaru obrázku. Tento příklad umístí přes obraz diagonální čáry.

Otevřete nastavení, přejděte dolů Pozadí a vyberteZáložka Přechod pozadí. Přidejte čtyři přechodové zastávky:

První zastávka: 0 %, #f0f3fb
Za druhé: 5 %, #f0f3fb
Třetí (nad druhým): 5 %, rgba (175,175,175,0 XNUMX XNUMX)
Za čtvrté: 13 %, rgba (41,196,169,0 XNUMX XNUMX)

Typ: Lineární
Řízení: 150 stupňů
Opakovat přechod: ANO
Přechodová jednotka: procento
Čtvercový přechod nad obrázkem pozadí: ANO

Třetí příklad – eliptický tvar

Toto je náš třetí příklad tvaru obrázku. Toto používá eliptický tvar.

Otevřete nastavení obrazového modulu a přejděte dolů Pozadí . Vyberte kartu Přechod na pozadí a vytvořte čtyři přechodové zastávky:

První zastávka: 0 %, #f0f3fb
Za druhé: 9 %, #f0f3fb
Třetí (nad druhým): 9 %, rgba (175,175,175,0 XNUMX XNUMX)
Za čtvrté: 21 %, rgba (41,196,169,0 XNUMX XNUMX)

Typ: Eliptický
Pozice přechodu: Vlevo nahoře
Opakovat přechod: ANO
Přechodová jednotka: procento
Čtvercový přechod Obrázek nad pozadím: ANO

Čtvrtý příklad – Kuželovitý tvar

Náš čtvrtý příklad používá "Kónický" k vytvoření jednoho obrazového tvaru.

Otevřete Nastavení obrazového modulu a přejděte dolů Pozadí a vyberte kartu Obrázek na pozadí. Tento má 5 přechodových zastávek:

První zastávka: 23 %, #f0f3fb
Za druhé: 35 %, #f0f3fb
Třetí (nad druhým): 35 %, rgba (41,196,169,0 XNUMX XNUMX)
Za čtvrté: 65 %, rgba (250,255,214,0 XNUMX XNUMX)
Pátý (nad čtvrtým): 65 %, #f0f3fb

Typ: Zužující se
Směr gradientu: 180 stupňů
Pozice gradientu: Spodní
Jednotka: Procento
Čtvercový přechod nad obrázkem pozadí: ANO

Konečné výsledky

Všechny layouty dopadly dobře. Tvary obrázků vynikají a obrázky jsou vždy snadno pochopitelné. Všechny jsou responzivní, takže vypadají skvěle na jakémkoli zařízení.