Gå till innehållet

Hur du lägger till klibbiga CTA: er i en artikelmall med Divi Builder

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]

Klibbiga sidofält är extremt effektiva för att fånga besökarnas uppmärksamhet utan att vara överlägsen eller distraherad. Tricket är att inkludera ett eller två sidofält som "förblir synliga" eller fixerade vid sidan av inläggets innehåll när användaren rullar på sidan. Detta är ett uppfriskande alternativ till den traditionella sidofältet, eftersom det ger intrycket av en modern layout i full bredd (inget sidofält), med fördelen att presentera uppmaningar. viktigt på sidan av sidan när det behövs.

I den här handledningen visar vi dig hur du lägger till klibbiga uppmaningar till en blogginläggsmall med Divi Theme Builder. Tillämpningen av denna layout är betydande. Det fungerar för nästan vilken sida som helst eller vilken postmall som helst. Dessutom behöver du inte begränsa dig till uppmaningar; du kan välja att lägga till Divi-modul (erna) efter eget val.

Vad du behöver för att komma igång

För att börja måste du för att installera och aktivera Divi-temat . Se till att du har den senaste versionen av Divi.

Du behöver också minst ett meddelande skapat med Divi Builder för testning för att visa önskat resultat.

Efter det är du redo att lämna.

undersökningen

Här är en snabb översikt över klibbiga ACTs som har lagts till i en blogginläggsmall i Divi.

Så här lägger du till fasta samtal till handling i din blogginläggsmall i Divi

Lägga till temabuildermallen

Det första steget är att importera vår fördefinierade mall på vår webbplats. Vi ska använda publikationsmallen för Divi Theme Builder Pack # 1.

För att komma igång, gå till Divi> Temagenerator. Klicka på bärbarhetsikonen längst upp till höger på sidan. I portabilitetsmodalet väljer du importfliken och väljer filen divi-theme-builder-pack-1-post-template.json. Om det finns mallar för närvarande installerade på din webbplats, se till att avmarkera alla alternativ som kan ersätta dina nuvarande mallar. Klicka sedan på importknappen.

Importera en divi-layout

Bygg blogginläggsmallen

När mallen har importerats är vi redo att lägga till våra nya uppmaningar i sidofältet som är klibbiga till malllayouten. För att göra detta, klicka på redigeringsikonen för det anpassade kroppsområdet.

Lägg till en anpassad divi-kropp

Lade till dubbla sidofältlayout för att hålla sidofältets uppmaningar

I malllayoutredigeraren hittar du raden som innehåller innehållspubliceringsmodulen och ändrar kolumnlayouten till en femtedel med tre femtedelar med en femtedel kolumnstruktur (1/5 3/5 1/5 ). Detta gör att vi kan hålla kolumnen centrerad för inläggsinnehållet samtidigt som vi tillhandahåller två sektioner på vardera sidan för våra klibbiga uppmaningar.

Lägg till en divi-layout

När du har ändrat kolumnstrukturen, dra modulen för publicering av innehåll till mittkolumnen.

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]

Uppdatera radparametrar

Öppna radinställningarna och uppdatera följande designalternativ:

  • Använd en anpassad rännbredd: JA
  • Rännbredd: 2
  • Bredd: 100% (desktop), 90% (surfplatta)
  • Maximal bredd: 1500px
Lägg till en fix divi-sektion

Detta ger oss det rum vi behöver för vår dubbla sidofältkonfiguration.

Uppdatera 1-kolumninställningar

Öppna sedan 1-kolumninställningarna och ge denna kolumn en anpassad CSS-klass:

  • CSS-klass: sticky-cta
Anpassa kolumn 1 css divi

Lägga till ett CTA-sidofält i den vänstra kolumnen

Vi är nu redo för den första uppmaningen. Lägg till ett samtal till åtgärdsmodulen i den vänstra kolumnen.

Lägg till modul till handling

Stylisera CTA-sidofältet

Uppdatera inställningarna enligt följande:

Innehåll
  • Knapp: «Klicka här»
  • Kropp: ”Ditt innehåll går här. Redigera eller ta bort denna text online eller i modulens innehållsinställningar. ”
  • URL till knappens länk: #
