Ju mer visuellt tilltalande CTA är, desto bättre är chansen att omvandlingsfrekvensen blir. Det finns många sätt att designa dina CTA: er, men i den här artikeln kommer vi att visa dig hur du skapar fantastiska CTA-kolumnmallar med halvtransparenta bilder och kolumnöverlägg. Du hittar de halvtransparenta bilderna i nedladdningsmappen nedan, men använd gärna andra bilder. Du kommer också att kunna ladda ner JSON-filen gratis!
Låt oss gå.
Smakprov
Innan vi dyker in i handledningen, låt oss ta en snabb titt på hur det ser ut på olika skärmstorlekar.
Låt oss börja återskapa!
Lägg till en ny sektion
sammanhang
Börja med att skapa en ny sida eller lägga till ett nytt vanligt avsnitt på en befintlig sida. Gå sedan till inställningsavsnittet och lägg till en lutningsbakgrund.
- Bakgrund: lutning
- Gradient färggradient: mycket ljusgrå #efefef
- Bakgrundsfärg två: Vit #ffffff
- Lutningstyp: Radial
- Radiell riktning: centrum
- Startposition: 52%
- Slutlig position: 50%
avstånd
Byt till fliken Design och justera fyllningen i avståndsinställningarna.
- Övre och nedre stoppning
- Kontor: 0vw
- Klädsel I Strumpor
- Tablet + telefon: 70vw
Lägg till en ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
dimensionering
Justera sedan bredden och maximala bredden på linjen.
- Bredd: 100%
- Max bredd 100%
Lägg till en textmodul
Lägg till H2 och textinnehåll
Det är dags att lägga till moduler! Lägg först till en textmodul och infoga några innehåll H2 och stycken som du väljer.
Texte
Byt till fliken design och utforma texten enligt följande:
- Fonttext: Open Sans
- Justering av texten: centrum
- Färg på text: Grön #5bba1b
- Textstorlek:
- Kontor: 1.2vw
- Tablet: 2.8vw
- Telefon: 3.6vw
- Spacing av textbokstäver: 0.2vw
- Höjd på textrad: 1.8em
Titel 2 Text
När du har stylat stycketeksten, formatera också texten H2.
- Avsnitt: H2
- H2 Teckensnitt vikt: Doppio One
- H2 textjustering: Center
- Textfärg H2: #3d3d3d
- H2 Textstorlek:
- Kontor: 4.4vw
- Tablet: 5.9vw
- Telefon: 6.9vw
avstånd
Och lägg till lite stoppning längst upp.
- Toppad padding: 212px
Lägg till en divisionsmodul
synlighet
Lägg till en delningsmodul under textmodulen och ställ in synligheten till "Ja".
- Synlighet: ja
Linje
Ändra sedan separatorns färg.
- Linjefärg: Mörkgrå #545454
dimensionering
Justera nu separatorns storlek så att den ser mindre ut.
- Separatorvikt: 4px
- Bredd: 9%
- Justering av modulen: centrum
avstånd
Lägg också till en negativ toppmarginal.
- Övre marginal:
- Kontor: -40px
- Tablet + telefon: -15px
Lägg till en ny rad
Kolumnstruktur
Fortsätt genom att lägga till en ny rad med tre kolumner av samma storlek. Detta kommer att ligga till grund för utformningen av CTA-kolumnen.
sammanhang
Innan du lägger till moduler lägger du till en lutning till bakgrunden för linjens parametrar.
- Bakgrund: lutning
- 1 bakgrundsfärggradient: vit #ffffff
- Lutningsbakgrundsfärg två: transparent
- Lutningstyp: Radial
- Radiell styrcentral
- Startposition: 42%
- Slutlig position: 50%
dimensionering
Justera nu storleken på linjen.
- Bredd: 100%
- Maximal bredd: 100%
avstånd
Gå sedan till avståndsinställningarna och lägg till anpassade utfyllnadsvärden.
- övre klädsel: 22vw
- Botten stoppning: 10vw
- Polstring på vänster och höger: 10vw
1 Kolumninställningar
sammanhang
Fortsätt genom att öppna 1-kolumnen och lägga till en lutningsbakgrund.
- Bakgrund: lutning
- Bakgrundsfärg på lutning: blå #2a4eed
- Bakgrundsfärg på lutning två: ljusblå #91f5f7
- Lutningstyp: linjär
- Gradientriktning: 38deg
- Startposition: 23%
gräns
Definiera sedan de avrundade hörnen på kolumnerna i gränsinställningarna.
- Rundade hörn: 2vw i alla hörn
Skugga låda
Lägg till en subtil lådeskärm också.
- Box Shadow: Andra alternativet
- Boxens skugga Horisontell position: 6px
- Box Shadow Vertikal Position: -10px
- Box Shadow Blur Force: 50px
överflöden
Se till att kolumnens överflöde också är synliga.
- Horisontellt och vertikalt överflöde: synligt
2 Kolumninställningar
sammanhang
Gå till den andra kolumnen och lägg till följande gradientbakgrund:
- Bakgrund: lutning
- Bakgrundsgradientfärg en: #1ba038
- Bakgrundsgradient med två färger: #c6f727
- Lutningstyp: linjär
- Gradientriktning: 38deg
- Startposition: 23%
gräns
Lägg också till en kantradie i kolumnen.
- Rundade hörn: 2vw vid de fyra hörnen
Skugga låda
Med en subtil lådeskärm.
- Box Shadow: Andra alternativet
- Boxens skugga Horisontell position: 6px
- Box Shadow Vertikal Position: -10px
- Box Shadow Blur Force: 50px
Transformator
Den här kolumnen är lite högre än de andra. För att skapa denna effekt ska vi justera omvandlingsinställningarna för kolumn 2.
- Transformator Translate:
- Kontor: -8vw, y-axel
- Tablet + telefon: 30vw, Y-axel
överflöden
Synligg också överflödena i denna kolumn.
- Horisontella och vertikala överflöden: synliga
3 Kolumninställningar
sammanhang
Låt oss gå vidare till den sista och sista kolumnen! Lägg till en lutningsbakgrund.
- Bakgrund: lutning
- Bakgrundsfärg gradient en: #f0562c
- Bakgrundsgradient med två färger: #f1a526
- Lutningstyp: linjär
- Gradientriktning: 38deg
- Startposition: 23%
gräns
Byt till fliken Design och lägg till en kantradie i varje hörn.
- Rundade hörn: 2vw på alla hörn.
Skugga låda
Lägg till en lådeskärm också.
- Box Shadow: Andra alternativet
- Boxens skugga Horisontell position: 6px
- Box Shadow Vertikal Position: -10px
- Box Shadow Blur Force: 50px
Transformator
På mindre skärmstorlekar måste vi flytta kolumnen med anpassade omvandlingsvärden.
- Transformator Translate:
- Tablet + telefon: 60vw
överflöden
Justera slutligen överflödesinställningarna.
- Horisontella och vertikala överflöden: synliga
Lägg till bildmoduler
Importera en utskuren halvtransparent bild
När du har gjort alla kolumnparametrar är det dags att lägga till moduler. Lägg till en bildmodul i kolumn 1 och ladda upp en halvtransparent bild efter eget val. Du hittar bilderna vi använde i den zippade mappen som du kunde ladda ner i början av den här artikeln.
dimensionering
Gör modulen i full bredd.
- Byt till fullbreddsläge: Ja
avstånd
Lägg sedan till anpassad marginal och fyllvärden.
- Övre marginal:
- Kontor: -11vw
- Tablet + telefon: -24vw
- Polstring åt vänster och höger:
- Kontor: 5vw
- Tablet + telefon: 20vw
Förvandla stegen till en svävare
Vi lägger till en subtil svävareffekt till bilden med hjälp av alternativet för transformeringsskala i transforminställningarna.
- Transform skala på muspekaren: 120% på båda axlarna.
Z-index
För att säkerställa att bilden visas högst upp i kolumnen, öka z-indexvärdet på fliken Avancerat.
- Z-index: 1
Duplicera och dra bildmoduler
Klona nu bildmodulen två gånger och placera dubbletterna i de återstående två kolumnerna. Denna process är enklare i trådbundet läge.
- Börja med att duplicera bildmodulen två gånger
- Dra sedan de nya bildmodulerna till kolumnerna 2 och 3.
- Ladda ner olika bilder
Lägg till textmoduler
Lägg till H3-innehåll
Lägg till en textmodul under bilden i kolumn 1 och infoga några innehåll H3 efter eget val.
Titel 3 Text
Byt till designfliken och använd en stil på H3-textinställningarna.
- Textens titel: H3
- H3 typsnitt: Doppio One
- H3 Teckensnitt vikt: fet stil
- H3 Justering: centrum
- H3 Textfärg: Vit #ffffff
- H3 Textstorlek:
- Kontor: 1.8vw
- Tablet: 5vw
- Telefon: 6vw
Duplicera och dra textmoduler
Klona textmodulen två gånger och placera dubbletterna i de två återstående kolumnerna.
- Börja med att duplicera textmodulerna två gånger.
- Dra dem sedan under bildmodulerna i kolumn 2 och 3.
- Ändra innehåll i varje ny textmodul
Lägg till textmoduler
Lägg till innehåll
Lägg till en ny textmodul under titelmodulen. Lägg till avsnittinnehåll i innehållsområdet.
Texte
Styla texten enligt följande.
- Fonttext: Open Sans
- Textfärg: Vit #ffffff
- Textstorlek:
- Kontor: 0.6vw
- Tablet: 2vw
- Telefon: 2.8vw
- Höjd på textrad: 2.2em
avstånd
För att centrera texten, justera modulens avstånd enligt följande.
- Lägre marginal:
- Kontor: 5vw
- Tablet + telefon: 10vw
- Polstring åt vänster och höger
- Kontor: 5vw
- Tablet + telefon: 14vw
Duplicera och dra textmoduler
Klona textmodulen två gånger och dra dubbletterna till de återstående två kolumnerna.
- Börja med att duplicera textmodulerna två gånger
- Placera sedan duplikaten i kolumnerna 2 och 3
- Ändra innehållet i varje duplikat
Lägg till knappmoduler
Lägg till innehåll
Låt oss gå till den sista modulen! Lägg till en knappmodul i 1-kolumnen med en kopia du väljer.
Lägg till en länk
Sätt i en länk i modulens länkalternativ.
uppriktning
Justera nu knappmodulen.
- Justering: centrum
Knappstilar
Ring sedan på knappen enligt följande.
- Storlek på knapptexten:
- Kontor: 1vw
- Tablet: 2vw
- Telefon: 3vw
- Knapptextfärg: Bright Blue #2a4eed
- Knapp Bakgrundsfärg: Vit #ffffff
- Radius för knappens kant: 50vw
- Knappsnitt: Double One
- Teckensnitt vikt: Fet
- Färgen på knapparna: Bright Blue #2a4eed
avstånd
Forma knappen och skapa en överlappning längst ner genom att lägga till anpassade marginal- och stoppningsvärden i avståndsinställningarna.
- Lägre marginal:
- Kontor: -1.7vw
- Tablet: -4vw
- Telefon: -6vw
- Klädsel topp och botten:
- Kontor: 1vw
- Tablet + telefon: 3vw
- Polstring åt vänster och höger
- Kontor: 4vw
- Tablet + telefon: 10vw
Skugga låda
Sist men inte minst lägger du till en subtil rutskärm på knappen.
- Box skugga: första alternativet
- Skugga på rutan horisontellt läge: 0px
- Shadow of the box vertikal position: 2px
- Box Shadow Blur Force: 50px
Duplicera och dra knappmoduler
Som med tidigare moduler klonar du in knappen två gånger och placerar dubbletterna i de återstående två kolumnerna på raden.
- Klona knappmodulen två gånger
- Placera dubbletterna i kolumnerna 2 och 3
Knapp 2 Ikontext och färg
Ändra knapp- och knappmodulikonfärg i kolumn 2.
- Knapptextfärg: Grön # 1ba038
- Ikonfärg: # 1ba038
Knapp 3 Ikontext och färg
Gör samma sak med knappen i den sista kolumnen så är du klar!
- Färg på texten på knapparna: Orange #f0562c
- Ikonfärg: # f0562c
För att avsluta
I den här artikeln visade vi dig hur du använder halvtransparenta bilder för att skapa en fantastisk CTA-kolumndesign. Vi använde inställningar för kolumnspill Divi så att bilder och knappar överlappar varandra sömlöst. Prova att använda denna design i ditt nästa projekt Divi och låt oss veta hur det går i kommentarsfältet!
