Sticky sidebars är extremt effektiva för att fånga uppmärksamheten besökare utan att vara påträngande eller distraherande. Tricket är att inkludera ett eller två element i sidofältet som "förblir synliga" eller fixerade vid sidan av innehåll av inlägget när användaren rullar på sidan. Detta är ett uppfriskande alternativ till den traditionella sidofältslayouten, eftersom den ger intrycket av en modern layout i full bredd (utan sidofält), med fördelen att presentera uppmaningar som är viktiga vid 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, navigera till Divi > Generator teman. Klicka på portabilitetsikonen längst upp till höger på sidan. I portabilitetsmodalen väljer du importfliken och väljer filen divi-theme-builder-pack-1-post-template.json från mappen. Om du för närvarande har mallar installerade på din webbplats, se till att avmarkera alla alternativ som kan skriva över 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 Model Layout Editor, leta reda på raden som innehåller modulen Publicera. innehåll och ersätt kolumnlayouten med en femtedels gånger tre femtedelar gånger en femtedel (1/5 3/5 1/5) kolumnstruktur. Detta gör att vi kan hålla kolumnen centrerad för innehåll av inlägget samtidigt som vi tillhandahåller två sektioner på vardera sidan för våra klibbiga CTAs.
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 sidouppmaningar är ett uppfriskande alternativ till det traditionella sidofältet. De fungerar bra för minimalistisk design eftersom de är mindre påträngande och inte får inlägget att kännas rörigt. Dessutom kan du placera CTA lägre på sidan så att den visas gradvis och fastnar på rullningen, vilket gör den mer synlig för människor. besökare. Och glöm inte. Du kan ersätta CTA:n med vilken Divi-modul som helst eller kombination av moduler för att skapa nästan vad du vill. Du kan också välja att bara ha en CTA på ena sidan. Det verkar ha många tillämpningar.
