Gå till innehållet

Hur man skapar en animerad marknadsföringsfält 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 skapa en animerad marknadsföringsfält för din sidmall i Divi kan vara ett bra sätt att annonsera för snygga produkter och erbjudanden utan att behöva förlita sig på ett plugin. Med Divis kraftfulla designfunktioner kan du visuellt skapa reklamfältet när du redigerar en mall i Divi Theme Creator. Då, när mallen är klar, kommer kampanjfältet att visas på vilken sida som tilldelas den mallen. 

Vi kommer också att visa dig hur du fixar reklamfältet (eller klibbigt).

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 kommer också att behöva minst en sida skapad med Divi Builder för teständamål, vilket kommer att påverkas av marknadsföringsfältmallen.

Skapa ett animerat marknadsföringsfält högst upp i en sidmall

Skapa en ny mall

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.

Lägg till en ny divimodell

Tilldela mallen till den sida / sidor där kampanjfältet ska visas.

Divi-hemsida

I den nya mallen klickar du på rutan "Lägg till anpassad kropp" och väljer "Bygg anpassad kropp".

OBS: vi lägger till marknadsföringsfältet i modellens kroppsområde (inte rubriken) så att det kan fungera med standard Divi-rubriken samt alla rubriker anpassad som du kan lägga till senare.

Lägg till en kroppsmodell

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

Lägga till kampanjfältet i modellen

I malllayoutredigeraren kan vi börja skapa marknadsföringsfältet med Divi Builder.

Börja med att lägga till en rad med en kolumn i det vanliga avsnittet.

Lägg till rad i en kolumn på divi

Linjeinställningar

Innan du lägger till en modul ska du uppdatera radparametrarna enligt följande:

  • Vänster bakgrundsgradient: # 4a42ek
  • Höger bakgrundsgradient: # 521d91
  • Gradientriktning: 90deg
  • Använd en anpassad rännbredd: JA
  • Rännbredd: 1
  • Bredd: 100%
  • Maximal bredd: 100%
  • Klädsel: 0px längst upp, 0px längst ner

Detta stöder bakgrundsfärgen och bredden på kampanjfältet vi skapar.

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]

Kolumnparametrar

Innan du avslutar radinställningarna, klicka för att öppna kolumninställningarna. Lägg sedan till följande anpassade CSS till huvudkolumnelementet:

display: flex;align-items: center;justify-content: center;

Anpassning av css-kod

Denna CSS använder flex-egenskapen för att justera innehållet (eller modulerna) i kolumnen för att staplas horisontellt (sida vid sida). Det centrerar också modulerna i kolumnen vertikalt och horisontellt. Anledningen till att vi gör detta är att undvika att behöva använda flera kolumneradstrukturer som staplas ovanpå varandra på en mobil. Med denna konfiguration förblir innehållet horisontellt över alla webbläsarbredder.

Vi är nu redo att lägga till innehåll i kampanjfältet.

Lägg till Blurb-modul

För innehållet i detta kampanjexempel kommer vi att inkludera en presentationsmodul med en liten ikon och en textblogg med en knapp till höger (ungefär som marknadsföringsfältet på Elegantthemes.com).

Klicka på den grå cirkeln plus ikonen på raden och lägg till en presentationsmodul.

Lägg till en sammanfattningsmodul andra avsnitt

För innehållet i presentationsteksten anger du följande information:

  • Titel: [ange kampanjtexten]
  • Använd ikonen: YES
  • Ikon: presentikon (se skärmdump)
Konfiguration av divi-sammanfattningsmodulen

Uppdatera inställningarna för presentationsdesign enligt följande:

  • Ikonfärg: # ff4a9e
  • Bild / plats för ikoner: vänster
  • Använd ikonstorlek: JA
  • Ikon Fontstorlek: 16px
  • Texttitelstorlek: 16px (skrivbord), 14px (telefon)
  • Hewight-titelrad: 1.3em
  • Max bredd: 230px (endast telefon)
  • Polstring: Topp 10px
  • Animeringsstil: Bild
  • Animeringsriktning: höger
  • Animeringsfördröjning: 250 ms

Lägga till knappmodulen

Lägg sedan till en knappmodul under Blurb-modulen. På grund av flex-egenskapen visas modulen till höger om blurb snarare än nedan.

Divi-knappmodul

