Vil du lage en navigasjonslinje i Divi som er klebrig fra bunnen til toppen av siden?
I opplæringen Divi I dag skal vi vise deg trinn for trinn hvordan du lager en klebrig bunn-til-topp navigasjonslinje i Divi.
Dette vil tillate navigasjonslinjen til å begynne med å forbli nederst på siden for et unikt oppsett over skillelinjen. Så, når du ruller delen over sidebrettet, vil navigasjonslinjen forbli øverst på siden og forbli der gjennom hele 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 starte!
undersøkelsen
For å hjelpe deg med å visualisere resultatet vi prøver å oppnå, la oss se på sluttresultatet:
Last ned DIVI nå!!!
La oss starte med å lage en ny side med Divi Builder
For å komme i gang må du gjøre følgende:
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (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: Lage seksjonen og toppteksten over vannlinjen
For den første delen av denne opplæringen lager vi seksjonen og overskriften over den synlige delen som vil fungere som hovedoverskriftsseksjonen på siden vår. Seksjonen vil være fullskjerm på skrivebordet for å sikre at seksjonen tar opp hele visningsvinduet.
Les også: Divi: Velg mellom rutenettet og oppsettet i full bredde til modulen Filterable Portfolio
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]
Under fanen utforming, oppdater minimumshøyden og polstringen.
- Min høyde: 100vh (stasjonær), automatisk (nettbrett og telefon)
- Polstring: 20vh (øverst og bunn)
Overskriftstekst
For å lage overskriftsteksten, legg til en ny tekstmodul på linjen.
Oppdater deretter innhold med følgende H1-overskrift:
<h1>Above the Fold</h1>
Tekstinnstillinger
Under fanen utforming i tekstmodulinnstillingene, oppdater skrifttekststilene som følger:
- Overskrift:
- Font: Ruby
- Skriftvekt: Semi fet
- Stil: TT
- Tekstjustering: sentrert
- Tekstfarge: #302ea7
- Størrelse: 130px (stasjonær), 70px (nettbrett), 40px (telefon)
- Bokstavavstand: 2px
- Linjehøyde: 1,3 em
Del 2: Lage seksjonen under vannlinjen
For å demonstrere funksjonaliteten til den klebrige navigasjonslinjen, må vi legge til en seksjon under brettingen slik at vi kan ha plass til å rulle.
For å opprette seksjonen, dupliser seksjonen over bretten vi nettopp opprettet.
Oppdater bakgrunnen for den dupliserte delen.
- Bakgrunnsfarge: #f4def1
Gi så seksjonen en stor minimumshøyde slik at vi får plass til å bla nedover siden. Dette er ganske enkelt en del som skal fylles ut i stedet for innhold ekte én side.
- Min høyde: 200vh
Oppdater deretter innhold av tekstmodulen ved å erstatte ordet "Under" pari "Ovenfor".
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.
Lagt til ny seksjon og linje
Først, la oss legge til en ny vanlig seksjon rett under seksjonen over den synlige delen.
La oss deretter legge til en rad med én kolonne i seksjonen.
Snittbakgrunn og polstring
Åpne seksjonsinnstillingene og oppdater bakgrunnsfargen.
- Bakgrunnsfarge: #302ea7
Fjern deretter topp- og bunnpolstringen slik at navigasjonslinjen har mindre høyde.
- Polstring: 0px (øverst og bunn)
Legg til synlig overløp
For å sikre at rullegardinmenyene forblir synlige, oppdater synlighetsalternativene som følger:
- Horisontalt overløp: Synlig
- Vertikal overløp: Synlig
Gi delen en absolutt posisjon på mobil
Mobilrullegardinmenyen åpnes som standard under hamburgerikonet. Hvis vi holder navigasjonslinjen nederst, vil den skjule rullegardinmenyen hvis brukeren klikker på den.
For en bedre brukeropplevelse ønsker vi at navigasjonslinjen starter helt øverst på siden på nettbrett- og telefonskjermen.
For dette, gi seksjonen en absolutt posisjon på nettbrett og telefon.
- Stilling: slektning (stasjonær), Absolutt (nettbrett og telefon)
Legg til klebrig posisjon for skrivebord og mobil
For å legge til den klebrige posisjonen til navigasjonslinjedelen, oppdater følgende:
- Sticky Position: Hold deg til toppen og bunnen (skrivebord), Hold deg til toppen (nettbrett og telefon)
Oppdater radfylling
Når den klebrige delen er fullført, åpner du radinnstillingene inne i delen og oppdaterer polstringen som følger:
- Polstring: 10px (øverst og bunn)
Lag en navigasjonsmeny
Med seksjonen og linjen på plass, er vi klare til å lage navigasjonsmenyen.
Start med å legge til en menymodul i raden med én kolonne.
Menyinnhold
Oppdater menyinnholdet som følger:
- velg menyen fra rullegardinlisten
- legg til logobilde
- fjern standard bakgrunnsfarge
Under fanen utforming, oppdater følgende menytekst og ikoninnstillinger:
- Aktiv lenkefarge: #fff
- Menyskrift: Ruby
- Meny Skriftstil: TT
- Tekstfarge: #fff
- Menytekststørrelse: 16px
- Tekstjustering: høyre
- Rullegardinmeny Linjefarge: #e19dff
- Mobilmeny Tekstfarge: #302ea7
- Handlevognikon Farge: #fff
- Søkeikon Farge: #fff
- Hamburgermenyikon Farge: #fff
Ved å bruke en kant for å kompensere den absolutte posisjonen til navigasjonslinjen på mobilen
Siden navigasjonslinjedelen har en absolutt posisjon på mobil, vil linjen sitte over (og kutte av) den øverste delen av siden. For å fikse dette, må vi forskyve toppseksjonen ved å bruke en toppkant med samme høyde som navigasjonslinjen/seksjonen.
Inspiser høyden på navigasjonslinjeseksjonen på mobilen
For å bestemme høyden på navigasjonslinjen på mobil, åpne en aktiv versjon av siden i et nytt nettleservindu. Deretter kan du redusere nettleserbredden under 980px for å se mobilmenyen.
Du kan også konsultere: Divi: Hvordan lage en klebrig navigasjonslinje
Høyreklikk på delen som inneholder menyen og velg alternativet inspiser elementet i nettleserens kontekstmeny. Du bør se en boks outils under seksjonen som angir seksjonens dimensjoner (inkludert høyde).
For dette eksemplet er høyden på navigasjonslinjen 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 fanen utforming, legg til følgende øvre kant på nettbrettet og telefonen:
- Toppkantbredde: 72 piksler (nettbrett og telefon)
- Topp kantfarge: #302ea7
Siden kanten har samme høyde som seksjonen med den absolutte posisjonen, vil du ikke kunne se grensen fordi den bare tjener til å skyve seksjonen ned slik at den ikke blir kuttet.
Endelig resultat
Oppdag sluttresultatet!
Last ned DIVI nå!!!
konklusjonen
Å lage en bunn-til-topp klebrig navbar kan enkelt gjøres ved å bruke Divis innebygde posisjon og klissete alternativer.
Nøkkelen er å gi seksjonen over bretten en høyde på 100vh, og legg deretter til navbarseksjonen under som fester seg til bunnen og toppen av nettleseren. Håper dette bidrar til å legge til et mer unikt og engasjerende over den synlige delen av nettsiden 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 hjemmesidedesign og bruke en global overskrift for resten av sidene ved å bruke Divi-temagenerator .
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
