Lag en bar forfremmelse animasjon for sidemalen din i Divi kan være en fin måte å annonsere for elegante produkter og tilbud uten å måtte stole på en plugin. Ved å bruke Divis kraftige designfunksjoner kan du visuelt lage forfremmelse når du redigerer en mal i Divi Theme Builder. Så, når modellen er klar, baren forfremmelse vises på alle sider som er tilordnet denne malen. 

Vi vil også vise deg hvordan du gjør kampanjelinjen fast (eller klissete).

Hva du trenger for å komme i gang

For å begynne, må du å installere og aktivere Divi-temaet . Forsikre deg om at du har den nyeste versjonen av Divi.

Du vil også trenge minst en side som er opprettet med Divi Builder for testformål, som vil bli påvirket av mal for kampanjelinjen.

Opprett en animert markedsføringslinje øverst i en sidemal

Lag en ny mal

Gå til WordPress-dashbordet, gå til Divi> Temegenerator. Klikk deretter på "Legg til en ny mal" for å opprette en ny mal.

Tildel malen til siden (e) der promoteringslinjen skal vises.

I den nye malen, klikk på "Legg til tilpasset kropp" -boksen og velg "Bygg tilpasset kropp".

MERKNAD: Vi legger til promoteringsfeltet i modellens kroppsområde (ikke toppteksten) slik at den kan fungere med Divis standard topptekst, samt alle topptekster tilpasset som du kan legge til senere.

Velg deretter alternativet "Bygg fra riper".

Legge til promoteringslinjen i modellen

I redigeringsprogrammet for maloppsett kan vi begynne å lage kampanjelinjen ved hjelp av Divi Builder.

Start med å legge til en rad i en kolonne i den vanlige delen.

Linjeinnstillinger

Før du legger til en modul, oppdater Row-parametrene som følger:

• Nedgang i venstre bakgrunn: # 4a42ek
• Høyre bakgrunnsgradient: # 521d91
• Gradient Retning: 90deg
• Bruk en tilpasset rennebredde: JA
• Rennesteinsbredde: 1
• Bredde: 100%
• Maksimal bredde: 100%
• Polstring: 0px øverst, 0px nederst

Dette støtter bakgrunnsfargen og bredden på promoteringslinjen vi oppretter.

Kolonneparametere

Før du avslutter radinnstillingene, klikker du for å åpne kolonneinnstillingene. Deretter legger du til følgende tilpassede CSS i hovedkolonneelementet:

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

Denne CSS-en bruker flex-egenskapen for å justere innhold (eller moduler) i kolonnen for å stable horisontalt (side ved side). Den sentrerer også modulene i kolonnen vertikalt og horisontalt. Grunnen til at vi gjør det på denne måten er for å unngå å bruke flere kolonneradstrukturer som vil stables oppå hverandre på mobil. Med denne konfigurasjonen vil innhold forblir horisontalt justert i alle nettleserbredder.

Vi er nå klare til å legge til innhold til kampanjelinjen.

Legg til Blurb-modul

For innholdet i dette promoteringseksemplet vil vi inkludere en presentasjonsmodul med et lite ikon og en tekstblogg med en knapp til høyre (omtrent som promoteringslinjen på Elegantthemes.com).

Klikk på den grå sirkelen pluss ikonet på rad og legg til en presentasjonsmodul.

Angi følgende informasjon for innholdet i presentasjonsteksten:

• Tittel: [skriv inn kampanjeteksten]
• Bruk ikonet: JA
• Ikon: gaveikon (se skjermbilde)

Oppdater presentasjonsinnstillingene som følger:

• Ikonfarge: # ff4a9e
• Bilde / plassering av ikoner: venstre
• Bruk ikonstørrelse på ikonet: JA
• Ikon Fontstørrelse: 16px
• Teksttittelstørrelse: 16px (stasjonær), 14px (telefon)
• Hewight tittellinje: 1.3em
• Maks bredde: 230px (bare telefon)
• Polstring: Topp 10px
• Animasjonsstil: Lysbilde
• Animasjonsretning: høyre
• Animasjonsforsinkelse: 250 ms

