Gå til hovedindhold

Sådan opretter du en animeret promoveringslinje på Divi

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

Oprettelse af en animeret salgsfremmende bjælke til din sideskabelon i Divi kan være en fantastisk måde at annoncere for stilfulde produkter og tilbud uden at skulle stole på et plugin. Ved hjælp af Divis kraftfulde designfunktioner kan du visuelt oprette promoveringslinjen, når du redigerer en skabelon i Divi Theme Creator. Derefter, når skabelonen er klar, vises forfremmelseslinjen på enhver side, der er tildelt den pågældende 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.

Tilføj en ny divi-model

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

Divi-startside

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.

Tilføj en kropsmodel

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.

Føj række til en kolonne på divi

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.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

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;

Tilpasning af css-kode

Denne CSS bruger flex-egenskaben til at justere indholdet (eller modulerne) i kolonnen for at stable vandret (side om side). Det centrerer også modulerne i kolonnen lodret og vandret. Årsagen til, at vi gør dette, er for at undgå at skulle bruge flere kolonnerækkestrukturer, der stables oven på hinanden på en mobil. Med denne konfiguration forbliver indholdet justeret vandret på tværs af alle browserbredder.

Vi er nu klar til at tilføje indhold til promoveringslinjen.

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.

Tilføj et resume modul andet afsnit

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

  • Titel: [indtast kampagneteksten]
  • Brug ikonet: JA
  • Ikon: gaveikon (se skærmbillede)
Konfiguration af divi-opsummeringsmodulet

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.

Divi knap modul

Opdater knapdesignparametrene som følger:

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

  • 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
Tilpas divi-knap-modulet
  • 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
Tilpas afstanden til divi-knapmodulet

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
Tilpas animations divi-modul

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.

Opret en divi-builder-sektion i fuld bredde

Tilføj et indholdsmodul i formatet Fullwidth

Vælg derefter modulet Fullwidth Post Content.

Fuld bredde artikel divi

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

Gem divi-layout

Gem derefter ændringerne for temabyggeren.

Temabygger divi

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:

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

Indtast det faste afsnit

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

position: relative;

Føj en css-kode til divi-sektionen

Kontroller nu resultatet.

Divi animeret resultat

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

endelige tanker

I denne vejledning har vi vist dig, hvordan du designer en forfremmelseslinje (fra bunden) ved hjælp af Divi Theme Builder. Reklamebjælken er komplet med flere animationer og designs, der gør den virkelig synlig for besøgende. Du kan endda rette reklamelinjen, når du ruller ned på siden for endnu mere synlighed. Og med evnen til at kontrollere placeringen af ​​salgsfremmende bjælke på dit websted er appen yderst praktisk.

Denne artikel indeholder 1 kommentar

  1. Hej,

    Fantastisk artikel og tutorial, virkelig TOP !!!

    Jeg vil gerne gøre det samme, men da jeg bruger den sekundære menu, hvor konto, telefon og kurv er over hovedmenuen (mine produktkategorier), vises promo-linjen ikke pludselig, medmindre jeg gik glip af et trin i selvstudiet? !!.

    Hvad jeg ønsker at være i stand til er at vise denne promo bar over den sekundære bar, kort sagt over alt andet for at sætte en promo, et flash salg, ændre informationen i henhold til de begivenheder, som jeg vil medtage

    Har du nogen idé om denne rute?

    Youssef

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
2 aktier
andel2
tweet
Tilmeld