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.

[Ad_1]

I dagens Divi-opplæring viser vi deg trinn for trinn hvordan du lager en klebrig navigasjonslinje nedenfra og opp i Divi. Dette vil tillate navigasjonslinjen å forbli nederst på siden i utgangspunktet for et enkelt oppsett over vannlinjen. Så når du kommer forbi seksjonen over sidens vannlinje, forblir navigasjonslinjen øverst på siden og blir der hele resten av siden. Du kan si at siden vil "overta" menyen nederst på skjermen og gi en fin interaksjonseffekt til hovedmenyen og nettstedet.

La oss begynne!

undersøkelsen

For å hjelpe deg med å visualisere resultatet vi prøver å oppnå, la oss se på sluttresultatet:

Last ned oppsettet GRATIS

For å få hendene på designene for denne opplæringen, må du først laste den ned ved hjelp av knappen nedenfor. For å få tilgang til nedlastingen må du abonnere på vår Divi Daily -postliste ved å bruke skjemaet nedenfor. Som ny abonnent får du enda flere Divi -fordeler hver mandag og en gratis Divi Layout -pakke! Hvis du allerede er på listen, bare skriv inn e -postadressen din nedenfor og klikk på nedlasting. Du vil ikke bli "registrert på nytt" eller motta flere e-poster.

For å importere oppsettet til delen til Divi -biblioteket, gå til Divi -biblioteket.

Klikk på Importer -knappen.

I popup-vinduet for portabilitet velger du kategorien Import og velger filen du vil laste ned fra datamaskinen.

Klikk deretter på importknappen.

divi varslingsboks

Når det er gjort, vil oppsettet for seksjonene være tilgjengelig i Divi Builder.

Gå til opplæringen, vil du?

Hva du trenger for å komme i gang

utvide hjørnetapper

For å komme i gang må du gjøre følgende:

  1. Hvis du ikke allerede har gjort det, installerer og aktiverer du Divi -temaet.
  2. Opprett en ny side i WordPress og bruk Divi Builder til å redigere siden i front-end (visual builder).
  3. Velg alternativet "Bygg fra bunnen av".

Etter det vil du ha et blankt lerret for å begynne å designe i Divi.

Lag en klebrig navigasjonslinje fra bunn til topp i Divi

Del 1: Opprette seksjonen og overskriften over vannlinjen

I den første delen av denne opplæringen skal vi lage seksjonen og overskriften over vannlinjen som vil fungere som hovedoverskriften på siden vår. Delen vil være fullskjerm på skrivebordet for å sikre at delen tar opp hele vinduet.

Legg til en rad

For å komme i gang, legg til en rad i en kolonne i standarddelen.

klebrig divi -navigasjonslinje fra bunn til topp

Seksjonsinnstillinger

Før du legger til en modul, åpner du seksjonsinnstillingene og legger til en bakgrunn som følger:

  • Bakgrunnsfarge: # e9f9ff
  • Bakgrunnsbilde: [legg til bilde]

klebrig divi -navigasjonslinje fra bunn til topp

Oppdater minimumshøyde og polstring på kategorien Design.

  • Minimumshøyde: 100 vh (stasjonær datamaskin), automatisk (nettbrett og telefon)
  • Polstring: topp 20vh, nedre 20vh

klebrig divi -navigasjonslinje fra bunn til topp

Overskriftstekst

For å lage toppteksten, legg til en ny tekstmodul på linjen.

klebrig divi -navigasjonslinje fra bunn til topp

Oppdater deretter innholdet med følgende H1 -topptekst:

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.

<h1>Above the Fold</h1>

klebrig divi -navigasjonslinje fra bunn til topp

Tekstinnstillinger

I kategorien Design i Tekstinnstillinger oppdaterer du skriftstiler for overskrift på følgende måte:

  • Tittelskrift: Rubik
  • Header Font Weight: Semi Fet
  • TT Header Font Style
  • Tekstjustering i topptekst: Senter
  • Tittel Tekstfarge: # 302ea7
  • Tittel tekststørrelse: 130px (stasjonær), 70px (nettbrett), 40px (telefon)
  • Avstand mellom bokstaver: 2px
  • Heading Line Høyde: 1,3 em

klebrig divi -navigasjonslinje fra bunn til topp

Del 2: Opprette seksjonen under brettet

For å demonstrere funksjonaliteten til den klebrige navigasjonslinjen, må vi legge til en seksjon under brettet slik at vi kan få plass til å rulle.

For å lage delen, dupliser delen over vannlinjen vi nettopp opprettet.

klebrig divi -navigasjonslinje fra bunn til topp

Oppdater bakgrunnen for den dupliserte delen.

  • Bakgrunnsfarge: # f4def1

klebrig divi -navigasjonslinje fra bunn til topp

Gi deretter seksjonen en stor minimumshøyde slik at vi har plass til å bla gjennom siden. Dette er bare en seksjon å fylle ut i stedet for det faktiske innholdet på en side.

klebrig divi -navigasjonslinje fra bunn til topp

Oppdater deretter innholdet i tekstmodulen ved å erstatte ordet "Nedenfor" med "Over".

klebrig divi -navigasjonslinje fra bunn til topp

Del 3: Lag den klebrige navigasjonslinjen

For å lage den klebrige navigasjonslinjen fra bunnen til toppen, er vårt første trinn å lage en ny seksjon med en rad til en kolonne.

Legg til en ny seksjon og en ny linje

Legg til en ny vanlig seksjon rett under seksjonen over vannlinjen.

klebrig divi -navigasjonslinje fra bunn til topp

Legg deretter til en rad i en kolonne i seksjonen.

klebrig divi -navigasjonslinje fra bunn til topp

Snittbakgrunn og polstring

