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

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.

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.

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.

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

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

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

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.

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: #

Kroppstextdesign

• Body Font: Montserrat
• Teckensnitt vikt: halvfet
• Kroppstext: höger justering
• Tekstens kroppsfärg: # 444444
• Kroppsstorlek: 22px (skrivbord), 18px (surfplatta)
• Kroppshöjd: 1.3em

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

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

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:

• CSS-klass: sticky-cta

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

office

margin-top: 50%

tablett

margin-top: 0%

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.

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).

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>

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.

Och spara sedan temabuilderinställningarna

Slutresultat

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

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.