Anpassa uppmaningsmodulen
Kroppstextdesign
  • Body Font: Montserrat
  • Teckensnitt vikt: halvfet
  • Kroppstext: höger justering
  • Tekstens kroppsfärg: # 444444
  • Kroppsstorlek: 22px (skrivbord), 18px (surfplatta)
  • Kroppshöjd: 1.3em
CTA strumpbyxor
knapp
  • Knapptextstorlek: 14px
  • Knapptextfärg: #ffffff
  • Bakgrundsfärg på knapp: # 6148df
  • Bredden på knappgränsen: 0px
  • Radius av knappen: 80px
  • Teckensnitt vikt: Fet
  • Knappsnittstil: TT
  • Polstring av knappar: 12px längst upp, 12px längst ner, 22px till vänster, 22px till höger
Divi-modulavsnitt
Bredd, inriktning, stoppning och kantstenar
  • Bredd: 100%
  • Maximal bredd: 320px
  • Modulens inriktning: höger
  • Polstring: 10px till vänster, 10px till höger
  • Bredden på den övre gränsen: 10px
  • Färg på den övre gränsen: #eeeeee
  • Bredden på den nedre kanten: 10px
  • Färg på den nedre gränsen: #eeeeee

Lägga till CTA-sidfältet i den högra kolumnen

För att skapa CTA för den högra kolumnen, kopiera den vi just skapade och klistra in den längst till höger. Uppdatera sedan inställningarna för duplikat enligt följande:

  • Justering av textkroppen: vänster
  • Justering av modulen: vänster
Lägg till ct till höger

Uppdatera inställningarna för 3-kolumnen

För denna CTA i den högra kolumnen lägger vi till en övre marginal till kolumnen för att skapa en startposition för CTA-sidfältet vid en nedre punkt på sidan.

Börja med att öppna parametrarna för 3-kolumnen och lägg till samma CSS-klass som vi lagt till i 1-kolumnen:

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]

  • CSS-klass: sticky-cta

Lägg sedan till följande anpassade CSS till huvudelementet:

office

margin-top: 50%

tablett

margin-top: 0%

Anpassa divikolonnstil

Detta ger oss en annan utgångspunkt för den klibbiga CTA i den högra kolumnen, vilket är 50% av radbredden. Justera gärna detta värde efter behov för ditt eget blogginlägg.

Duplicera en cta divi-modul

Lägg till anpassad CSS i mall med en kodmodul

För att få vår "klibbiga" positionering för våra sidofält CTA, måste vi lägga till anpassad CSS. För att göra detta skapar du en ny kodmodul under innehållspubliceringsmodulen (eller var som helst på sidan).

Sätt in en modul för divikodstyp

Klistra sedan in följande CSS i kodrutan:

<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>

Divi-modulens parameterkod

Den översta förskjutningen i den här koden är en beräkning som placerar uppmaningen vertikalt centrerad på sidan när du rullar. 50vh är hälften så hög som webbläsarfönstret och 130px är halva höjden på CTA. Om din CTA är högre eller lägre måste du justera 130 pixlar uppåt eller nedåt.

Spara inställningar

När du är klar sparar du mallen.

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]

Spara parametrar för cta divi-modul

Och spara sedan temabuilderinställningarna

Spara division för temabyggare

Slutresultat

Besök en bloggartikel med mallen för att se slutresultatet.

CTA strumpbyxor

Och så kommer klibbiga uppmaningar att hålla sig fasta på rullningen. Du kan se hur det fungerar bäst för längre innehåll.

Avslutande tankar

Dessa klibbiga sidopaneler till handling är ett uppfriskande alternativ till det traditionella sidofältet. De passar den minimalistiska designen bra eftersom de är mindre påträngande och inte gör att inlägget känns rörigt. Dessutom kan du placera uppmaningen lägre på sidan så att den gradvis visas och förblir fast vid pergamentet, vilket gör den mer synlig för besökare. Och glöm inte. Du kan ersätta CTA med valfri Divi-modul eller kombination av moduler för att skapa nästan vad du vill. Du kan också välja att bara hålla en uppmaning på ena sidan. Det verkar ha många applikationer.

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
2 aktier
del2
tweet
Enregistrer