Opret en bar forfremmelse animation til din sideskabelon i Divi kan være en fantastisk måde at annoncere for slanke produkter og tilbud uden at skulle stole på et plugin. Ved at bruge Divis kraftfulde designfunktioner kan du visuelt skabe forfremmelse når du redigerer en skabelon i Divi Theme Builder. Så, når modellen er klar, baren forfremmelse vises på enhver side, der er tildelt denne skabelon. 

Vi viser dig også, hvordan man gør reklamebjælken fast (eller klistret).

Hvad du behøver for at komme i gang

For at begynde, skal du at installere og aktivere Divi-temaet . Sørg for, at du har den nyeste version af Divi.

Du har også brug for mindst en side oprettet med Divi Builder til testformål, som vil blive påvirket af skabelonen til promoveringslinjen.

Opret en animeret forfremmelseslinje øverst på en sideskabelon

Opret en ny skabelon

Gå til WordPress-instrumentbrættet, gå til Divi> Temegenerator. Klik derefter på feltet "Tilføj en ny skabelon" for at oprette en ny skabelon.

Tildel skabelonen til den eller de sider, som promoveringslinjen skal vises på.

I den nye skabelon skal du klikke på feltet "Tilføj brugerdefineret organ" og vælge "Byg brugerdefineret organ".

BEMÆRK: vi tilføjer forfremmelseslinjen til modelområdet (ikke overskriften), så den kan arbejde med Divi-standardoverskriften såvel som alle overskrifter brugerdefineret, som du kan tilføje senere.

Vælg derefter indstillingen "Byg fra bunden".

Tilføjelse af promoveringslinjen til modellen

I skabelonlayouteditoren kan vi begynde at oprette promoveringslinjen ved hjælp af Divi Builder.

Start med at tilføje en række i en kolonne til den almindelige sektion.

Linieindstillinger

Før du tilføjer et modul, skal du opdatere rækkeparametrene som følger:

• Venstre baggrund gradient: # 4a42ec
• Højre baggrundsgradient: # 521d91
• Gradientretning: 90deg
• Brug en brugerdefineret tagrendebredde: YES
• Tagrendebredde: 1
• Bredde: 100%
• Maksimal bredde: 100%
• Polstring: 0px øverst, 0px i bunden

Dette understøtter baggrundsfarve og bredde på promoveringslinjen, vi opretter.

Kolonneparametre

Inden du lukker rækkeindstillingerne, skal du klikke for at åbne kolonneindstillingerne. Føj derefter følgende brugerdefinerede CSS til hovedkolonneelementet:

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

Denne CSS bruger flex-egenskaben til at justere indhold (eller moduler) i kolonnen for at stable vandret (side om side). Det centrerer også modulerne i søjlen lodret og vandret. Grunden til, at vi gør det på denne måde, er for at undgå at skulle bruge flere kolonnerækkestrukturer, der stables oven på hinanden på mobilen. Med denne konfiguration vil indhold vil forblive horisontalt justeret i alle browserbredder.

Vi er nu klar til at tilføje indhold til kampagnebjælken.

Tilføj Blurb-modul

Til indholdet af dette promoveringseksempel inkluderer vi et præsentationsmodul med et lille ikon og en tekstblog med en knap til højre (ligesom promoveringslinjen på Elegantthemes.com).

Klik på den grå cirkel plus ikonet inde i rækken, og tilføj et præsentationsmodul.

For indholdet af præsentationsteksten skal du indtaste følgende oplysninger:

• Titel: [indtast kampagneteksten]
• Brug ikonet: JA
• Ikon: gaveikon (se skærmbillede)

Opdater indstillingerne for præsentationsdesign som følger:

• Ikonfarve: # ff4a9e
• Billede / placering af ikoner: venstre
• Brug ikonets skriftstørrelse: JA
• Ikon Skriftstørrelse: 16px
• Teksttitelstørrelse: 16px (desktop), 14px (telefon)
• Hewight-titellinje: 1.3em
• Maksimal bredde: 230px (kun telefon)
• Polstring: Top 10px
• Animationsstil: Slide
• Animationsretning: højre
• Animationsforsinkelse: 250 ms

Tilføjelse af knapmodulet

Tilføj derefter et knapmodul under Blurb-modulet. På grund af flex-egenskaben vises modulet til højre for sløret snarere end nedenfor.

Opdater knapdesignparametrene som følger:

• Brug brugerdefinerede stilarter til knap: YES
• Knaptekststørrelse: 15px (desktop), 13px (telefon)
• Knappen tekstfarve: #ffffff
• Bredde på knapgrænsen: 0px
• Radius af kanten af ​​knappen: 20px
• Skriftvægt: semi-fed

• Margin (desktop): 20px til venstre
• Margen (telefon): 10px til venstre
• Polstring (kontor): 0px øverst, 0px i bunden
• Polstring (telefon): 2px øverst, 2px i bunden, 8px til venstre, 8px til højre
• Animationsstil: Bounce
• Animationsforsinkelse: 1000 ms

Sektionsindstillinger

For at afslutte designet af promoveringslinjen skal du opdatere sektionen, der indeholder promoveringslinjen, som følger:

• Polstring: 0px øverst, 0px i bunden
• Animationsstil: Bounce
• Animationsretning: Ned
• Animationsvarighed: 500ms
• Animationsforsinkelse: 250 ms
• Animation Starter opacitet: 100%
• Z-indeks: 999

Tilføjelse af indholdsudgivelsesmodulet i fuld bredde

På dette tidspunkt er kampagnelinjen klar. Men da dette er en skabelon, skal vi sørge for, at vi tilføjer modulet til indholdsudstationering for at vise indholdet af siderne ved hjælp af denne skabelon.

For sider, der er bygget (eller som skal bygges) ved hjælp af Divi Builder, skal du bruge et indlægsmodul i fuld bredde til at maksimere indholdsområdet.

(BEMÆRK: For sider, der bruger standardeditoren, skal du bruge en standard post-indholdsmod i et almindeligt afsnit for at opnå en lignende maksimal bredde på 1080px som standard.)

Tilføj et afsnit i fuld bredde

Tilføj et afsnit i fuld bredde under det afsnit, der indeholder din promoveringslinje.

Tilføj et indholdsmodul i formatet Fullwidth

Vælg derefter modulet Fullwidth Post Content.

Det er mere eller mindre det. Sørg nu for at gemme layoutet, inden du forlader editoren.

Gem derefter ændringerne for temabyggeren.

Endelig resultat

Før

Her er siden, før modellen tildeles med salgsfremmende bjælke.

Efter

Og her er den samme side med den nye skabelon med promolinjen.

Gør reklamebaren klistret

For at promoveringslinjen skal passe under Divis standardhoved, kan vi tilføje et simpelt CSS-kodestykke til det afsnit, der indeholder promo-linjen.

position: fixed;width: 100%;

Åbn sektionsindstillingerne, og tilføj følgende CSS-kode til det primære skrivebordselement:

Føj derefter følgende CSS-kode til det vigtigste tabletelement:

position: relative;

Kontroller nu resultatet.

Ved tidligere konverteringer kan du også tilføje linkwebadressen til hele rækken under indstillingen Linkindstillinger.

endelige tanker

I denne tutorial viste vi dig, hvordan du designer en promo-bar (fra bunden) ved hjælp af Divi Theme Builder. Kampagnelinjen er komplet med flere animationer og designs for at gøre den virkelig synlig for besøgende. Du kan endda rette kampagnebjælken, mens du ruller ned på siden for endnu mere synlighed. Og med muligheden for at kontrollere, hvor reklamebjælken er placeret på dit websted, er appen yderst praktisk.