[Ad_1]
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 layoutet GRATIS
For at få fingrene i designerne i denne tutorial skal du først downloade den ved at bruge knappen nedenfor. For at få adgang til download skal du abonnere på vores Divi Daily mailingliste ved hjælp af formular under. Som ny abonnent vil du modtage endnu flere Divi-fordele og en gratis Divi Layout-pakke hver mandag! Hvis du allerede er på listen, skal du blot indtaste din e-mailadresse nedenfor og klikke på download. Du vil ikke blive "gentilmeldt" eller modtage yderligere e-mails.
Hvis du vil importere sektionens layout til dit Divi -bibliotek, skal du gå til Divi -biblioteket.
Klik på knappen Import.
Vælg pop-up-vinduet i portabilitet, og vælg den fil, der skal downloades fra din computer.
Klik derefter på importknappen.
Når det er gjort, vil layoutet af sektionerne være tilgængeligt i Divi Builder.
Videre til selvstudiet, vil du?
Hvad du behøver for at komme i gang
For at komme i gang skal du gøre følgende:
- Hvis du ikke allerede har gjort det, skal du installere og aktivere Divi-tema.
- Opret en ny side i WordPress, og brug Divi Builder til at redigere siden i front-end (visual builder).
- Vælg indstillingen "Byg fra bunden".
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
I den første del af denne vejledning skal vi oprette sektionen og overskriften over vandlinjen, der fungerer som hovedoverskriften på vores side. Afsnittet vil være fuld skærm på skrivebordet for at sikre, at sektionen fylder hele vinduet.
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]
På fanen Design skal du opdatere minimumshøjden og polstringen.
- Minimumshøjde: 100 vh (stationær computer), automatisk (tablet og telefon)
- Polstring: top 20vh, bund 20vh
Overskriftstekst
For at oprette overskriftsteksten skal du tilføje et nyt tekstmodul til linjen.
Opdater derefter indholdet med følgende H1 -overskrift:
<h1>Above the Fold</h1>
Tekstindstillinger
Opdater fanen Overskrift skrifttyper på fanen Design i Tekstindstillinger på følgende måde:
- Titelfont: Rubik
- Header Font Vægt: Semi fed
- TT Header Font Style
- Tekstjustering af overskrift: Center
- Titel Tekstfarve: # 302ea7
- Titeltekststørrelse: 130px (desktop), 70px (tablet), 40px (telefon)
- Afstand mellem bogstaver: 2px
- Hovedlinjens højde: 1,3 em
Del 2: Oprettelse af sektionen under folden
For at demonstrere funktionaliteten af den klæbrige navigationslinje, skal vi tilføje et afsnit under folden, så vi kan få plads til at rulle.
For at oprette afsnittet skal du duplikere afsnittet over vandlinjen, vi lige har oprettet.
Opdater baggrunden for det dobbelte afsnit.
- Baggrundsfarve: # f4def1
Giv derefter sektionen en stor minimumshøjde, så vi har plads til at rulle siden. Dette er bare en sektion, der skal udfyldes i stedet for det faktiske indhold på en side.
Opdater derefter indholdet af tekstmodulet ved at erstatte ordet "Nedenfor" med "Ovenstående".
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øj et nyt afsnit og en ny linje
Tilføj et nyt almindeligt afsnit direkte under afsnittet over vandlinjen.
Tilføj derefter en række til en kolonne i 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.
- Udfyldning: 0px top, 0px bund
Tilføj synligt overløb
For at sikre, at rullemenuerne forbliver synlige, skal du opdatere synlighedsindstillingerne som følger:
- Vandret overløb: Synligt
- Lodret overløb: synligt
Giv sektionen en absolut position på mobilen
Mobilens rullemenu åbnes som standard under hamburgerikonet. Hvis vi beholder navigationslinjen nederst, vil det skjule rullemenuen, hvis brugeren klikker på den i ned-positionen. For en bedre brugeroplevelse ønsker vi, at navigationslinjen skal starte helt øverst på siden på tablets og telefonens skærm.
For at gøre dette skal du tildele afsnittet en absolut position på tablet og telefon.
- Position: Relativ (stationær computer), Absolut (tablet og telefon)
Tilføj klæbrig position til desktop og mobil
Opdater følgende for at tilføje den klæbrige position til navigationslinjesektionen:
- Sticky Position: Stick to Top and Bottom (desktop), Stick to Top (tablet og telefon)
Opdater rækken polstring
Når den klæbrige sektion er færdig, skal du åbne rækkeindstillingerne inde i sektionen og opdatere udfyldningen som følger:
- Polstring: 10 pixels i toppen, 10 pixels i bunden
Opret en navigationsmenu
Med sektionen og rækken på plads er vi klar til at oprette navigationsmenuen.
Start med at tilføje et menumodul til rækken i en kolonne.
Menuindhold
Opdater menuindholdet som følger:
- vælg menuen fra rullelisten
- tilføj logo -billede (jeg bruger 122px med 52px -billede)
- fjern standard baggrundsfarve
På fanen Design skal du opdatere følgende menutekst og ikonindstillinger:
- Aktiv linkfarve: #fff
- Menuskrift: Rubik
- Menu Skrifttype: TT
- Menutekstfarve: #fff
- Menutekststørrelse: 16px
- Tekstjustering: højre
- Rullemenuens farvefarve: # e19dff
- Tekstfarve i mobilmenu: # 302ea7
- Ikon farve på indkøbsvogn: #fff
- Søg ikonfarve: #fff
- Hamburger menu ikon farve: #fff
Brug af en kant til at opveje navigationslinjens absolutte position på mobilen
Da navigationslinjesektionen har en absolut position på mobilen, sidder søjlen over (og afskærer) den øverste del af siden. For at løse dette problem skal vi forskyde den øverste sektion ved hjælp af en topkant i samme højde som navigationslinjen / sektionen.
Undersøg højden af navigationslinjesektionen på mobilen
For at bestemme højden på navigationslinjen på mobilen skal du åbne en liveversion af siden i et nyt browservindue. Derefter kan du reducere bredden af browseren under 980px for at se mobilmenuen. Højreklik på sektionen, der indeholder menuen, og vælg indstillingen Inspekter element i browserens kontekstmenu. Du bør se en værktøjskasse under sektionen, der viser sektionens dimensioner (inklusive højde). For dette eksempel er højden på navigationslinjesektionen 72px.
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 skal du tilføje følgende øverste kant på både tablet og telefon:
- Øverste kantbredde: 72px (tablet og telefon)
- Overkantfarve: # 302ea7
Fordi kanten er den samme højde som sektionen med den absolutte position, vil du ikke kunne se grænsen, da den kun tjener til at skubbe sektionen ned, så den ikke bliver skåret.
Endelig resultat
Find slutresultatet!
endelige tanker
Oprettelse af en klæbrig navbar fra bund til top kan nemt opnås ved hjælp af Divis indbyggede position og klæbende muligheder. Nøglen er at give sektionen over folden en højde på 100vh, og tilføj derefter navbar-sektionen nedenfor, der klæber til bunden og toppen af navigatoren. Forhåbentlig vil dette hjælpe med at tilføje en mere unik og engagerende over vandlinjen 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 builderen. Divi-tema.
Jeg kan ikke vente med at høre fra dig i kommentarerne.
Til dit helbred!
[Ad_2]
