Jo mere visuelt tiltalende CTA er, desto bedre er chancen for konverteringsfrekvensen. Der er mange måder at designe dine CTA'er på, men i denne artikel vil vi vise dig, hvordan du opretter fantastiske CTA-kolonneskabeloner med semi-transparente billeder og kolonneoverlejringer. Du kan finde de halvgennemsigtige billeder i downloadmappen nedenfor, men du er velkommen til at bruge andre billeder. Du vil også være i stand til at downloade JSON-filen gratis!
Lad os gå.
previews
Før vi dykker ned i vejledningen, skal vi se hurtigt på, hvordan vi ser på forskellige skærmstørrelser.
Lad os begynde at genskabe!
Tilføj en ny sektion
contexte
Start med at oprette en ny side eller tilføje en ny almindelig sektion til en eksisterende side. Gå derefter til indstillingsafsnittet og tilføj en gradientbaggrund.
- Baggrund: gradient
- Gradient farvegradient: meget lys grå #efefef
- Baggrundsfarve to: Hvid #ffffff
- Gradienttype: Radial
- Radial retning: centrum
- Startposition: 52%
- Slutposition: 50%
afstand
Skift til fanen Design, og juster påfyldningen i afstandsindstillingerne.
- Top og bund polstring
- Kontor: 0vw
- Polstring I Strømper
- Tablet + telefon: 70vw
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Justér derefter bredden og maksimal bredde på linjen.
- Bredde: 100%
- Maksimal bredde 100%
Tilføj et tekstmodul
Tilføj H2 og tekstindhold
Det er tid til at tilføje moduler! Tilføj først et tekstmodul og indsæt nogle indhold H2 og afsnit efter eget valg.
Tekster
Skift til designfanen, og stil teksten som følger:
- Skrifttekst: Open Sans
- Justering af teksten: center
- Tekstfarve: Grøn #5bba1b
- Tekststørrelse:
- Kontor: 1.2vw
- Tablet: 2.8vw
- Telefon: 3.6vw
- Spacing af tekstbogstaver: 0.2vw
- Højde på tekstlinjen: 1.8em
Titel 2 Tekst
Når du har stylet afsnitsteksten, skal du også style teksten H2.
- Afsnit: H2
- H2 Skriftvægt: Doppio One
- H2 tekstjustering: Center
- Tekstfarve H2: #3d3d3d
- H2 Tekststørrelse:
- Kontor: 4.4vw
- Tablet: 5.9vw
- Telefon: 6.9vw
afstand
Og tilføj lidt polstring øverst.
- Top polstring: 212px
Tilføj et divisionsmodul
synlighed
Under tekstmodulet skal du tilføje et delingsmodul og indstille synligheden til "Ja".
- Synlighed: ja
Linje
Skift derefter farven på separatoren.
- Linjefarve: Mørkegrå #545454
dimensionering
Juster nu separatorens størrelse, så den ser mindre ud.
- Separatorvægt: 4px
- Bredde: 9%
- Justering af modulet: center
afstand
Tilføj også en negativ topmargin.
- Øvre margen:
- Kontor: -40px
- Tablet + telefon: -15px
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række med tre kolonner af samme størrelse. Dette vil være grundlaget for designet af CTA-kolonnen.
contexte
Før du tilføjer moduler, skal du tilføje en gradient til baggrunden for linjens parametre.
- Baggrund: gradient
- 1 baggrundsfarvegradient: hvid #ffffff
- Baggrundsfarve i gradient to: gennemsigtig
- Gradienttype: Radial
- Radialt styrecenter
- Startposition: 42%
- Slutposition: 50%
dimensionering
Juster nu størrelsen på linjen.
- Bredde: 100%
- Maksimal bredde: 100%
afstand
Gå derefter til afstandsindstillingerne og tilføj tilpassede polstringsværdier.
- øvre polstring: 22vw
- Bundpolstring: 10vw
- Polstring af venstre og højre: 10vw
1 kolonneindstillinger
contexte
Fortsæt ved at åbne 1-kolonnen og tilføje en gradientbaggrund.
- Baggrund: gradient
- Baggrundsfarve på gradient: blå #2a4eed
- Baggrundsfarve i gradient to: lyseblå #91f5f7
- Gradienttype: lineær
- Gradientretning: 38deg
- Startposition: 23%
Border
Definér derefter de afrundede hjørner af kolonnerne i grænseindstillingerne.
- Rundede hjørner: 2vw i alle hjørner
Skyggeæske
Tilføj også en subtil boksskygge.
- Box Shadow: Anden mulighed
- Kassens skygge Vandret position: 6px
- Box Skygge Lodret Position: -10px
- Box Shadow Blur Force: 50px
overløb
Sørg for, at overløbene i søjlen også er synlige.
- Horisontalt og lodret overløb: synlig
2 kolonneindstillinger
contexte
Gå til den anden kolonne, og tilføj følgende gradientbaggrund:
- Baggrund: gradient
- Baggrundsgradientfarve én: #1ba038
- To baggrundsgradient i farve: #c6f727
- Gradienttype: lineær
- Gradientretning: 38deg
- Startposition: 23%
Border
Tilføj også en kantradius til kolonnen.
- Rundede hjørner: 2vw ved de fire hjørner
Skyggeæske
Med en subtil boksskygge.
- Box Shadow: Anden mulighed
- Kassens skygge Vandret position: 6px
- Box Skygge Lodret Position: -10px
- Box Shadow Blur Force: 50px
Transformer
Denne kolonne er lidt højere end de andre. For at skabe denne effekt skal vi justere indstillingerne for transformationskonvertering til kolonne 2.
- Transformer Oversæt:
- Kontor: -8vw, y-akse
- Tablet + telefon: 30vw, Y-akse
overløb
Synligg også overløbene i denne kolonne.
- Vandret og lodret overløb: synlig
3 kolonneindstillinger
contexte
Lad os gå videre til den sidste og sidste kolonne! Tilføj en gradientbaggrund.
- Baggrund: gradient
- Baggrundsfarve på gradient en: #f0562c
- To baggrundsgradient i farve: #f1a526
- Gradienttype: lineær
- Gradientretning: 38deg
- Startposition: 23%
Border
Skift til fanen Design, og tilføj en kantradius til hvert hjørne.
- Rundede hjørner: 2vw på alle hjørner.
Skyggeæske
Tilføj også en kasseskygge.
- Box Shadow: Anden mulighed
- Kassens skygge Vandret position: 6px
- Box Skygge Lodret Position: -10px
- Box Shadow Blur Force: 50px
Transformer
På mindre skærmstørrelser bliver vi nødt til at placere kolonnen igen ved hjælp af tilpassede transformationskonverteringsværdier.
- Transformer Oversæt:
- Tablet + telefon: 60vw
overløb
Endelig skal du justere overløbsindstillingerne.
- Vandret og lodret overløb: synlig
Tilføj billedmoduler
Importer et udskåret semitransparent billede
Når du har lavet alle kolonneparametrene, er det tid til at tilføje moduler. Føj et billedmodul til kolonne 1, og upload et semi-transparent billede efter eget valg. Du kan finde de billeder, vi brugte i den zip-mappe, som du kunne downloade i starten af denne artikel.
dimensionering
Lav modulet i fuld bredde.
- Skift til tilstand i fuld bredde: Ja
afstand
Tilføj derefter tilpasset margen og udfyldningsværdier.
- Øvre margen:
- Kontor: -11vw
- Tablet + telefon: -24vw
- Polstring til venstre og højre:
- Kontor: 5vw
- Tablet + telefon: 20vw
Gør stigen til en svæver
Vi tilføjer en subtil svævereffekt til billedet ved hjælp af indstillingen for transformeringsskala i transformeringsindstillingerne.
- Transform skala på hover: 120% på begge akser.
Z-Index
For at sikre, at billedet vises øverst i kolonnen, skal du øge z-indeksværdien på fanen Avanceret.
- Z-indeks: 1
Kopier og træk billedmoduler
Klon nu billedmodulet to gange og placer duplikaterne i de resterende to kolonner. Denne proces er lettere i kablet tilstand.
- Start med at duplikere billedmodulet to gange
- Træk derefter de nye billedmoduler til kolonnerne 2 og 3.
- Download forskellige billeder
Tilføj tekstmoduler
Tilføj H3 indhold
Tilføj et tekstmodul under billedet i kolonne 1 og indsæt nogle indhold H3 efter eget valg.
Titel 3 Tekst
Skift til designfanen og anvend en stil til H3-tekstindstillingerne.
- Teksttitel: H3
- H3 Skrifttype: Doppio One
- H3 Skriftvægt: fed
- H3 Alignment: center
- H3 Tekstfarve: Hvid #ffffff
- H3 Tekststørrelse:
- Kontor: 1.8vw
- Tablet: 5vw
- Telefon: 6vw
Kopier og træk tekstmoduler
Klon tekstmodulet to gange, og anbring duplikaterne i de to resterende kolonner.
- Start med at duplikere tekstmodulerne to gange.
- Træk dem derefter under billedmodulerne i kolonne 2 og 3.
- Skift indhold i hvert nyt tekstmodul
Tilføj tekstmoduler
Tilføj indhold
Tilføj et nyt tekstmodul under titelmodulet. Tilføj afsnitindhold i indholdsområdet.
Tekster
Stil teksten nu som følger.
- Skrifttekst: Open Sans
- Tekstfarve: Hvid #ffffff
- Tekststørrelse:
- Kontor: 0.6vw
- Tablet: 2vw
- Telefon: 2.8vw
- Højde på tekstlinjen: 2.2em
afstand
For at centrere teksten skal du justere modulets afstand som følger.
- Nedre margen:
- Kontor: 5vw
- Tablet + telefon: 10vw
- Polstring til venstre og højre
- Kontor: 5vw
- Tablet + telefon: 14vw
Kopier og træk tekstmoduler
Klon tekstmodulet to gange, og træk duplikaterne til de resterende to kolonner.
- Start med at duplikere tekstmodulerne to gange
- Placer derefter duplikaterne i kolonnerne 2 og 3
- Skift indholdet af hver duplikat
Tilføj knapmoduler
Tilføj indhold
Lad os gå til det sidste modul! Føj et knapmodul til 1-kolonnen med en kopi efter eget valg.
Tilføj et link
Indsæt et link i modulets linkindstillinger.
tilpasning
Justér nu knapmodulet.
- Justering: centrum
Knapstilarter
Kald derefter på knappen som følger.
- Størrelse på knapteksten:
- Kontor: 1vw
- Tablet: 2vw
- Telefon: 3vw
- Knaptekstfarve: Bright Blue #2a4eed
- Knap Baggrundsfarve: Hvid #ffffff
- Radius af knappens kant: 50vw
- Knapfont: dobbelt én
- Skriftvægt: Fed
- Farven på knapperne: Bright Blue #2a4eed
afstand
Form knappen og opret en overlapning i bunden ved at tilføje tilpassede margen- og polstringsværdier i afstandsindstillingerne.
- Nedre margen:
- Kontor: -1.7vw
- Tablet: -4vw
- Telefon: -6vw
- Polstring top og bund:
- Kontor: 1vw
- Tablet + telefon: 3vw
- Polstring til venstre og højre
- Kontor: 4vw
- Tablet + telefon: 10vw
Skyggeæske
Sidst men ikke mindst, tilføj en subtil boksskygge til knappen.
- Boksskygge: første mulighed
- Skygge af boksen vandret position: 0px
- Skygge af boksen lodret position: 2px
- Box Shadow Blur Force: 50px
Kopier og træk knappemoduler
Som med tidligere moduler, skal du klone knappen to gange og placere duplikaterne i de resterende to kolonner på linjen.
- Klon knapmodulet to gange
- Placer duplikaterne i kolonnerne 2 og 3
Knap 2 Ikontekst og farve
Skift farve og knapmodulikonikon i kolonne 2.
- Knaptekstfarve: Grøn # 1ba038
- Ikonfarve: # 1ba038
Knap 3 Ikontekst og farve
Gør det samme med knappen i den sidste kolonne, og du er færdig!
- Farve på teksten på knapperne: Orange #f0562c
- Ikonfarve: # f0562c
At afslutte
I denne artikel viste vi dig, hvordan du bruger semi-transparente billeder til at skabe et fantastisk CTA-søjledesign. Vi brugte kolonneoverløbsindstillinger Divi så billeder og knapper overlapper hinanden problemfrit. Prøv at bruge dette design i dit næste projekt Divi og lad os vide, hvordan det går i kommentarfeltet!