Uppdatera knappkonstruktionsparametrarna enligt följande:

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]

  • Använd anpassade stilar för knapp: YES
  • Knapptextstorlek: 15px (skrivbord), 13px (telefon)
  • Knapptextfärg: #ffffff
  • Bredden på knappgränsen: 0px
  • Radi av gränsen för knappen: 20px
  • Teckensnitt vikt: halvfet
Anpassa divi-knappmodulen
  • Marginal (skrivbord): 20px till vänster
  • Marginal (telefon): 10px till vänster
  • Klädsel (kontor): 0px längst upp, 0px längst ner
  • Polstring (telefon): 2px längst upp, 2px längst ner, 8px till vänster, 8px till höger
  • Animeringsstil: Studs
  • Animeringsfördröjning: 1000 ms
Anpassa avståndet för divi-knappmodul

Avsnitt inställningar

För att slutföra utformningen av kampanjfältet uppdaterar du avsnittet som innehåller kampanjfältet enligt följande:

  • Klädsel: 0px längst upp, 0px längst ner
  • Animeringsstil: Studs
  • Animeringsriktning: Ner
  • Animeringstid: 500ms
  • Animeringsfördröjning: 250 ms
  • Animering Starta opacitet: 100%
  • Z-index: 999
Anpassa animeringsdelmodulen

Lägga till innehållspubliceringsmodulen i full bredd

Nu är kampanjfältet klart. Men eftersom det här är en mall måste vi se till att vi lägger till innehållsinläggsmodulen för att visa innehållet på sidorna med den här mallen.

För sidor som byggts (eller som kommer att byggas) med Divi Builder, vill du använda en inläggsmodul för full bredd för att maximera innehållsområdet.

(OBS: För sidor som använder standardredigeraren vill du använda en standardmod för inläggsinnehåll i ett vanligt avsnitt för att uppnå en liknande maximal bredd på 1080px som standard.)

Lägg till ett avsnitt i full bredd

Lägg till ett avsnitt i full bredd under avsnittet som innehåller din kampanjfält.

Skapa en divi-byggare-sektion i full bredd

Lägg till en innehållsmodul i Fullwidth-format

Välj sedan modulen Fullwidth Post Content.

Innehållsdivi för hela bredden

Det är mer eller mindre det. Se nu till och spara layouten innan du avslutar redigeraren.

Spara divi-layout

Spara sedan ändringarna för temabyggaren.

Temabyggare divi

Slutresultat

före

Nu är här sidan innan modellen tilldelas med marknadsföringsfältet.

Efter

Och här är samma sida med den nya mallen med kampanjfältet.

Gör reklamfältet klibbigt

För att marknadsföringsfältet ska passa under Divis standardhuvud kan vi lägga till ett enkelt CSS-utdrag till avsnittet som innehåller promo-fältet.

position: fixed;width: 100%;

Öppna sektionsinställningarna och lägg till följande CSS-kod i huvudskrivbordselementet:

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]

Ange det fasta avsnittet

Lägg sedan till följande CSS-kod i huvudplattelementet:

position: relative;

Lägg till en css-kod i divisektionen

Kontrollera nu resultatet.

Divi animerat resultat

För tidigare konverteringar kan du också lägga till länkens URL till hela raden under alternativet Radinställningar.

Avslutande tankar

I den här handledningen har vi visat dig hur du utformar en kampanjfält (från grunden) med Divi Theme Builder. Kampanjfältet är komplett med flera animationer och mönster för att göra det riktigt synligt för besökare. Du kan till och med fixa marknadsföringsfältet när du rullar ner på sidan för ännu mer synlighet. Och med möjligheten att kontrollera placeringen av marknadsföringsfältet på din webbplats är appen extremt bekväm.

Denna artikel innehåller 1 kommentar

  1. Hej,

    Fantastisk artikel och handledning, verkligen TOPP !!!

    Jag skulle vilja göra samma sak, men eftersom jag använder den sekundära menyn där konto, telefon och korg finns över huvudmenyn (mina produktkategorier), visas inte kampanjfältet plötsligt, såvida jag inte missade ett steg i handledningen? !!.

    Vad jag vill kunna göra är att visa den här promofältet ovanför sekundärfältet, kort sagt, över allt annat för att sätta en promo, en flash-försäljning, ändra informationen enligt de händelser som jag vill inkludera

    Har du någon idé om den här rutten?

    Youssef

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