[Ad_1]
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 layouten GRATIS
För att få tag på designen i denna handledning måste du först ladda ner den med knappen nedan. För att komma åt nedladdningen måste du prenumerera på vår Divi Daily e-postlista med hjälp av formen Nedan. Som ny prenumerant får du ännu fler Divi-förmåner och ett gratis Divi Layout-paket varje måndag! Om du redan finns på listan anger du bara din e-postadress nedan och klickar på ladda ner. Du kommer inte att "prenumereras på nytt" eller få ytterligare e-postmeddelanden.
Om du vill importera sektionens layout till ditt Divi -bibliotek går du till Divi -biblioteket.
Klicka på knappen Importera.
I popup-fönstret för portabilitet väljer du fliken Import och väljer filen som ska laddas ner från din dator.
Klicka sedan på importknappen.
När det är klart kommer layouten för sektionerna att vara tillgänglig i Divi Builder.
Till handledningen, eller hur?
Vad du behöver för att komma igång
För att komma igång måste du göra följande:
- Om du inte redan har gjort det, installera och aktivera Divi-tema.
- Skapa en ny sida i WordPress och använd Divi Builder för att redigera sidan i front-end (visual builder).
- Välj alternativet "Bygg från början".
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 självstudien kommer vi att skapa avsnittet och rubriken ovanför vattenlinjen som kommer att fungera som huvudrubriken på vår sida. Avsnittet kommer att vara fullskärm på skrivbordet för att säkerställa att avsnittet tar upp hela fönstret.
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]
På fliken Design uppdaterar du minsta höjd och vaddering.
- Minsta höjd: 100 vh (stationär dator), automatisk (surfplatta och telefon)
- Vaddering: övre 20vh, nedre 20vh
Rubrik
Om du vill skapa rubriktexten lägger du till en ny textmodul på raden.
Uppdatera sedan innehållet med följande H1 -rubrik:
<h1>Above the Fold</h1>
Textinställningar
På fliken Design i Textinställningar uppdaterar du rubrikstilsformat enligt följande:
- Titelteckensnitt: Rubik
- Header Font Weight: Halv fet
- TT Header Font Style
- Rubriktextjustering: Mitt
- Titel Textfärg: # 302ea7
- Texttextstorlek: 130 pixlar (skrivbord), 70 pixlar (surfplatta), 40 pixlar (telefon)
- Avstånd mellan rubriker: 2px
- Rubriklinjehöjd: 1,3 em
Del 2: Skapa sektionen under vikningen
För att demonstrera funktionaliteten hos den klibbiga navigeringsfältet måste vi lägga till ett avsnitt under vikningen så att vi kan få plats att rulla.
För att skapa avsnittet, duplicera avsnittet ovanför vattenlinjen vi just skapade.
Uppdatera bakgrunden för det dubblerade avsnittet.
- Bakgrundsfärg: # f4def1
Ge sedan avsnittet en stor minsta höjd så att vi har utrymme att rulla på sidan. Detta är bara ett avsnitt att fylla i istället för det faktiska innehållet på en sida.
Uppdatera sedan innehållet i textmodulen genom att ersätta ordet "Nedan" med "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.
Lägg till ett nytt avsnitt och en ny rad
Lägg till en ny vanlig sektion direkt under sektionen ovanför vattenlinjen.
Lägg sedan till en rad i en kolumn i sektionen.
Sektionsbakgrund och vaddering
Öppna sektionsinställningarna och uppdatera bakgrundsfärgen.
- Bakgrundsfärg: # 302ea7
Ta sedan bort den övre och nedre vadderingen så att navigeringsfältet har mindre höjd.
- Fyllning: 0px topp, 0px botten
Lägg till synligt överflöde
För att säkerställa att rullgardinsmenyerna förblir synliga, uppdatera synlighetsalternativen enligt följande:
- Horisontellt överflöde: Synligt
- Vertikalt överflöde: synligt
Ge avsnittet en absolut position på mobilen
Rullgardinsmenyn för mobilen ö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 i nedåtpositionen. För en bättre användarupplevelse vill vi att navigeringsfältet börjar högst upp på sidan på surfplattan och telefonskärmen.
För att göra detta, tilldela avsnittet en absolut position på surfplatta och telefon.
- Position: Relativ (stationär dator), Absolut (surfplatta och telefon)
Lägg till klibbig position för stationära och mobila
För att lägga till den klibbiga positionen i navigeringsfältet, uppdatera följande:
- Klibbig position: Håll dig till topp och botten (skrivbordet), håll fast vid toppen (surfplatta och telefon)
Uppdatera radfyllning
När det klibbiga avsnittet är klart öppnar du radinställningarna inuti avsnittet och uppdaterar fyllningen enligt följande:
- Fyllning: 10 pixlar överst, 10 pixlar längst ner
Skapa en navigeringsmeny
Med sektionen och raden på plats är vi redo att skapa navigeringsmenyn.
Börja med att lägga till en menymodul i raden i en kolumn.
Menyinnehåll
Uppdatera menyinnehållet enligt följande:
- välj menyn från listrutan
- lägg till logotypbild (jag använder 122px med 52px -bild)
- ta bort standard bakgrundsfärg
På fliken Design uppdaterar du följande menytext och ikoninställningar:
- Aktiv länkfärg: #fff
- Menyteckensnitt: Rubik
- Meny Typsnitt: TT
- Menytextfärg: #fff
- Menytextstorlek: 16px
- Textjustering: höger
- Färg på rullgardinsmenyn: # e19dff
- Mobil meny textfärg: # 302ea7
- Kundvagnens ikonfärg: #fff
- Sökikonfärg: #fff
- Hamburgermenyikonfärg: #fff
Använda en kant för att kompensera navigationsfältets absoluta position på mobilen
Eftersom navigeringsfältet har en absolut position på mobilen, kommer fältet att sitta ovanför (och klippa av) den övre delen av sidan. För att lösa detta problem måste vi förskjuta den övre delen med en övre kant med 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 bredden på webbläsaren under 980px för att se mobilmenyn. Högerklicka på avsnittet som innehåller menyn och välj alternativet Inspektera objekt från snabbmenyn i webbläsaren. Du bör se en verktygslåda under sektionen som visar måtten (inklusive höjd) på sektionen. För det här exemplet är höjden på navigeringsfältet 72px.
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 Design lägger du till följande överkant på både surfplatta och telefon:
- Övre kantbredd: 72 pixlar (surfplatta och telefon)
- Övre kantfärg: # 302ea7
Eftersom gränsen är samma höjd som sektionen med den absoluta positionen kommer du inte att kunna se gränsen eftersom den bara tjänar till att trycka ned sektionen så att den inte skärs.
Slutresultat
Upptäck slutresultatet!
Avslutande tankar
Att skapa en klibbig navbar från botten till topp kan enkelt uppnås med Divis inbyggda position och klibbiga alternativ. Nyckeln är att ge sektionen ovanför vecket en höjd av 100vh, lägg sedan till navigeringsfältet nedan som fastnar längst ner och överst på navigatorn. Förhoppningsvis kommer detta att bidra till att lägga till en mer unik och engagerande ovan vattenlinjen 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 hemsidadesign och använda en global rubrik för resten av sidorna med hjälp av byggaren. Divi-tema.
Jag kan inte vänta med att höra från dig i kommentarerna.
Till din hälsa!
[Ad_2]
