Vill du skapa ett navigeringsfält i Divi som är klibbigt från botten till toppen av sidan?
I handledningen Divi Idag kommer vi att visa dig steg för steg hur du skapar en klibbig botten-till-över-navigeringsfält i Divi.
Detta kommer att tillåta navigeringsfältet att initialt förbli längst ner på sidan för en unik layout ovanför mitten. Sedan, när du rullar avsnittet ovanför sidvikningen, kommer navigeringsfältet att förbli överst på sidan och stanna där under hela sidan.
Man kan säga att sidan kommer att "ta över" menyn längst ner på skärmen och ge en snygg interaktionseffekt till din huvudmeny och din webbplats.
Låt oss börja!
undersökningen
För att hjälpa dig att visualisera resultatet vi försöker uppnå, låt oss titta på slutresultatet:
Ladda ner DIVI nu!!!
Låt oss börja med att skapa en ny sida med Divi Builder
För att komma igång måste du göra följande:
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använd Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Skapa ett klibbigt navigeringsfält från botten till toppen i Divi
Del 1: Skapa sektionen och rubriken ovanför vattenlinjen
För den första delen av den här handledningen skapar vi avsnittet och rubriken ovanför mitten som kommer att fungera som huvudsektionen för vår sida. Avsnittet kommer att vara i helskärm på skrivbordet för att säkerställa att avsnittet tar upp hela visningsfönstret.
Läs också: Divi: Välj mellan rutnäts- och fullbreddslayouten för modulen Filterable Portfolio
Lägg till en rad
För att komma igång, lägg till en rad i en kolumn i standardavsnittet.
Avsnitt inställningar
Innan du lägger till en modul, öppna sektionsinställningarna och lägg till en bakgrund enligt följande:
- Bakgrundsfärg: #e9f9ff
- Bakgrundsbild: [lägg till bild]
Under fliken Designa, uppdatera minimihöjden och stoppningen.
- Min höjd: 100vh (Skrivbord), auto (Surfplatta och telefon)
- Stoppning: 20vh (topp och botten)
Rubrik
För att skapa rubriktexten, lägg till en ny textmodul på raden.
Uppdatera sedan innehåll med följande H1-huvud:
<h1>Above the Fold</h1>
Textinställningar
Under fliken Designa i textmodulens inställningar uppdaterar du typsnittsstilarna för rubriken enligt följande:
- Rubrik:
- Typsnitt: Ruby
- Teckensnittsvikt: Halvfet
- Stil: TT
- Textjustering: centrerad
- Textfärg: #302ea7
- Storlek: 130px (dator), 70px (surfplatta), 40px (telefon)
- Bokstavsavstånd: 2px
- Linjehöjd: 1,3 em
Del 2: Skapa sektionen under vattenlinjen
För att visa funktionaliteten hos den klibbiga navigeringsfältet måste vi lägga till en sektion nedanför mitten så att vi kan ha utrymme att rulla.
För att skapa avsnittet, duplicera avsnittet ovanför vecket vi just gjorde.
Uppdatera bakgrunden för det dubblerade avsnittet.
- Bakgrundsfärg: #f4def1
Ge sedan avsnittet en stor minimihöjd så att vi får plats att scrolla ner på sidan. Detta är helt enkelt ett avsnitt som ska fyllas i istället för innehåll riktiga en sida.
- Min höjd: 200vh
Uppdatera sedan innehåll i textmodulen genom att ersätta ordet "Nedan" ens "Ovan".
Del 3: Skapa den klibbiga navigeringsfältet
För att skapa den klibbiga navigeringsfältet från botten till toppen är vårt första steg att skapa ett nytt avsnitt med en rad till en kolumn.
Lagt till ny sektion och linje
Låt oss först lägga till en ny vanlig sektion direkt under sektionen ovanför mitten.
Låt oss sedan lägga till en rad med en kolumn i avsnittet.
Sektionsbakgrund och vaddering
Öppna sektionsinställningarna och uppdatera bakgrundsfärgen.
- Bakgrundsfärg: #302ea7
Ta sedan bort den övre och nedre stoppningen så att navigeringsfältet har mindre höjd.
- Utfyllnad: 0px (topp och botten)
Lägg till synligt överflöde
För att säkerställa att rullgardinsmenyerna förblir synliga, uppdatera synlighetsalternativen enligt följande:
- Horisontellt bräddavlopp: Synligt
- Vertikalt spill: Synligt
Ge avsnittet en absolut position på mobilen
Den mobila rullgardinsmenyn öppnas som standard under hamburgerikonen. Om vi håller navigeringsfältet längst ner, skulle det dölja rullgardinsmenyn om användaren klickar på den.
För en bättre användarupplevelse vill vi att navigeringsfältet ska börja längst upp på sidan på surfplattan och telefonens skärm.
För detta, ge avsnittet en absolut position på surfplatta och telefon.
- Position: släkting (Skrivbord), Absolut (Surfplatta och telefon)
Lägg till klibbig position för stationär och mobil
För att lägga till den klibbiga positionen i navigeringsfältssektionen uppdaterar du följande:
- Sticky Position: Stick to Top and Bottom (Skrivbord), Stick to Top (Surfplatta och telefon)
Uppdatera radfyllning
När den klibbiga sektionen är klar öppnar du radinställningarna i sektionen och uppdaterar stoppningen enligt följande:
- Utfyllnad: 10px (topp och botten)
Skapa en navigeringsmeny
Med avsnittet och raden på plats är vi redo att skapa navigeringsmenyn.
Börja med att lägga till en menymodul på raden med en kolumn.
Menyinnehåll
Uppdatera menyinnehållet enligt följande:
- välj menyn från rullgardinsmenyn
- lägg till logotypbild
- ta bort standardbakgrundsfärg
Under fliken Designa, uppdatera följande menytext och ikoninställningar:
- Aktiv länkfärg: #fff
- Menyteckensnitt: Ruby
- Meny Teckensnittsstil: TT
- Textfärg: #fff
- Menytextstorlek: 16px
- Textjustering: höger
- Färg på rullgardinsmenyn: #e19dff
- Mobilmeny Textfärg: #302ea7
- Varukorgsikon Färg: #fff
- Sökikon Färg: #fff
- Hamburgermenyikon Färg: #fff
Använda en kant för att kompensera navigationsfältets absoluta position på mobilen
Eftersom navigeringsfältssektionen har en absolut position på mobilen, kommer fältet att sitta ovanför (och skära av) den övre delen av sidan. För att fixa detta måste vi förskjuta den övre sektionen med en övre kant av samma höjd som navigeringsfältet/sektionen.
Kontrollera höjden på navigeringsfältet på mobilen
För att bestämma höjden på navigeringsfältet på mobilen, öppna en liveversion av sidan i ett nytt webbläsarfönster. Sedan kan du minska webbläsarens bredd under 980px för att se mobilmenyn.
Du kan också konsultera: Divi: Hur man skapar ett klibbigt navigeringsfält
Högerklicka på avsnittet som innehåller menyn och välj alternativet inspektera elementet i webbläsarens snabbmeny. Du borde se en ruta outils under sektionen som anger sektionens mått (inklusive höjd).
För det här exemplet är höjden på navigeringsfältet 72 pixlar.
Lägg till en övre kantförskjutning till sektionen ovanför vecket
Nu när vi har bestämt sektionens höjd öppnar du inställningarna för den övre sektionen (ovanför vecket).
Under fliken Designa, lägg till följande övre kant på surfplattan och telefonen:
- Toppkantsbredd: 72 pixlar (surfplatta och telefon)
- Översta kantfärg: #302ea7
Eftersom bården har samma höjd som sektionen med den absoluta positionen kommer du inte att kunna se bården eftersom den bara tjänar till att trycka ner sektionen så att den inte skärs.
Slutresultat
Upptäck slutresultatet!
Ladda ner DIVI nu!!!
Slutsats
Att skapa en klibbig navbar från botten till topp kan enkelt göras med hjälp av Divis inbyggda position och klibbiga alternativ.
Nyckeln är att ge sektionen ovanför mitten en höjd på 100vh, lägg sedan till navigeringsfältet nedan som håller sig längst ner och överst i webbläsaren. Hoppas detta hjälper till att lägga till en mer unik och engagerande ovanför mitten till din webbplats.
Detta klibbiga navigeringsfält fungerar bäst för en enstaka sidas design snarare än en övergripande mall. Som sagt, du kan enkelt välja att använda detta som din hemsidas design och använda en global rubrik för resten av sidorna med hjälp av Divi tema generator .
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
