Att ha en uppmaning till handling på din webbplats är ett av de minst påträngande sätten att fånga din uppmärksamhet besökare. För det mesta kommer de bara att ignorera CTA eller stänga den för att fortsätta surfa på sidan, men ibland kommer du att vinna dem. En uppmaning i bildform kommer att fungera utmärkt för främja nästan vad som helst på en målsida.

I den här handledningen kommer vi att utforma en stängbar uppmaning som kan läggas till i alla hörn av en sida med Divi Theme Builder. När detta är gjort har du möjlighet att göra det främja dina produkter och specialerbjudanden var som helst på sidan utan att behöva använda ett plugin.

Låt oss börja!

undersökningen

Här är en snabb titt på de fyra infogade uppmaningarna som vi lägger till i sidmallens fyra hörn. Naturligtvis behöver du inte distribuera alla fyra samtidigt. Lägg märke till hur alla kan stängas genom att klicka på "x" -ikonen, då kan du välja att återaktivera uppmaningen genom att klicka på "plus" -ikonen.

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

För att komma igång måste du göra det för att installera och aktivera Divi-temat . Se till att du har den senaste versionen av Divi.

Du behöver också minst en sida skapad med Divi Builder för teständamål för att tilldela den nya mallen till den här sidan för att visa resultatet.

Skapande av en glidande uppmaning till handling, med en sidmall i Divi

Skapande av en ny modell

Gå till WordPress-instrumentpanelen, gå till Divi> Temagenerator. Klicka sedan på rutan "Lägg till en ny mall" för att skapa en ny mall.

Tilldela mallen till den sida eller sidor som du vill visa kampanjfältet på.

På den nya modellen, klicka på "Lägg till en anpassad kropp" och välj sedan "Skapa en anpassad kropp".

Välj sedan alternativet "Bygg från repor".

Skapande av avsnittet för publiceringsinnehåll

Avsnittet av innehåll inlägg är en nödvändig del av alla sidmall för att visa innehåll riktig sida eller inlägg inbäddat i Divi eller WordPress. Vi lägger till detta i vår mall innan vi skapar vår första uppmaning att infoga.

Lägg till en rad i en kolumn

För att börja lägger du till en rad i en kolumn i det vanliga avsnittet.

Lägg till en modul för publiceringsinnehåll

Lägg sedan till en modul innehåll publicering till linjen.

Linjeinställningar

Efter det uppdaterar radparametrarna enligt följande:

• Bredd: 100%
• Max bredd: 100%
• Polstring: 0px hög, 0px låg

Skapa uppmaningen till handling uppe till vänster

Nu när vi har vår postinnehållsmodul på plats är vi redo att börja lägga till vår första uppmaning till handling för att infoga i det övre vänstra hörnet av sidmallen.

Lägg till ett avsnitt

Varje ny uppmaning skapas med ett helt nytt avsnitt. Detta gör att du kan lägga till vilken layout eller modul som helst som behövs för att utforma uppmaningen.

Lägg till ett nytt vanligt avsnitt i malllayouten.

Lägg till en rad i en kolumn

Ge sedan avsnittet en rad med en kolumn.

Avsnitt inställningar

Dra (eller flytta) avsnittet ovanför avsnittet om innehåll och uppdatera avsnittet på följande sätt:

• Bakgrundsgradient till vänster:
• Höger bakgrundsgradient:
• Visa lutningen ovanför bilden: YES
• Bakgrundsbild: [infoga bild]
• Bredd: 320px
• Marginal: 320px kvar
• Polstring: 0px hög, 0px låg
• Animeringsstil: Bild
• Animeringsriktning: höger
• Animeringsfördröjning: 2000 ms

Hoppa sedan till den avancerade fliken och lägg till följande CSS-klass och Z-index:

• CSS-klass: slide-in-cta
• Z-index: 999

Och lägg till det anpassade CSS-utdraget efter huvudelementet:

position: fixed;top: 80px;left: -320px;

CSS-klassen behövs så att vi kan rikta in sektionen med kod senare. Anpassad CSS placerar den övre vänstra delen av sidmallen i en fast (eller klibbig) position. Positionen "vänster: -320 pixlar" bör flytta hela sektionen (som är 320 pixlar bred) utanför webbläsarfönstret (så ur vår synvinkel). Men vi har den vänstra marginalen på 320 pixlar för att visa den igen. Anledningen till att det är konstruerat på detta sätt är att vi kan slå på eller av marginalvärdet när du klickar på "x" -ikonen. Detta kommer att få CTA att glida in och ur sikte.

Linjeinställningar

Uppdatera nu radparametrarna enligt följande:

• Använd en anpassad rännbredd: JA
• Rännbredd: 1
• Bredd: 100%
• Polstring: 0px hög, 0px låg

