Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Å lage en animert markedsføringslinje for sidemalen din i Divi kan være en fin måte å annonsere på stilige produkter og tilbud uten å måtte stole på et plugin. Ved å bruke Divis kraftige designfunksjoner kan du visuelt opprette promoteringslinjen når du redigerer en mal i Divi Theme Creator. Når malen er klar, vil promoteringslinjen vises på en hvilken som helst side som er tilordnet den 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.

Legg til en ny divi-modell

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

Divi-hjemmesiden

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.

Legg til en kroppsmodell

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.

Legg til rad i en kolonne på divi

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.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

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;

Tilpasning av css-kode

Denne CSS bruker flex-egenskapen til å justere innholdet (eller modulene) i kolonnen for å stable horisontalt (side om side). Det sentrerer også modulene i kolonnen vertikalt og horisontalt. Årsaken til at vi gjør dette er å unngå å måtte bruke flere kolonneradestrukturer som vil stables oppå hverandre på en mobil. Med denne konfigurasjonen vil innholdet forbli justert horisontalt i alle nettleserbredder.

Vi er nå klare til å legge til innhold i promoteringslinjen.

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.

Legg til en oppsummeringsmodul andre seksjon

Angi følgende informasjon for innholdet i presentasjonsteksten:

  • Tittel: [skriv inn kampanjeteksten]
  • Bruk ikonet: JA
  • Ikon: gaveikon (se skjermbilde)
Konfigurasjon av divi-sammendragsmodulen

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.

Divi-knappmodul

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

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
Tilpass divi-knappmodulen
  • 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
Tilpass divi-knappmodulavstand

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
Tilpass animasjonsdelemodulen

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.

Opprett en divisjonsbygger-seksjon i full bredde

Legg til en innholdsmodul i Fullwidth-format

Velg deretter modulen Fullwidth Post Content.

Full bredde artikkelinnhold divi

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

Lagre divi-layout

Lagre deretter endringene for temabyggeren.

Temabygger divi

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:

Gå inn i den faste delen

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

position: relative;

Legg til en CSS-kode i diviseksjonen

Sjekk nå resultatet.

Divi animert resultat

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

avslutt~~POS=TRUNC tanker

I denne veiledningen har vi vist 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 når du blar nedover på siden for enda mer synlighet. Og med muligheten til å kontrollere plasseringen av kampanjelinjen på nettstedet ditt, er appen ekstremt praktisk.