Hvordan lage en klebrig, nedefra navigasjonslinje i Divi

I dagens Divi-opplæring skal vi vise deg, trinn for trinn, hvordan du lager en bunn-til-topp klebrig navbar i Divi. Dette vil tillate navigasjonslinjen å forbli nederst på siden til å begynne med for et unikt oppsett over den synlige delen. Så, når du kommer forbi delen over sidebrettet, vil navigasjonslinjen forbli øverst på siden og forbli der gjennom resten av siden. Du kan si at siden vil "ta over" menyen nederst på skjermen og bringe en fin interaksjonseffekt til hovedmenyen din og din nettstedet Web.

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å tak i designene i denne opplæringen, må du først laste den ned ved å bruke knappen nedenfor. For å få tilgang til nedlastingen, må du abonnere på vår Divi Daily e-postliste ved å bruke skjema under. Som ny abonnent vil du motta enda flere Divi-fordeler og en gratis Divi Layout-pakke hver mandag! Hvis du allerede er på listen, skriv inn e-postadressen din nedenfor og klikk på last ned. 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.

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

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

1. Hvis du ikke allerede har gjort det, installer og aktiver Divi-tema.
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.

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]

Oppdater minimumshøyde og polstring på kategorien Design.

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

Overskriftstekst

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

Oppdater deretter innholdet med følgende H1 -topptekst:

<h1>Above the Fold</h1>

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

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.

Oppdater bakgrunnen for den dupliserte delen.

• Bakgrunnsfarge: # f4def1

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.

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

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.

Legg deretter til en rad i en kolonne i seksjonen.

Snittbakgrunn og polstring

Åpne seksjonsinnstillingene og oppdater bakgrunnsfargen.

• Bakgrunnsfarge: # 302ea7

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

• Fyll: 0px topp, 0px bunn

Legg til synlig overløp

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

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

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)

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)

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

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.

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

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

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.

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.

Endelig resultat

Oppdag sluttresultatet!

avslutt~~POS=TRUNC tanker

Å lage en klebrig navigasjonslinje fra bunn til topp kan enkelt oppnås ved å bruke Divis innebygde posisjon og klebrige alternativer. Nøkkelen er å gi seksjonen over bretten en høyde på 100vh, og legg deretter til navigasjonslinjen under som fester seg til bunnen og toppen av navigatoren. Forhåpentligvis vil dette bidra til å legge til en mer unik og engasjerende over vannlinjen til din nettstedet Web.

Denne klebrige navigasjonslinjen fungerer best for en enkeltsidedesign i stedet for en generell mal. Når det er sagt, kan du enkelt velge å bruke dette som startsidedesign og bruke en global overskrift for resten av sidene ved å bruke byggeren. Divi-tema.

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

Til helsen din!