Lägg till en uppmaningsmodul

Lägg till en Call to Action-modul på raden.

Inställningar för uppmaning till handling

Uppdatera sedan inställningarna för uppmaning till handling.

Innehåll

• Titel: [ange önskad text]
• Knapp: [ange önskad text]
• Kropp: [ange önskad text]
• URL för knapplänk: [ange aktuell URL eller #]

Ta sedan bort standardbakgrundsfärgen för att avslöja bakgrunden för det avsnitt som vi lade till tidigare.

Designparametrar (text, knapp och fyllning)

Uppdatera följande på fliken Design:

• Titel typsnitt: Lato
• Titel Typsnitt Vikt: Tung
• Titelradshöjd: 1,3 em
• Kroppspolisen: Lato
• Vikt för kroppsteckensnitt: fetstil
• Använd anpassade stilar för knappen: JA
• Knapptextstorlek: 15px
• Knappens bredd: 0px
• Avstånd för knappbokstäver: 1px
• Knapp typsnitt: Lato
• Knappsteckens vikt: tung
• Knappsnittstil: TT
• Knappstoppning: 12 pixlar längst upp, 12 pixlar längst ner, 32 pixlar till vänster, 32 pixlar till höger
• stoppning: 40 pixlar längst upp, 40 pixlar längst ner, 40 pixlar till vänster, 40 pixlar till höger

Lägg till en ikon för att öppna och stänga med en Blurb-modul

När uppmaningen till handling är klar måste vi skapa ikonknappen som används för att öppna och stänga den glidande uppmaningen. För att skapa detta, lägg till en blurb-modul under call to action-modulen.

Inställningar för presentationstekst

Uppdatera följande designparametrar.

Innehåll

• ta bort standardtitel och huvudtext
• Använd ikonen: YES
• Ikon: mer (se skärmdump)

Conception

• Ikonfärg: # 000000
• Använd ikonstorlek för ikon: JA
• Ikonstorlek: 40 pixlar
• Bredd: 40px
• Höjd: 40px
• Rundade hörn: 50%
• Transformera Z-axelrotation: 135 grader

Avancerade inställningar

Lägg till följande CSS-klass under den avancerade fliken:

• CSS-klass: slide-in_target

Lägg sedan till den här anpassade CSS till huvudelementet.

position: absolute;bottom: 0px;right: -40px;

Lägg till följande anpassade CSS till Blurb-bilden.

margin-bottom: 0px;

Resultat

Här är resultatet hittills.

Tänk på att vi fortfarande behöver lägga till lite kod för att lägga till stängnings- och öppningsfunktionaliteten när du klickar på "x" -ikonen. Vi lägger till koden efter att ha skapat en uppmaning till var och en av de fyra hörnen av modellen.

Skapande av uppmaningen till handling längst upp till höger

Med den första inbyggda uppmaningen kan vi påskynda processen att skapa resten av uppmaningarna genom att duplicera det redan skapade avsnittet. Därefter ska vi skapa en bilduppmaning till det övre högra hörnet.

Duplicera avsnitt

Distribuera visningsläget för trådramen och duplicera sedan CTA-sektionen längst upp till vänster.

Uppdatera avsnittets inställningar

Uppdatera sedan de nya sektionsparametrarna enligt följande:

• marginal: 320px höger
• animeringsriktning: vänster

Uppdatera sedan den anpassade CSS i huvudelementet genom att ersätta "vänster" med "höger". Här är hela utdraget:

position: fixed;top: 80px;right: -320px;

Uppdatera parametrarna för Blurb-modulen

Öppna sedan inställningarna för Blurb-modulen och uppdatera det anpassade CSS-kodavsnittet i huvudelementet genom att ersätta "höger" med "vänster". Här är hela utdraget:

position: absolute;bottom: 0px;left: -40px;

Resultat

Du kommer nu att se en uppmaning till handling som en bild längst upp till höger i sidmallen.

Utför samma åtgärder för resten av avsnittet "Nedre högra", "Nedre vänstra". Du måste också justera CSS-koden för varje modul för att få ett resultat som liknar följande.

Lägga till anpassade jQuery- och CSS-kodavsnitt med hjälp av en kodmodul

För det sista steget måste vi lägga till några anpassade jQuery och CSS så att vi kan få funktionaliteten att öppna och stänga var och en av bilderna.

Lägg till en kodmodul

Lägg till en kodmodul i ett av avsnittet i presentationen.

Klistra in koden

Öppna sedan kodinställningarna och klistra in följande kod i kodområdet.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Avslutande tankar

Med Divi är det inte alls svårt att skapa en uppmaning till handling. Och eftersom du kan använda temabyggaren för att lägga till en uppmaning till en sidmall, har du mer kontroll över vilka sidor som visar dessa uppmaningar.