Gå till innehållet

Använd transparenta bilder för att skapa fantastiska CTA-kolumnöverlägg med Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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.

Blurb divi designLå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%

Bakgrund divi avsnitt

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

Konfiguration av divisektionenLägg till en ny rad

Kolumnstruktur

Fortsätt lägga till en ny rad med följande kolumnstruktur:

Lägg till en ny divi-linjedimensionering

Justera sedan bredden och maximala bredden på linjen.

  • Bredd: 100%
  • Max bredd 100%

Nexopos storlek

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 lite H2-innehåll och stycken du vill ha.

Anpassning av textmodul

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

Wordpress textmodul stilkonfigurationTitel 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

Anpassa huvuddelningavstånd

Och lägg till lite stoppning längst upp.

  • Toppad padding: 212px

Anpassa vadderingen av textmodulen

Lägg till en divisionsmodul

synlighet

Lägg till en delningsmodul under textmodulen och ställ in synligheten till "Ja".

  • Synlighet: ja

Visa delningsmodul

Linje

Ändra sedan separatorns färg.

  • Linjefärg: Mörkgrå #545454

Anpassa färgen på divinjen

dimensionering

Justera nu separatorns storlek så att den ser mindre ut.

  • Separatorvikt: 4px
  • Bredd: 9%
  • Justering av modulen: centrum

Anpassa divi-inriktning

avstånd

Lägg också till en negativ toppmarginal.

  • Övre marginal:
    • Kontor: -40px
    • Tablet + telefon: -15px

Delningsdelare för negativ marginalmodul

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.

Rad har tre kolumner divi

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%

Parameterinställning för delningslinje

dimensionering

Justera nu storleken på linjen.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Bredd: 100%
  • Maximal bredd: 100%

Divi linjestorlekavstå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

Konfigurera stoppning av divi-linjen

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%

Konfiguration av lutningsdelningen

gräns

Definiera sedan de avrundade hörnen på kolumnerna i gränsinställningarna.

  • Rundade hörn: 2vw i alla hörn

Kolumn rundad kantkonfiguration

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

Skuggkonfiguration för kolumn 1

överflöden

Se till att kolumnens överflöde också är synliga.

  • Horisontellt och vertikalt överflöde: synligt

Konfiguration av Divi-kolumnöverflöde

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%

Andra kolumn divi inställning

gräns

Lägg också till en kantradie i kolumnen.

  • Rundade hörn: 2vw vid de fyra hörnen

Kolumnkonfiguration 2 rundad divi

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

Kolumnskuggkonfiguration 2 divi

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

Kolumnpositionskonfiguration 2 divi

överflöden

Synligg också överflödena i denna kolumn.

  • Horisontella och vertikala överflöden: synliga

Kolumn synlighet konfiguration 2 divi3 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%

Kolumn 3 divi bakgrundskonfigurationgräns

Byt till fliken Design och lägg till en kantradie i varje hörn.

  • Rundade hörn: 2vw på alla hörn.

Avrundad kantkonfiguration divi kolumn 3Skugga 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

Gränsdelkonfigurationskolumn 3

Transformator

På mindre skärmstorlekar måste vi flytta kolumnen med anpassade omvandlingsvärden.

  • Transformator Translate:
    • Tablet + telefon: 60vw

Divi-modultransformation

överflöden

Justera slutligen överflödesinställningarna.

  • Horisontella och vertikala överflöden: synliga

Konfiguration av Divi-överflöde

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Lägg till en transparent divi-bild

dimensionering

Gör modulen i full bredd.

  • Byt till fullbreddsläge: Ja

Byt till full bredd

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

Vadderingskonfigurationsbildmodul divi

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.

Konvertera till bilden för svävande divimodul

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

Zindex konfigurations divi-bildmodul

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

Duplicera och flytta en bildmodul

Lägg till textmoduler

Lägg till H3-innehåll

Lägg till en textmodul under bilden i kolumn 1 och infoga önskat H3-innehåll.

Lägg till text i divi-modul

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

Parameter för Divi-textmodul

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ållet i varje ny textmodul

Duplicera divi-textmodulen

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.

Lägg till text i divi-modul

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

Konfigurationsbeskrivning divi-modul

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

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

Duplicera textmodulen i en annan divikolumnLä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 divi-knappmodul

Lägg till en länk

Sätt i en länk i modulens länkalternativ.

Divi-modulens länkkonfigurationuppriktning

Justera nu knappmodulen.

  • Justering: centrum

Divi-knappmoduljusteringskonfiguration

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

Divi-modulens färgkonfiguration

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

avståndsknapp

Skugga låda

Sist men inte minst lägger du till en subtil rutskärm på knappen.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • Box skugga: första alternativet
  • Skugga på rutan horisontellt läge: 0px
  • Shadow of the box vertikal position: 2px
  • Box Shadow Blur Force: 50px

Skuggmodul divi-konfiguration

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

Kopiera divi-knappmodulenKnapp 2 Ikontext och färg

Ändra knapp- och knappmodulikonfärg i kolumn 2.

  • Knapptextfärg: Grön # 1ba038
  • Ikonfärg: # 1ba038

Divi-knappmodul

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

Divi-knappparameter

För att avsluta

I den här artikeln visade vi hur du använder halvgenomskinliga bilder för att skapa en utmärkt CTA-kolonndesign. Vi använde Divi-kolumnens överflödesinställningar så att bilder och knappar sömlöst överlappar varandra. Försök att använda denna design i ditt nästa Divi-projekt och berätta hur det fungerar i kommentarsavsnittet!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer