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.
Tilldela mallen till den sida / sidor där kampanjfältet ska visas.
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.
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.
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.
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;
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.
För innehållet i presentationsteksten anger du följande information:
- Titel: [ange kampanjtexten]
- Använd ikonen: YES
- Ikon: presentikon (se skärmdump)
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.
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
- 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
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
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.
Lägg till en innehållsmodul i Fullwidth-format
Välj sedan modulen Fullwidth Post Content.
Det är mer eller mindre det. Se nu till och spara layouten innan du avslutar redigeraren.
Spara sedan ändringarna för temabyggaren.
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:
Lägg sedan till följande CSS-kod i huvudplattelementet:
position: relative;
Kontrollera nu resultatet.
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.
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