Vil du oprette en navigationslinje i Divi, der er klæbrig fra bunden til toppen af siden?
I selvstudiet Divi I dag vil vi vise dig trin for trin, hvordan du opretter en klæbrig bund-til-top navigationslinje i Divi.
Dette vil gøre det muligt for navigeringslinjen til at begynde med at forblive nederst på siden for et enkelt layout over skillelinjen. Når du derefter ruller sektionen over sidefolden, forbliver navigationslinjen øverst på siden og forbliver der hele siden.
Man kan sige, at siden vil "overtage" menuen nederst på skærmen og bringe en flot interaktionseffekt til din hovedmenu og din Websted.
Lad os starte!
undersøgelse
For at hjælpe dig med at visualisere det resultat, vi forsøger at opnå, lad os se på slutresultatet:
Download DIVI nu!!!
Lad os starte med at oprette en ny side med Divi Builder
For at komme i gang skal du gøre følgende:
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Opret en klæbrig navigationslinje fra bund til top i Divi
Del 1: Oprettelse af sektionen og overskriften over vandlinjen
Til den første del af denne øvelse opretter vi sektionen og overskriften over skillelinjen, der vil fungere som hovedhovedsektionen på vores side. Sektionen vil være fuldskærm på skrivebordet for at sikre, at sektionen fylder hele visningsvinduet.
Læs også: Divi: Vælg mellem gitteret og layoutet i fuld bredde af modulet Filtrerbar portefølje
Tilføj en række
For at komme i gang skal du føje en række til en kolonne til standardsektionen.
Sektionsindstillinger
Inden du tilføjer et modul, skal du åbne sektionsindstillingerne og tilføje en baggrund som følger:
- Baggrundsfarve: #e9f9ff
- Baggrundsbillede: [tilføj billede]
Under fanen Design, opdater minimumshøjden og polstringen.
- Min højde: 100vh (desktop), auto (tablet og telefon)
- Polstring: 20vh (top og bund)
Overskriftstekst
For at oprette overskriftsteksten skal du tilføje et nyt tekstmodul til linjen.
Opdater derefter indhold med følgende H1-header:
<h1>Above the Fold</h1>
Tekstindstillinger
Under fanen Design i tekstmodulets indstillinger skal du opdatere skrifttypestilene til sidehovedet som følger:
- Overskrift:
- Skrifttype: Ruby
- Skrifttypevægt: Semi fed
- Stil: TT
- Tekstjustering: centreret
- Tekstfarve: #302ea7
- Størrelse: 130px (desktop), 70px (tablet), 40px (telefon)
- Bogstavafstand: 2px
- Linjehøjde: 1,3 em
Del 2: Oprettelse af sektionen under vandlinjen
For at demonstrere funktionaliteten af den klæbrige navbar, skal vi tilføje en sektion under folden, så vi kan have plads til at rulle.
For at oprette sektionen skal du duplikere sektionen over den folder, vi lige har oprettet.
Opdater baggrunden for det dobbelte afsnit.
- Baggrundsfarve: #f4def1
Giv derefter afsnittet en stor minimumshøjde, så vi har plads til at scrolle ned på siden. Dette er simpelthen et afsnit, der skal udfyldes i stedet for indhold ægte én side.
- Min højde: 200vh
Opdater derefter indhold af tekstmodulet ved at erstatte ordet "Under" takket være "Over".
Del 3: Opret den klæbrige navigationslinje
For at oprette den klæbrige navigationslinje fra bunden til toppen er vores første trin at oprette en ny sektion med en række til en kolonne.
Tilføjet nyt afsnit og linje
Lad os først tilføje en ny almindelig sektion direkte under sektionen over skillelinjen.
Lad os derefter tilføje en række med én kolonne til sektionen.
Sektionens baggrund og polstring
Åbn sektionsindstillingerne, og opdater baggrundsfarven.
- Baggrundsfarve: #302ea7
Fjern derefter den øverste og nederste polstring, så navigationslinjen har mindre højde.
- Polstring: 0px (top og bund)
Tilføj synligt overløb
For at sikre, at rullemenuerne forbliver synlige, skal du opdatere synlighedsindstillingerne som følger:
- Vandret overløb: Synlig
- Lodret overløb: Synlig
Giv sektionen en absolut position på mobilen
Den mobile rullemenu åbnes som standard under hamburgerikonet. Hvis vi holder navigationslinjen i bunden, vil den skjule rullemenuen, hvis brugeren klikker på den.
For en bedre brugeroplevelse ønsker vi, at navigationslinjen starter helt øverst på siden på tablet- og telefonskærmen.
Til dette skal du give sektionen en absolut position på tablet og telefon.
- Stilling: pårørende (desktop), absolut (tablet og telefon)
Tilføj klæbrig position til desktop og mobil
For at tilføje den klæbende position til navigationslinjesektionen skal du opdatere følgende:
- Sticky Position: Hold dig til toppen og bunden (skrivebord), Hold dig til toppen (tablet og telefon)
Opdater rækken polstring
Når den klæbrige sektion er færdig, skal du åbne rækkeindstillingerne i sektionen og opdatere polstringen som følger:
- Polstring: 10px (top og bund)
Opret en navigationsmenu
Med sektionen og linjen på plads, er vi klar til at oprette navigationsmenuen.
Start med at tilføje et menumodul til rækken med én kolonne.
Menuindhold
Opdater menuindholdet som følger:
- vælg menuen fra rullelisten
- tilføje logobillede
- fjern standard baggrundsfarve
Under fanen Design, opdater følgende menutekst og ikonindstillinger:
- Aktivt linkfarve: #fff
- Menuskrifttype: Ruby
- Menuskrifttype: TT
- Tekstfarve: #fff
- Menutekststørrelse: 16px
- Tekstjustering: højre
- Rullemenulinjefarve: #e19dff
- Mobilmenu Tekstfarve: #302ea7
- Indkøbskurv Ikon Farve: #fff
- Søgeikon Farve: #fff
- Hamburger Menu Ikon Farve: #fff
Brug af en kant til at opveje navigationslinjens absolutte position på mobilen
Da navigationslinjens sektion har en absolut position på mobilen, vil bjælken sidde over (og afskære) den øverste sektion af siden. For at rette op på dette skal vi forskyde den øverste sektion ved hjælp af en topramme i samme højde som navigationslinjen/sektionen.
Undersøg højden af navigationslinjesektionen på mobilen
For at bestemme højden af navigationslinjen på mobilen skal du åbne en liveversion af siden i et nyt browservindue. Så kan du reducere browserbredden til under 980px for at se mobilmenuen.
Du kan også konsultere: Divi: Sådan opretter du en klæbrig navigationslinje
Højreklik på sektionen, der indeholder menuen, og vælg indstillingen inspicere elementet i browserens kontekstmenu. Du burde se en boks OUTILS under sektionen, der angiver sektionens dimensioner (inklusive højde).
I dette eksempel er højden af navbarsektionen 72 pixels.
Tilføj en øverste kantforskydning til sektionen over folden
Nu hvor vi har bestemt sektionens højde, skal du åbne indstillingerne for den øverste sektion (over folden).
Under fanen Design, tilføj følgende øverste kant på tablet og telefon:
- Øverste kantbredde: 72 pixels (tablet og telefon)
- Øverste kantfarve: #302ea7
Da kanten har samme højde som sektionen med den absolutte position, vil du ikke kunne se grænsen, fordi den kun tjener til at skubbe sektionen ned, så den ikke bliver skåret.
Endelig resultat
Find slutresultatet!
Download DIVI nu!!!
Konklusion
At skabe en bund-til-top klæbrig navbar kan nemt gøres ved hjælp af Divi's indbyggede position og klæbrige muligheder.
Nøglen er at give sektionen over fold en højde på 100vh, og derefter tilføje navbar-sektionen nedenfor, der klæber til bunden og toppen af browseren. Håber dette hjælper med at tilføje en mere unik og engagerende over skillelinjen til din Websted.
Denne klæbrige navbar fungerer bedst til et enkelt sidedesign frem for en samlet skabelon. Når det er sagt, kan du nemt vælge at bruge dette som dit hjemmesidedesign og bruge en global header til resten af siderne ved hjælp af Divi tema generator .
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
