Faste bunntekstlinjer kan være en praktisk måte å holde viktig informasjon på nettstedet Web i forgrunnen når brukeren samhandler med innholdet på siden din 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 modellen vil erstatte nettstedsmal som standard (hvis du har en) på Divi-siden din. Vi foreslår at du legger den til på en testside slik at du ikke roter til noe på en live-side.

For å importere malen for fast bunntekst på egen hånd nettstedet Web, pakk ut 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, velg JSON-filen du nettopp pakket ut og velg alternativet "Last ned sikkerhetskopi før import", i tilfelle du tidligere hadde noe i nettstedsmal standard som du ikke ønsket å overstyre.

Klikk deretter på Import-knappen.

Divi import

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

Divis temabygger lar deg erstatte standardbunnteksten med en ny ved å oppdatere nettstedsmal Standard.

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.

Bunntekstkonstruksjon

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

Bygge fra bunnen av

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 festet slik at den flyter nederst på skjermen, må vi gi den en fast posisjon nederst i midten som følger:

  • Posisjon: fast
  • Sted: nedre sentrum
Bunntekstposisjon

Del 2: Lage innholdet i den faste bunntekstlinjen

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å din nettstedet Web. Sørg for å holde menyelementene til 4 eller færre.

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 ressources tillegg som kan hjelpe deg med å lage i utformingen av nettstedet ditt med Divi.