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.

Faste bunntekstlinjer kan være en praktisk måte å beholde viktig informasjon om nettstedet ditt foran og i sentrum når brukeren samhandler med sideinnholdet ditt på en hvilken som helst enhet. 

Som med Divi, eksisterer en bunntekstlinje vanligvis som et statisk element helt nederst på siden etter hovedbunninnholdet. De inkluderer ting som copyright tekst og sosiale medier ikoner. 

Men hvis du ikke skjuler innholdet i bunntekstlinjen nederst på siden, kan du opprette en tilpasset bunntekstlinje som flyter nederst på skjermen mens brukeren blar.

I denne opplæringen skal vi designe en fullt personlig fast bunntekststang ved hjelp av Divi-temegeneratoren. Dette vil være nyttig for deg å holde de små, men viktige innholdsstykkene i sikte til enhver tid.

Mulig utfall

Her er en oversikt over den faste bunntekstlinjen som vi skal designe.

Slik legger du til den faste bunntekstmalen du kan laste ned på Divi-nettstedet

ADVARSEL!: Å legge til denne malen erstatter standardnettmalen (hvis du har en) på Divi-nettstedet. Vi foreslår at du legger den til på et testnettsted, slik at du ikke ødelegger noe på et live nettsted.

Hvis du vil importere den faste bunntekstmalen til ditt eget nettsted, pakker du ned den nedlastede zip-filen for å få tilgang til JSON-filen.

Gå deretter til WordPress-dashbordet og gå til Divi> Theme Builder.

Klikk deretter på bærbarhetsikonet øverst til høyre på siden.

I portabilitetsvinduet velger du JSON-filen du nettopp pakket ut, og velger alternativet "Last ned sikkerhetskopi før import", i tilfelle du tidligere hadde noe i standardnettmalen du ikke hadde. ikke ønsket å erstatte.

Klikk deretter på Import-knappen.

Til slutt lagrer du endringene i temageneratoren og viser en direkteside for å se den faste bunntekstlinjen.

Lagre divi-endringer

Nå videre til veiledningen, ok?

Del 1: Legge til en global bunntekst

Divi-temageneratoren lar deg erstatte standard bunntekst med en ny ved å oppdatere standard nettstedsmalen.

For å lage en global bunntekst, gå til WordPress-dashbordet og gå til Divi> Theme Builder. Klikk deretter på "Legg til global bunntekst" -feltet inne i standard nettstedmal.

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.

Velg deretter alternativet "Bygg en tilpasset bunntekst" fra rullegardinlisten.

Dette vil distribuere Model Layout Editor hvor du umiddelbart blir bedt om de tre valgene for hvordan du vil begynne å bygge. Velg "Build From Scratch".

Del 2: Opprette den faste bunnteksten

Nå som vi redigerer fra malredigeringsprogrammet, kan vi begynne å designe den faste bunnlinjen. Når du er ferdig, vil du ha en fast bunnlinje med tre kolonner som er klare til innhold.

Legg til en tre kolonneoppsett på linjen

Først legger du til en tre kolonnelayout i raden.

3 rad seksjon

Seksjonshøyde

Når de tre kolonnene er lagt til, la oss gi en definert høyde til seksjonen. Dette er viktig for å skape plass nederst på siden der fasttelefonen til slutt vil ende. Vi vil også fjerne standard topp og bunn polstring.

For å stille inn høyde og polstring, åpner du seksjonsinnstillingene og oppdater følgende:

  • Høyde: 85px
  • Polstring: 0px høy, 0px lav
Divi 1 seksjon høyde konfigurasjon

Linjeinnstillinger

Nå som seksjonen vår er klar, er vi klare til å tilpasse raden slik at den fungerer som en fast bunnlinje. Åpne radinnstillingene, og oppdater deretter følgende:

contexte

  • Bakgrunnsfarge: # 1a1e36
Tilgang til linjeinnstillinger

Størrelse og avstand

  • Rennesteinsbredde: 1
  • Bredde: 100%
  • Maks bredde: 100%
  • Polstring: 0px opp, 0px ned, 3% igjen, 3% høyre
Tilpass diviseksjonen

Tilpasset CSS

Selv om raden er løst, vil vi at høyden på raden skal matche høyden på foreldreseksjonen, slik at plassen nederst på siden inneholder raden riktig. Og vi vil sørge for at innholdet på raden holder seg loddrett. For å gjøre dette, legg til følgende tilpassede CSS i hovedelementet på raden:

kontor

høyde: arve! viktig; visning: flex; justere elementer: sentrum;

Telefon

høyde: arve! viktig; visning: blokkere;
Legg til en CSS-kode

Fast plassering

For å gjøre linjen fast slik at den flyter nederst på skjermen, må vi gi den en fast posisjon nederst på midten slik:

  • Posisjon: fast
  • Sted: nedre sentrum
Bunntekstposisjon

Del 2: Lage innholdet i den faste bunntekstlinjen

Ø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.

