Gå till innehållet

Hur du lägger till ett avslöjbart glidande samtal till handling på 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]

Att ha en uppmaning till handling på din webbplats är ett av de minst påträngande sätten att få besökarnas uppmärksamhet. För det mesta ignorerar de bara uppmaningen eller stänger den för att fortsätta genomsöka sidan, men ibland tjänar du dem. Ett bildspel till handling fungerar bra för att marknadsföra nästan vad som helst på en målsida.

I den här handledningen ska vi utforma en stängbar uppmaning till handling som kan läggas till i alla hörn på en sida med Divi Theme Builder. När du är klar kommer du att kunna marknadsföra 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.

Skapa en sidmall

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

Tilldela sidmallar till sidor

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

Lägg till anpassad kropp

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

Skapande av avsnittet för publiceringsinnehåll

Innehållsavsnittet för inlägg är en nödvändig del av vilken sidmall som helst för att visa det faktiska innehållet på sidan eller inlägget inbäddat i Divi eller WordPress. Vi lägger till det i vår modell 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.

Enradig sektion

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

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

Artikelinnehåll

Linjeinställningar

Efter det uppdaterar radparametrarna enligt följande:

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

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.

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]

Lägg till ett nytt vanligt avsnitt i malllayouten.

Val av en ny divisektion

Lägg till en rad i en kolumn

Ge sedan avsnittet en rad med en kolumn.

Välj en divikolumn

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
Divi line parameter

Lägg till en uppmaningsmodul

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

Lägg till uppmaningsmodul

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 #]
Anpassa divi-modulerbjudandet

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

Ta bort bakgrundsfärg
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.

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]

Divi verktygstipsmodul

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)
Lägg till en divi-ikon
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
Anpassa en divi-ikon
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;

Anpassa stil CSS-modul divi

Resultat

Här är resultatet hittills.

Resultatet uppnås nu

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;

Ändra inriktning av delningsdelar

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;

Lägg till en divi-kod

Resultat

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

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]

Skjutreglaget längst upp till höger

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.

Slutresultat divi

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.

Lägg till en js divi-kod

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>

Lägg till jquery-kod

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. 

Denna artikel innehåller 1 kommentar

  1. Bra, den här artikeln! Det här är precis vad jag letar efter!
    Tack så mycket.

    Liten dotterfråga, är det möjligt att denna uppmaning endast öppnas automatiskt på en viss plats när du rullar på sidan?

    Bonne journée!

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
4 aktier
del4
tweet
Enregistrer