Åpne seksjonsinnstillingene og oppdater bakgrunnsfargen.

  • Bakgrunnsfarge: # 302ea7

klebrig divi -navigasjonslinje fra bunn til topp

Fjern deretter topp- og bunnpolstringen slik at navigasjonsfeltet har mindre høyde.

  • Fyll: 0px topp, 0px bunn

klebrig divi -navigasjonslinje fra bunn til topp

Legg til synlig overløp

For å sikre at rullegardinmenyene forblir synlige, oppdater synlighetsalternativene som følger:

  • Horisontal overløp: Synlig
  • Vertikal overløp: synlig

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

klebrig divi -navigasjonslinje fra bunn til topp

Gi delen en absolutt posisjon på mobil

Nedtrekksmenyen for mobil åpnes som standard under hamburgerikonet. Hvis vi beholder navigasjonslinjen nederst, vil det skjule rullegardinmenyen hvis brukeren klikker på den i ned-posisjonen. For en bedre brukeropplevelse, vil vi at navigasjonslinjen skal starte helt øverst på siden på nettbrettet og telefonskjermen.

For å gjøre dette, tildel delen en absolutt posisjon på nettbrett og telefon.

  • Posisjon: Relativ (stasjonær datamaskin), Absolutt (nettbrett og telefon)

klebrig divi -navigasjonslinje fra bunn til topp

Legg til en klebrig posisjon for datamaskiner og mobiler

For å legge til den klebrig posisjonen i navigasjonslinjeseksjonen, oppdater følgende:

  • Klebrig posisjon: Hold deg til toppen og bunnen (skrivebordet), hold deg til toppen (nettbrett og telefon)

klebrig divi -navigasjonslinje fra bunn til topp

Oppdater radfylling

Når den klebrig delen er fullført, åpner du radinnstillingene inne i delen og oppdaterer fyllet slik:

  • Polstring: 10 piksler øverst, 10 piksler nederst

klebrig divi -navigasjonslinje fra bunn til topp

Lag en navigasjonsmeny

Med delen og raden på plass, er vi klare til å lage navigasjonsmenyen.

Start med å legge til en menymodul i raden i en kolonne.

klebrig divi -navigasjonslinje fra bunn til topp

Menyinnhold

Oppdater menyinnholdet som følger:

  • velg menyen fra rullegardinlisten
  • legg til et logobilde (jeg bruker et bilde på 122 x 52 piksler)
  • fjern standard bakgrunnsfarge

klebrig divi -navigasjonslinje fra bunn til topp

I kategorien Design oppdaterer du følgende menytekst og ikoninnstillinger:

  • Aktiv lenkefarge: #fff
  • Menyfont: Rubik
  • Meny Skriftstil: TT
  • Menytekstfarge: #fff
  • Menytekststørrelse: 16px
  • Tekstjustering: høyre
  • Nedtrekksmenyen linjefarge: # e19dff
  • Tekstfarge for mobilmeny: # 302ea7
  • Ikonfarge for handlekurven: #fff
  • Søkeikonfarge: #fff
  • Hamburger -menyikonfarge: #fff

klebrig divi -navigasjonslinje fra bunn til topp

Ved å bruke en kant for å kompensere den absolutte posisjonen til navigasjonslinjen på mobilen

Siden navigasjonsfeltdelen har en absolutt posisjon på mobilen, vil linjen sitte over (og kutte) den øverste delen av siden. For å løse dette problemet må vi forskyve den øverste delen med en øvre kant i samme høyde som navigasjonslinjen / delen.

Inspiser høyden på navigasjonslinjeseksjonen på mobilen

For å bestemme høyden på navigasjonslinjen på mobilen, åpner du en liveversjon av siden i et nytt nettleservindu. Deretter kan du redusere bredden på nettleseren under 980 piksler for å se mobilmenyen. Høyreklikk på delen som inneholder menyen, og velg alternativet Inspiser element fra nettleserens hurtigmeny. Du bør se en verktøykasse under seksjonen som viser dimensjonene (inkludert høyde) på seksjonen. For dette eksemplet er høyden på navigasjonslinjeseksjonen 72 piksler.

klebrig divi -navigasjonslinje fra bunn til topp

Legg til en øvre kantforskyvning til delen over brettet

Nå som vi har bestemt høyden på seksjonen, åpner du innstillingene for den øverste delen (over brettet).

Under kategorien Design legger du til følgende øvre kant på både nettbrett og telefon:

  • Øvre kantbredde: 72 piksler (nettbrett og telefon)
  • Overkantfarge: # 302ea7

Fordi grensen er i samme høyde som seksjonen med absolutt posisjon, vil du ikke kunne se grensen da den bare tjener til å skyve seksjonen ned slik at den ikke blir kuttet.

klebrig divi -navigasjonslinje fra bunn til topp

Endelig resultat

Oppdag sluttresultatet!

avslutt~~POS=TRUNC tanker

Det er enkelt å lage en klebrig navigasjonslinje nedenfra og opp ved hjelp av Divis innebygde posisjon og klebrige alternativer. Nøkkelen er å gi delen over vannlinjen en høyde på 100vh, og deretter legge til navigasjonsfeltet nedenfor som fester seg til bunnen og toppen av nettleseren. Forhåpentligvis vil dette bidra til å legge til en mer unik og engasjerende over vannlinjen til nettstedet ditt.

Denne klebrige navigasjonslinjen fungerer best for en enkelt side design i stedet for en samlet mal. Når det er sagt, kan du enkelt velge å bruke det som hjemmesidedesign og bruke en samlet overskrift for resten av sidene ved hjelp av Divi -temabygger.

Jeg gleder meg til å høre fra deg i kommentarene.

Til helsen din!



[Ad_2]

Kilde lenke

0 aksjer
del
tweet
Enregistrer