Sa më tërheqës vizualisht të jetë CTA, aq më e mirë është shansi që shkalla e konvertimit të jetë. Ka shumë mënyra për të hartuar CTA-të tuaja, por në këtë artikull, ne do t'ju tregojmë se si të krijoni modele mahnitëse të kolonave CTA me imazhe gjysmë transparente dhe mbivendosje të kolonave. Imazhet gjysmë transparente mund t’i gjeni në dosjen e shkarkimit më poshtë, por mos ngurroni të përdorni imazhe të tjera. Ju gjithashtu do të jeni në gjendje të shkarkoni skedarin JSON falas!
Le të shkojnë.
previews
Para se të zhyteni në tutorial, le të hedhim një vështrim të shpejtë se si duket në madhësi të ndryshme të ekranit.
Le të fillojmë rikrijimin!
Shto një seksion të ri
Contexte
Filloni duke krijuar një faqe të re ose duke shtuar një seksion të ri të rregullt në një faqe ekzistuese. Pastaj shkoni te seksioni i cilësimeve dhe shtoni një sfond të gradientit.
- Sfondi: gradient
- Shkallëzim ngjyrash gradient: gri shumë e lehtë #efefef
- Ngjyra e dyfishtë e sfondit: E bardhë #ffffff
- Lloji i gradientit: Radial
- Drejtimi radial: qendër
- Pozicioni fillestar: 52%
- Pozicioni përfundimtar: 50%
ndarje
Kaloni në skedën Design dhe rregulloni mbushjen në cilësimet e hapësirës.
- Mbushje e sipërme dhe e poshtme
- Zyra: 0vw
- Tapiceri në çorape
- Tableta + Telefon: 70vw
Shto një rresht të ri
Struktura e kolonës
Vazhdoni të shtoni një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pastaj rregulloni gjerësinë dhe gjerësinë maksimale të rreshtit.
- Gjerësia: 100%
- Gjerësia maksimale 100%
Shto një modul teksti
Shtoni përmbajtjen H2 dhe tekstuale
Është koha për të shtuar module! Së pari, shtoni një modul teksti dhe futni disa përmbajtje H2 dhe paragrafët e zgjedhjes suaj.
Tekst
Kaloni në skedën e dizajnit dhe stiloni tekstin si më poshtë:
- Teksti i shkronjave: Sans Open
- Shtrirja e tekstit: qendra
- Ngjyra e tekstit: Jeshile #5bba1b
- Madhësia e tekstit:
- Zyra: 1.2vw
- Tableta: 2.8vw
- Telefon: 3.6vw
- Ndarja e shkronjave të tekstit: 0.2vw
- Lartësia e vijës së tekstit: 1.8em
Titulli Teksti 2
Pas stilimit të tekstit paragrafi, stiloni gjithashtu tekstin H2.
- Seksioni: H2
- H2 Pesha e shkronjave: Doppio One
- Përshtatja e tekstit H2: Qendra
- Ngjyra e tekstit H2: #3d3d3d
- H2 Madhësia e tekstit:
- Zyra: 4.4vw
- Tableta: 5.9vw
- Telefon: 6.9vw
ndarje
Dhe shtoni një mbushje të vogël në krye.
- Mbushja e sipërme: 212px
Shto një modul të ndarjes
dukshmëri
Nën modulin Tekst, shtoni një modul të ndarjes dhe vendosni dukshmërinë në "Po".
- Dukshmëria: po
Linjë
Ndryshoni ngjyrën e ndarësit atëherë.
- Ngjyra e linjës: Gri e errët #545454
sizing
Tani, rregulloni madhësinë e ndarësit në mënyrë që të duket më e vogël.
- Pesha e ndarësit: 4px
- Gjerësia: 9%
- Shtrirja e modulit: qendra
ndarje
Shtoni gjithashtu një diferencë të lartë negative.
- Marzhi i sipërm:
- Zyra: -40px
- Tableta + Telefon: -15px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri me tre kolona me madhësi të barabartë. Kjo do të jetë baza për hartimin e kolonës CTA.
Contexte
Para se të shtoni modulet, shtoni një gradient në sfondin e parametrave të rreshtit.
- Sfondi: gradient
- Gradient i ngjyrave të sfondit 1: #ffffff i bardhë
- Ngjyra e dyfishtë e sfondit gradient: transparent
- Lloji i gradientit: Radial
- Qendra drejtuese radiale
- Pozicioni fillestar: 42%
- Pozicioni përfundimtar: 50%
sizing
Tani, rregulloni madhësinë e rreshtit.
- Gjerësia: 100%
- Gjerësia maksimale: 100%
ndarje
Pastaj shkoni te cilësimet e ndarjes dhe shtoni vlera të personalizuara të mbushjes.
- tapiceri e sipërme: 22vw
- Mbushja e poshtme: 10vw
- Mbushja e majtë dhe e djathtë: 10vw
Cilësimet e kolonës 1
Contexte
Vazhdoni duke hapur kolonën 1 dhe duke shtuar një sfond gradient.
- Sfondi: gradient
- Ngjyra e sfondit gradient: Blu #2a4eed
- Ngjyra e dyfishtë e sfondit gradual: blu e çelët #91f5f7
- Lloji i gradientit: linear
- Drejtimi Gradient: 38deg
- Pozicioni fillestar: 23%
kufi
Pastaj përcaktoni qoshet e rrumbullakosura të kolonave në mjediset kufitare.
- Qoshet e rrumbullakosura: 2vw në të gjitha qoshet
Kuti me hije
Shtoni gjithashtu një hije delikate të kutisë gjithashtu.
- Shadow Box: Opsioni i dytë
- Hija e kutisë Pozita horizontale: 6px
- Kuti Pozicioni vertikal i hijes: -10px
- Kutia Shadow Blur Force: 50px
përplot
Sigurohuni që tejkalimet e kolonës të jenë gjithashtu të dukshme.
- Mbipesha horizontale dhe vertikale: e dukshme
Cilësimet e kolonës 2
Contexte
Shkoni në kolonën e dytë dhe shtoni sfondin vijues të gradientit:
- Sfondi: gradient
- Ngjyra e gradientit të gradientit të sfondit: #1ba038
- Shkalla e sfondit me dy ngjyra: #c6f727
- Lloji i gradientit: linear
- Drejtimi Gradient: 38deg
- Pozicioni fillestar: 23%
kufi
Shtoni gjithashtu një rreze kufitare në kolonën.
- Qoshet e rrumbullakosura: 2vw në katër qoshet
Kuti me hije
Me një hije delikate të kutisë.
- Shadow Box: Opsioni i dytë
- Hija e kutisë Pozita horizontale: 6px
- Kuti Pozicioni vertikal i hijes: -10px
- Kutia Shadow Blur Force: 50px
transformator
Kjo kolonë është pak më e lartë se të tjerat. Për të krijuar këtë efekt, ne do të rregullojmë cilësimet e shndërrimit të transformimit për kolonën 2.
- Përkthimi i Transformatorit:
- Zyra: -8vw, boshti y
- Tableta + Telefon: 30vw, boshti Y
përplot
Bëni gjithashtu të dukshme tejkalimet e kësaj kolone.
- Përmbytjet horizontale dhe vertikale: të dukshme
Cilësimet e kolonës 3
Contexte
Le të kalojmë në kolonën e fundit dhe të fundit! Shtoni një sfond gradient.
- Sfondi: gradient
- Ngjyra e sfondit gradient një: #f0562c
- Shkalla e sfondit me dy ngjyra: #f1a526
- Lloji i gradientit: linear
- Drejtimi Gradient: 38deg
- Pozicioni fillestar: 23%
kufi
Kaloni në skedën Design dhe shtoni një rreze kufiri në çdo cep.
- Qoshet e rrumbullakosura: 2vw në të gjitha qoshet.
Kuti me hije
Shtoni gjithashtu një hije kuti gjithashtu.
- Shadow Box: Opsioni i dytë
- Hija e kutisë Pozita horizontale: 6px
- Kuti Pozicioni vertikal i hijes: -10px
- Kutia Shadow Blur Force: 50px
transformator
Në madhësi më të vogla të ekranit do të na duhet të vendosim përsëri kolonën duke përdorur vlerat e konvertimit të transformimit të personalizuar.
- Përkthimi i Transformatorit:
- Tableta + Telefon: 60vw
përplot
Në fund, rregulloni cilësimet e rrjedhës.
- Përmbytjet horizontale dhe vertikale: të dukshme
Shtoni module të imazhit
Importoni një imazh gjysmë transparent të prerjes
Pasi të keni bërë të gjithë parametrat e kolonës, është koha të shtoni module. Shtoni një modul imazhi në kolonën 1 dhe ngarkoni një imazh gjysmë transparent të zgjedhjes suaj. Imazhet që kemi përdorur mund t'i gjeni në dosjen zipped që keni mundur të shkarkoni në fillim të këtij artikulli.
sizing
Bëni modulin me gjerësi të plotë.
- Kaloni në modalitetin e gjerësisë së plotë: Po
ndarje
Pastaj shtoni diferencë me porosi dhe mbushni vlerat.
- Marzhi i sipërm:
- Zyra: -11vw
- Tableta + Telefon: -24vw
- Mbushja majtas dhe djathtas:
- Zyra: 5vw
- Tableta + Telefon: 20vw
Kthejeni shkallët në një pezull
Ne shtojmë një efekt hollë hover në imazh duke përdorur opsionin e transformimit të shkallës në cilësimet e transformimit.
- Shndërroni shkallën në Hover: 120% në të dy akset.
Z-Index
Për të siguruar që imazhi të shfaqet në krye të kolonës, rritni vlerën e indeksit z në skedën Advanced.
- Z-Indeksi: 1
Kopjoni dhe tërhiqni modulet e imazhit
Tani klononi modulin e imazhit dy herë dhe vendosni kopjimet në dy kolonat e mbetura. Ky proces është më i lehtë në modalitetin Wired.
- Filloni duke kopjuar modulin e figurës dy herë
- Pastaj tërhiqni modulet e reja të imazhit në kolonat 2 dhe 3.
- Shkarkoni imazhe të ndryshme
Shtoni modulet e tekstit
Shto përmbajtje H3
Nën imazhin në kolonën 1, shtoni një modul teksti dhe futni disa përmbajtje H3 sipas zgjedhjes suaj.
Titulli Teksti 3
Kaloni në skedën e dizajnit dhe aplikoni një stil në cilësimet e tekstit H3.
- Titulli i tekstit: H3
- Font H3: Doppio Një
- H3 Pesha e shkronjave: e guximshme
- Rreshtimi H3: qendër
- H3 Ngjyra e tekstit: E bardhë #ffffff
- H3 Madhësia e tekstit:
- Zyra: 1.8vw
- Tableta: 5vw
- Telefon: 6vw
Kopjoni dhe tërhiqni modulet e tekstit
Klononi modulin e tekstit dy herë dhe vendosni kopjimet në dy kolonat e mbetura.
- Filloni duke kopjuar modulet e tekstit dy herë.
- Pastaj terhiqini ato nën modulet e figurës në kolonat 2 dhe 3.
- Ndryshoni përmbajtje në çdo modul të ri teksti
Shtoni modulet e tekstit
Shto përmbajtje
Nën modulin e titullit, shtoni një modul të ri teksti. Shtoni përmbajtjen e paragrafit në fushën e përmbajtjes.
Tekst
Tani, stiloni tekstin si më poshtë.
- Teksti i shkronjave: Sans Open
- Ngjyra e tekstit: Bardhë #ffffff
- Madhësia e tekstit:
- Zyra: 0.6vw
- Tableta: 2vw
- Telefon: 2.8vw
- Lartësia e vijës së tekstit: 2.2em
ndarje
Për të përqendruar tekstin, rregulloni hapësirën e modulit si më poshtë.
- Marzhi i ulët:
- Zyra: 5vw
- Tableta + Telefon: 10vw
- Mbushje majtas dhe djathtas
- Zyra: 5vw
- Tableta + Telefon: 14vw
Kopjoni dhe tërhiqni modulet e tekstit
Klononi modulin e tekstit dy herë dhe tërhiqni kopjimet në dy kolonat e mbetura.
- Filloni duke kopjuar modulet e tekstit dy herë
- Pastaj vendosni kopjimet në kolonat 2 dhe 3
- Ndryshoni përmbajtjen e secilës kopje
Shtoni modulet e butonit
Shto përmbajtje
Le të shkojmë në modulin e fundit! Shtoni një modul butoni në kolonën 1 me një kopje të zgjedhjes suaj.
Shto një lidhje
Vendosni një lidhje në opsionet e lidhjes së modulit.
radhitje
Tani rreshtoni modulin e butonit.
- Rreshtimi: qendër
Stilet e butonit
Pastaj, thirrni butonin si më poshtë.
- Madhësia e tekstit të butonit:
- Zyra: 1vw
- Tableta: 2vw
- Telefon: 3vw
- Ngjyra e tekstit të butonit: Blu e ndritshme #2a4eed
- Ngjyra e sfondit të butonit: E bardhë #ffffff
- Rrezja e kufirit të butonit: 50vw
- Shkronja e butonit: Double One
- Pesha e shkronjave: E theksuar
- Ngjyra e butonave: Blu e ndritshme #2a4eed
ndarje
Formoni butonin dhe krijoni një mbivendosje në pjesën e poshtme duke shtuar vlerat e personalizuara të marzhit dhe mbushjes në cilësimet e hapësirës.
- Marzhi i ulët:
- Zyra: -1.7vw
- Tableta: -4vw
- Telefon: -6vw
- Mobilje nga lart dhe poshtë:
- Zyra: 1vw
- Tableta + Telefon: 3vw
- Mbushje majtas dhe djathtas
- Zyra: 4vw
- Tableta + Telefon: 10vw
Kuti me hije
E fundit, shtoni një hije delikate të kutisë në buton.
- Hija e kutisë: opsioni i parë
- Hija e pozicionit horizontal të kutisë: 0px
- Hija e pozicionit vertikal të kutisë: 2px
- Kutia Shadow Blur Force: 50px
Duplikoni dhe modulet e butonit
Ashtu si me modulet e mëparshme, klononi butonin dy herë dhe vendosni kopjimet në dy kolonat e mbetura të rreshtit.
- Klonojeni modulin e butonit dy herë
- Vendosni kopjimet në kolonat 2 dhe 3
Butoni 2 Teksti dhe ngjyra e ikonës
Ndryshoni ngjyrën e ikonës së modulit të butonit dhe butonit në kolonën 2.
- Ngjyra e tekstit të butonit: Jeshil # 1ba038
- Ngjyra e ikonës: # 1ba038
Butoni 3 Teksti dhe ngjyra e ikonës
Bëni të njëjtën gjë me butonin në kolonën e fundit dhe do të keni mbaruar!
- Ngjyra e tekstit të butonave: Portokalli #f0562c
- Ngjyra e ikonës: # f0562c
Për ta përfunduar
Në këtë artikull, ne ju treguam se si të përdorni imazhe gjysmë transparente për të krijuar një dizajn mahnitës të kolonës CTA. Ne përdorëm cilësimet e tejmbushjes së kolonës Divi në mënyrë që imazhet dhe butonat të mbivendosen pa probleme. Provoni ta përdorni këtë dizajn në projektin tuaj të ardhshëm Divi dhe na tregoni se si shkon në seksionin e komenteve!
