Čím je CTA vizuálně přitažlivější, tím větší je šance, že bude konverzní poměr. Existuje mnoho způsobů, jak navrhnout vaše CTA, ale v tomto článku vám ukážeme, jak vytvořit úžasné šablony sloupců CTA s poloprůhlednými obrázky a překryvy sloupců. Poloprůhledné obrázky najdete ve složce ke stažení níže, ale můžete použít i jiné obrázky. Budete si také moci stáhnout soubor JSON zdarma!
Pojďme.
náhledy
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
kontext
Začněte vytvořením nové stránky nebo přidáním nové běžné sekce na existující stránku. Poté přejděte do sekce nastavení a přidejte pozadí s přechodem.
- Pozadí: gradient
- Barevný přechod: velmi světle šedý #efefef
- Barva pozadí dvě: bílá #ffffff
- Typ přechodu: Radiální
- Radiální směr: střed
- Výchozí pozice: 52%
- Konečná pozice: 50%
vzdálenost
Přepněte na kartu Návrh a upravte výplň v nastavení mezer.
- Vrchní a spodní polstrování
- Kancelář: 0vw
- Čalounictví v punčochách
- Tablet + telefon: 70vw
Přidat nový řádek
Struktura sloupců
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
dimenzování
Poté upravte šířku a maximální šířku čáry.
- Šířka: 100%
- Max. Šířka 100%
Přidat textový modul
Přidejte H2 a textový obsah
Je čas přidat moduly! Nejprve přidejte textový modul a vložte nějaký obsah H2 a odstavce dle vašeho výběru.
Texty
Přepněte na kartu Návrh a stylujte text následujícím způsobem:
- Text písma: Open Sans
- Zarovnání textu: střed
- Barva textu: Zelená #5bba1b
- Velikost textu:
- Kancelář: 1.2vw
- Tablet: 2.8vw
- Telefon: 3.6vw
- Mezery textových písmen: 0.2vw
- Výška řádku textu: 1.8em
Název 2 Text
Po úpravě odstavce odstavce také upravte text H2.
- Sekce: H2
- H2 Hmotnost písma: Doppio One
- Zarovnání textu H2: Střed
- Barva textu H2: #3d3d3d
- H2 Velikost textu:
- Kancelář: 4.4vw
- Tablet: 5.9vw
- Telefon: 6.9vw
vzdálenost
A přidejte trochu polstrování nahoře.
- Vrchní polstrování: 212px
Přidejte modul rozdělení
viditelnost
Pod textový modul přidejte dělící modul a nastavte viditelnost na „Ano“.
- Viditelnost: ano
Linka
Změňte barvu oddělovače.
- Barva čáry: Tmavě šedá #545454
dimenzování
Nyní upravte velikost oddělovače tak, aby vypadala menší.
- Hmotnost oddělovače: 4px
- Šířka: 9%
- Zarovnání modulu: střed
vzdálenost
Přidejte také záporný horní okraj.
- Horní okraj:
- Kancelář: -40px
- Tablet + telefon: -15px
Přidat nový řádek
Struktura sloupců
Pokračujte přidáním nového řádku se třemi sloupci stejné velikosti. To bude základem pro návrh sloupce CTA.
kontext
Před přidáním modulů přidejte na pozadí parametrů řádku přechod.
- Pozadí: gradient
- 1 gradient barvy pozadí: bílý #ffffff
- Barva pozadí přechodu dvě: transparentní
- Typ přechodu: Radiální
- Radiální střed řízení
- Výchozí pozice: 42%
- Konečná pozice: 50%
dimenzování
Nyní upravte velikost řádku.
- Šířka: 100%
- Maximální šířka: 100%
vzdálenost
Poté přejděte na nastavení mezer a přidejte vlastní hodnoty odsazení.
- horní čalounění: 22vw
- Spodní výplň: 10vw
- Levé a pravé polstrování: 10vw
Nastavení sloupce 1
kontext
Pokračujte otevřením sloupce 1 a přidáním pozadí přechodu.
- Pozadí: gradient
- Barva pozadí přechodu: modrá #2a4eed
- Barva pozadí přechodu dvě: světle modrá #91f5f7
- Typ přechodu: lineární
- Směr přechodu: 38deg
- Výchozí pozice: 23%
hraniční
Poté definujte zaoblené rohy sloupců v nastavení okrajů.
- Zaoblené rohy: 2vw ve všech rozích
Stínová krabička
Přidejte také jemný odstín pole.
- Shadow Box: Druhá možnost
- Stín pole Horizontální poloha: 6px
- Box Stínová svislá poloha: -10px
- Box Force Blur Force: 50px
přetečení
Ujistěte se, že jsou také vidět přetečení sloupce.
- Horizontální a vertikální přetečení: viditelné
Nastavení sloupce 2
kontext
Přejděte do druhého sloupce a přidejte následující pozadí přechodu:
- Pozadí: gradient
- Barva přechodu na pozadí jedna: #1ba038
- Dvoubarevný přechod na pozadí: #c6f727
- Typ přechodu: lineární
- Směr přechodu: 38deg
- Výchozí pozice: 23%
hraniční
Do sloupce také přidejte poloměr ohraničení.
- Zaoblené rohy: 2vw ve čtyřech rozích
Stínová krabička
S jemným odstínem krabice.
- Shadow Box: Druhá možnost
- Stín pole Horizontální poloha: 6px
- Box Stínová svislá poloha: -10px
- Box Force Blur Force: 50px
transformátor
Tento sloupec je o něco vyšší než ostatní. Abychom tento efekt vytvořili, upravíme nastavení převodu transformace pro sloupec 2.
- Přeložit transformátor:
- Kancelář: -8vw, osa y
- Tablet + telefon: 30vw, osa Y
přetečení
Také zviditelněte přetečení tohoto sloupce.
- Vodorovné a svislé přepady: viditelné
Nastavení sloupce 3
kontext
Pojďme k poslednímu a poslednímu sloupci! Přidejte přechodové pozadí.
- Pozadí: gradient
- Barva pozadí přechodu jedna: #f0562c
- Dvoubarevný přechod na pozadí: #f1a526
- Typ přechodu: lineární
- Směr přechodu: 38deg
- Výchozí pozice: 23%
hraniční
Přepněte na kartu Návrh a do každého rohu přidejte poloměr ohraničení.
- Zaoblené rohy: 2vw ve všech rozích.
Stínová krabička
Přidejte také stín pole.
- Shadow Box: Druhá možnost
- Stín pole Horizontální poloha: 6px
- Box Stínová svislá poloha: -10px
- Box Force Blur Force: 50px
transformátor
Na menších velikostech obrazovky budeme muset přemístit sloupec pomocí vlastních hodnot převodu transformace.
- Přeložit transformátor:
- Tablet + telefon: 60vw
přetečení
Nakonec upravte nastavení přetečení.
- Vodorovné a svislé přepady: viditelné
Přidejte obrazové moduly
Import výřezu poloprůhledný obrázek
Jakmile vytvoříte všechny parametry sloupce, je čas přidat moduly. Přidejte modul obrázku do sloupce 1 a nahrajte poloprůhledný obrázek podle vašeho výběru. Obrázky, které jsme použili, najdete ve složce se zipem, kterou jste si mohli stáhnout na začátku tohoto článku.
dimenzování
Vytvořte modul v plné šířce.
- Přepnout do režimu plné šířky: Ano
vzdálenost
Poté přidejte hodnoty vlastního okraje a výplně.
- Horní okraj:
- Kancelář: -11vw
- Tablet + telefon: -24vw
- Výplň vlevo a vpravo:
- Kancelář: 5vw
- Tablet + telefon: 20vw
Proměňte žebřík ve vznášející se
Přidáme do obrazu efekt jemného přechodu pomocí možnosti transformace měřítka v nastavení transformace.
- Měřítko transformace na Hover: 120% na obou osách.
Z-index
Abyste zajistili, že se obrázek zobrazí v horní části sloupce, zvyšte hodnotu indexu z na kartě Upřesnit.
- Z-Index: 1
Duplikujte a přetáhněte obrazové moduly
Nyní klonujte modul obrazu dvakrát a umístěte duplikáty do zbývajících dvou sloupců. V kabelovém režimu je tento proces snazší.
- Začněte duplikováním obrazového modulu dvakrát
- Poté přetáhněte nové obrazové moduly do sloupců 2 a 3.
- Stáhněte si různé obrázky
Přidejte textové moduly
Přidat obsah H3
Pod obrázek ve sloupci 1 přidejte textový modul a vložte nějaký obsah H3 dle vašeho výběru.
Název 3 Text
Přepněte na kartu design a použijte styl na nastavení textu H3.
- Název textu: H3
- H3 Písmo: Doppio One
- H3 Hmotnost písma: tučně
- H3 Zarovnání: střed
- H3 Barva textu: bílá #ffffff
- H3 Velikost textu:
- Kancelář: 1.8vw
- Tablet: 5vw
- Telefon: 6vw
Duplikujte a přetáhněte textové moduly
Klonujte textový modul dvakrát a umístěte duplikáty do zbývajících dvou sloupců.
- Začněte duplikováním textových modulů dvakrát.
- Poté je přetáhněte pod moduly obrázků ve sloupcích 2 a 3.
- Změň obsah v každém novém textovém modulu
Přidejte textové moduly
Přidat obsah
Pod modul nadpisu přidejte nový textový modul. Přidejte obsah odstavce do oblasti obsahu.
Texty
Nyní upravte text následujícím způsobem.
- Text písma: Open Sans
- Barva textu: bílá #ffffff
- Velikost textu:
- Kancelář: 0.6vw
- Tablet: 2vw
- Telefon: 2.8vw
- Výška řádku textu: 2.2em
vzdálenost
Chcete-li text vystředit, upravte rozestupy modulu následujícím způsobem.
- Dolní okraj:
- Kancelář: 5vw
- Tablet + telefon: 10vw
- Polstrování vlevo a vpravo
- Kancelář: 5vw
- Tablet + telefon: 14vw
Duplikujte a přetáhněte textové moduly
Klonujte textový modul dvakrát a přetáhněte duplikáty do zbývajících dvou sloupců.
- Začněte duplikováním textových modulů dvakrát
- Poté duplikáty umístěte do sloupců 2 a 3
- Změňte obsah každého duplikátu
Přidání tlačítkových modulů
Přidat obsah
Pojďme na poslední modul! Přidejte do tlačítka 1 tlačítko s kopií dle vašeho výběru.
Přidání odkazu
Vložte odkaz do možností odkazu modulu.
zarovnání
Nyní zarovnejte tlačítkový modul.
- Zarovnání: střed
Styly tlačítek
Poté tlačítko zavolejte následujícím způsobem.
- Velikost textu tlačítka:
- Kancelář: 1vw
- Tablet: 2vw
- Telefon: 3vw
- Barva textu tlačítka: jasně modrá #2a4eed
- Barva pozadí tlačítka: bílá #ffffff
- Poloměr ohraničení tlačítka: 50vw
- Tlačítko písmo: Double One
- Hmotnost písma: tučné
- Barva tlačítek: jasně modrá #2a4eed
vzdálenost
Tvarujte tlačítko a v dolní části vytvořte překrytí přidáním vlastních hodnot okrajů a výplní v nastavení mezer.
- Dolní okraj:
- Kancelář: -1.7vw
- Tablet: -4vw
- Telefon: -6vw
- Čalounění horní a dolní:
- Kancelář: 1vw
- Tablet + telefon: 3vw
- Polstrování vlevo a vpravo
- Kancelář: 4vw
- Tablet + telefon: 10vw
Stínová krabička
V neposlední řadě přidejte do tlačítka jemný stín.
- Stín pole: první možnost
- Stín vodorovné polohy pole: 0px
- Stín vertikální polohy pole: 2px
- Box Force Blur Force: 50px
Duplikovat a přetáhnout tlačítka moduly
Stejně jako u předchozích modulů klonujte tlačítko dvakrát a umístěte duplikáty do zbývajících dvou sloupců řádku.
- Klonovací modul dvakrát klonujte
- Umístěte duplikáty do sloupců 2 a 3
Tlačítko 2 Text a barva ikony
Ve sloupci 2 změňte barvu ikony tlačítka a modulu tlačítka.
- Barva textu tlačítka: Zelená # 1ba038
- Barva ikony: # 1ba038
Tlačítko 3 Text a barva ikony
Totéž udělejte s tlačítkem v posledním sloupci a máte hotovo!
- Barva textu tlačítek: Oranžová #f0562c
- Barva ikony: # f0562c
Dokončete
V tomto článku jsme vám ukázali, jak používat poloprůhledné obrázky k vytvoření úžasného návrhu sloupce CTA. Použili jsme nastavení přetečení sloupců divi aby se obrázky a tlačítka plynule překrývaly. Zkuste tento design použít ve svém dalším projektu divi a dejte nám vědět, jak to dopadlo v sekci komentářů!
