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.

Blurb divi designLad 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%

Baggrund divi sektion

afstand

Skift til fanen Design, og juster påfyldningen i afstandsindstillingerne.

  • Top og bund polstring
    • Kontor: 0vw
  • Polstring I Strømper
    • Tablet + telefon: 70vw

Konfigurering af polstring af divisektionTilføj en ny linje

Kolonne struktur

Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:

Tilføj en ny divi linjedimensionering

Justér derefter bredden og maksimal bredde på linjen.

  • Bredde: 100%
  • Maksimal bredde 100%

Nexopos størrelse

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.

Tilpasning af tekstmodul

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

Wordpress tekst modulkonfigurationTitel 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

Tilpas ved hovedafdelingenafstand

Og tilføj lidt polstring øverst.

  • Top polstring: 212px

Tilpasning af tekstmodulpolstring

Tilføj et divisionsmodul

synlighed

Under tekstmodulet skal du tilføje et delingsmodul og indstille synligheden til "Ja".

  • Synlighed: ja

Vis divideringsmodul

Linje

Skift derefter farven på separatoren.

  • Linjefarve: Mørkegrå #545454

Tilpas farven på divi-linjen

dimensionering

Juster nu separatorens størrelse, så den ser mindre ud.

  • Separatorvægt: 4px
  • Bredde: 9%
  • Justering af modulet: center

Tilpas divi-tilpasning

afstand

Tilføj også en negativ topmargin.

  • Øvre margen:
    • Kontor: -40px
    • Tablet + telefon: -15px

Negativ margen modul divider divi

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.

Række har 3 kolonner divi

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%

Indstilling af parameter for divi-linie

dimensionering

Juster nu størrelsen på linjen.

  • Bredde: 100%
  • Maksimal bredde: 100%

Divi linjestørrelseafstand

Gå derefter til afstandsindstillingerne og tilføj tilpassede polstringsværdier.

  • øvre polstring: 22vw
  • Bundpolstring: 10vw
  • Polstring af venstre og højre: 10vw

Konfiguration af polstring af divi line

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%

Konfiguration af gradientdelingen

Border

Definér derefter de afrundede hjørner af kolonnerne i grænseindstillingerne.

  • Rundede hjørner: 2vw i alle hjørner

Kolonne afrundet kantkonfiguration

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

Kolonne 1 skyggekonfiguration

overløb

Sørg for, at overløbene i søjlen også er synlige.

  • Horisontalt og lodret overløb: synlig

Konfiguration af Divi-kolonneoverløb

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%

Anden kolonne divi-indstilling

Border

Tilføj også en kantradius til kolonnen.

  • Rundede hjørner: 2vw ved de fire hjørner

Kolonnekonfiguration 2 afrundet divi

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

Kolonneskygge-konfiguration 2 divi

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

Søjlepositionskonfiguration 2 divi

overløb

Synligg også overløbene i denne kolonne.

  • Vandret og lodret overløb: synlig

Kolonnesynlighedskonfiguration 2 divi3 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%

Baggrundskonfiguration kolonne 3 diviBorder

Skift til fanen Design, og tilføj en kantradius til hvert hjørne.

  • Rundede hjørner: 2vw på alle hjørner.

Afrundet kantkonfiguration divi kolonne 3Skyggeæ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

Grænsedivi-konfigurationskolonne 3

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

Divi modul transformation

overløb

Endelig skal du justere overløbsindstillingerne.

  • Vandret og lodret overløb: synlig

Divi overløbskonfiguration

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.

Tilføj et gennemsigtigt divi-billede

dimensionering

Lav modulet i fuld bredde.

  • Skift til tilstand i fuld bredde: Ja

Skift til fuld bredde

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

Polstringskonfiguration billedmodul divi

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.

Konverter til svævende divi-modulbillede

Z-Index

For at sikre, at billedet vises øverst i kolonnen, skal du øge z-indeksværdien på fanen Avanceret.

  • Z-indeks: 1

Zindex konfigurations divi billedmodul

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

Kopier og flyt et billedmodul

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.

Tilføj divi-modultekst

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

Divi tekst modul parameter

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

Kopier divi-tekstmodulet

Tilføj tekstmoduler

Tilføj indhold

Tilføj et nyt tekstmodul under titelmodulet. Tilføj afsnitindhold i indholdsområdet.

Tilføj en divi-modultekst

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

Konfigurationsbeskrivelse divi-modul

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

Divi layoutKopier 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

Kopier tekstmodulet i en anden divikolonneTilfø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 divi-knap-modul

Tilføj et link

Indsæt et link i modulets linkindstillinger.

Konfiguration af link til Divi-modultilpasning

Justér nu knapmodulet.

  • Justering: centrum

Konfiguration af justering af Divi-knapmodul

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

Divi-modulets farvekonfiguration

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

afstandsknap

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

Konfiguration af skygge modul divi

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

Duplikat divi knap modulKnap 2 Ikontekst og farve

Skift farve og knapmodulikonikon i kolonne 2.

  • Knaptekstfarve: Grøn # 1ba038
  • Ikonfarve: # 1ba038

Divi knap modul

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

Divi-knapparameter

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!