Legge til knappmodulen

Deretter legger du til en knappmodul under Blurb-modulen. På grunn av flex-egenskapen vil modulen vises til høyre for uklarheten i stedet for nedenfor.

Oppdater parameterne for knappdesign som følger:

• Bruk egendefinerte stiler for knapp: YES
• Knapptekststørrelse: 15px (stasjonær), 13px (telefon)
• Knapptekstfarge: #ffffff
• Bredde på knappens kantlinje: 0px
• Radius av grensen til knappen: 20px
• Fontvekt: halvfet

• Margin (desktop): 20px til venstre
• Margin (telefon): 10px til venstre
• Polstring (kontor): 0px øverst, 0px nederst
• Polstring (telefon): 2px øverst, 2px nederst, 8px til venstre, 8px til høyre
• Animasjonsstil: Sprette
• Animasjonsforsinkelse: 1000 ms

Seksjonsinnstillinger

For å fullføre utformingen av kampanjelinjen, oppdaterer du seksjonen som inneholder promoteringslinjen som følger:

• Polstring: 0px øverst, 0px nederst
• Animasjonsstil: Sprette
• Animasjonsretning: Ned
• Animasjonens varighet: 500ms
• Animasjonsforsinkelse: 250 ms
• Animasjon Starter opacitet: 100%
• Z-indeks: 999

Legger til full publikasjonsmodul for innholdsbredde

På dette tidspunktet er kampanjelinjen klar. Men siden dette er en mal, må vi sørge for at vi legger til innholdsutgivelsesmodulen for å vise innholdet på siden (e) ved hjelp av denne malen.

For sider som er bygd (eller som skal bygges) med Divi Builder, vil du bruke en innholdsmodul for full bredde for å maksimere innholdsområdet.

(MERKNAD: For sider som bruker standardredigeringsprogrammet, vil du bruke en standard innholdsmodus for innlegg i en vanlig seksjon for å oppnå en tilsvarende maksimal bredde på 1080px som standard.)

Legg til en seksjon i full bredde

Legg til en seksjon i full bredde under delen som inneholder promoteringslinjen.

Legg til en innholdsmodul i Fullwidth-format

Velg deretter modulen Fullwidth Post Content.

Det er mer eller mindre det. Forsikre deg om og lagre oppsettet før du avslutter redigeringsprogrammet.

Lagre deretter endringene for temabyggeren.

Endelig resultat

Avant

Nå er her siden før du tildeler modellen med promoteringslinjen.

Etter

Og her er den samme siden med den nye malen med promo-linjen.

Gjør kampanjelinjen klissete

For at promoteringslinjen skal passe under Divis standardoverskrift, kan vi legge til et enkelt CSS-utdrag til seksjonen som inneholder promoteringslinjen.

position: fixed;width: 100%;

Åpne seksjonsinnstillingene og legg til følgende CSS-kode i hovedbordet:

Deretter legger du til følgende CSS-kode i hovedtavleelementet:

position: relative;

Sjekk nå resultatet.

For tidligere konverteringer kan du også legge til koblings-URL-en til hele raden, under alternativet Radinnstillinger.

avslutt~~POS=TRUNC tanker

I denne opplæringen viste vi deg hvordan du designer en kampanjelinje (fra bunnen av) ved hjelp av Divi Theme Builder. Kampanjelinjen er komplett med flere animasjoner og design for å gjøre den virkelig synlig for Besøkende. Du kan til og med fikse kampanjelinjen mens du blar nedover siden for enda mer synlighet. Og med muligheten til å kontrollere hvor kampanjelinjen er plassert på nettstedet ditt, er appen ekstremt praktisk.