På dette punktet har vi en fast bunntekst klar for innhold. Vi kan legge til hvilket som helst innhold vi ønsker i hver av de tre kolonnene. Men siden dette er en bunnlinje som er begrenset til 85 piksler i høyden, må vi begrense mengden innhold. Av denne grunn vil vi legge til en liten meny med en dynamisk logo og 4 menyelementer i kolonne 1. I kolonne 2 vil vi legge til copyright-tekst med et dynamisk inneværende år. I kolonne 3 vil vi legge til tre sporingsikoner for sosiale medier.

Legg til en meny i kolonne 1

Legg til en menymodul i kolonne 1.

Wordpress-menyvalg

Velg menyen

Velg deretter en av menyene du allerede har opprettet på nettstedet ditt. Sørg for å holde menyelementene på 4 eller mindre.

Valgmeny wordpress-modul

Legg til nettstedslogoen som dynamisk innhold

For logo-menyen vil vi dynamisk legge til nettstedslogoen. Klikk på ikonet "Bruk dynamisk innhold" mens du holder markøren over forhåndsvisningsområdet for logoen. Velg deretter Site logo fra rullegardinlisten.

Legg til en logo

Fjern bakgrunn

Fjern deretter standardmenybakgrunnen slik at den er gjennomsiktig.

Slett bakgrunnen

meny design

På dette punktet er vi klare til å legge til litt design på menyen. For dette designet skal vi holde det enkelt og lite. Oppdater følgende designparametere:

  • Fontmeny: Overpass
  • Menytekstfarge: # b59c61
  • Sepiabilde: 100%
  • Maksimal logohøyde: 50px
Endre skriftfargen

Legg til copyright-tekst i kolonne 2

Når menyen er på plass, gå til kolonne 2 for å legge til copyright-teksten.

Legg til en tekstmodul

Legg til en ny tekstmodul i kolonne 2.

Valgmodul tekst divi

Legg til gjeldende dato dynamisk med før og etter tekst

Her skal vi bli kreative med dynamisk innhold for å vise inneværende år i copyright-tekst. Dette vil sikre at året oppdateres automatisk for hele nettstedets levetid.

For å gjøre dette, klikk på ikonet "Bruk dynamisk innhold" og velg "Gjeldende dato" fra listen.

Valgdato

Oppdater følgende i popup-vinduet Gjeldende dato:

  • før:
  • 01Copyright ©
  • etter:
  • 01| Tous Droits Reservés
  • datoformat : tilpasset
  • Tilpasset datoformat : 20 år
Tilpass datoen

Formaterer teksten

Oppdater tekstdesign og margin som følger:

  • Tekst font: Overpass
  • Tekstfarge: # b59c61
  • Justering av teksten: senter
  • Margin (bare telefon): 10 piksler øverst, 10 piksler nederst
Divi skriftvalg tekstmodul

Dette støtter copyright tekst.

Legg til sporingsikoner for sosiale medier i kolonne 3

Legg til en sporingsmodul for sosiale medier i kolonne 3.

Legg til sosiale nettverk

På Innhold-fanen legger du til de nødvendige sosiale nettverkene på nettstedet. For dette designet bruker vi tre av dem.

Legg til overvåkingsmodul for sosiale nettverk

Innstillinger for sporing av sosiale medier

Oppdater deretter designinnstillingene for alle sporingsikoner for sosiale medier som følger:

  • Moduljustering: rett (stasjonær og nettbrett), sentrum (telefon)
  • Ikonfarge: # 1a1e36
  • Bruk egendefinert ikonstørrelse: JA
  • Ikonets skriftstørrelse: 16 piksler (skrivebord og nettbrett), 14 piksler (telefon)
Personell politidivisjon

Oppdater innstillinger for sosiale medier

For å oppdatere utformingen av det enkelte ikonet for sosiale nettverk, åpner du innstillingene for det første nettverket og oppdaterer følgende:

  • Bakgrunnsfarge: #ffffff
  • Polstring: 8 piksler til høyre, 8 piksler til venstre
  • Avrundede hjørner: 8px
fast fotstang divi

Utvid innstillinger for sosiale medier til alle

Åpne deretter menyen for tilleggsinnstillinger for det første nettverket og velg " Utvid elementstiler "i listen. I popup-vinduet Utvid stiler velger du å utvide stiler i " Denne kolonnen "Og klikk forlenge .

Dette utvider designet til resten av ikonene i kolonnen.

avslutt~~POS=TRUNC tanker

Å legge til en fast bunntekst er fornuftig i noen tilfeller. Barens høyde er liten nok til ikke å distrahere eller ta for mye plass på mobilen. Og det gir deg muligheten til å legge til viktige CTAer for bedre konvertering og en jevnere brukeropplevelse.

For dette designet opprettes plassen nederst på siden ved å sette en fast høyde for seksjonen og deretter la den faste linjen arve seksjonens høyde (selv om den er fast). 

Andre ressurser

Her er en liste over ekstra ressurser som kan hjelpe deg med å lage i utformingen av nettstedet ditt med Divi.

3 aksjer
del3
tweet
Enregistrer