Skapa en bar främjande animering för din sidmall i Divi kan vara ett bra sätt att marknadsföra snygga produkter och erbjudanden utan att behöva förlita sig på ett plugin. Med hjälp av Divis kraftfulla designfunktioner kan du visuellt skapa främjande när du redigerar en mall i Divi Theme Builder. Sedan, när modellen är klar, baren främjande kommer att visas på alla sidor som tilldelats den här 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".

Välj en divi-skalad layout

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
Välj en divi 1-skalad layout

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

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 egenskapen flex för att justera innehåll (eller moduler) i kolumnen för att staplas horisontellt (sida vid sida). Den centrerar också modulerna i kolumnen vertikalt och horisontellt. Anledningen till att vi gör det på det här sättet är för att undvika att behöva använda strukturer med flera kolumnerrader som staplas ovanpå varandra på mobilen. Med denna konfiguration, innehåll kommer att förbli horisontellt inriktad över alla webbläsarbredder.

Vi är nu redo att lägga till innehåll till 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
Anpassningsmodul för sammanfattning av divi

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:

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

Exempel resultat tidigare

Efter

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

Exempelresultat efter

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:

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 visade vi hur du designar en kampanjbar (från grunden) med Divi Theme Builder. Kampanjfältet är komplett med flera animationer och designs för att göra den verkligen synlig för besökare. Du kan till och med fixa kampanjfältet när du scrollar ner på sidan för ännu mer synlighet. Och med möjligheten att styra var kampanjfältet placeras på din sida är appen extremt bekväm.