Gå till innehållet

Hur man skapar en klibbig, nedifrån och upp navigeringsfält i Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

I dagens Divi-handledning visar vi dig, steg för steg, hur du skapar en klibbig navigeringsfält nedifrån och upp i Divi. Detta gör det möjligt för navigeringsfältet att ligga längst ner på sidan för en enda layout ovanför vattenlinjen. När du väl har passerat avsnittet ovanför sidans vattenlinje kommer navigeringsfältet att ligga högst upp på sidan och stanna där under resten av sidan. Du kan säga att sidan kommer att "ta över" menyn längst ner på skärmen och ge en trevlig interagerande effekt till din huvudmeny och 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 layouten GRATIS

För att få tag på mönstren för den här självstudien 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 formuläret nedan. Som ny prenumerant får du ännu fler Divi -förmåner varje måndag och ett gratis Divi -layoutpaket! Om du redan finns på listan anger du bara din e -postadress nedan och trycker på nedladdning. Du kommer inte att ”omregistreras” 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örläng hörnflikarna

För att komma igång måste du göra följande:

  1. Om du inte redan har gjort det, installera och aktivera Divi -temat.
  2. Skapa en ny sida i WordPress och använd Divi Builder för att redigera sidan i front-end (visual builder).
  3. 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.

klibbig divi -navigeringsfält från botten till toppen

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]

klibbig divi -navigeringsfält från botten till toppen

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

klibbig divi -navigeringsfält från botten till toppen

Rubrik

Om du vill skapa rubriktexten lägger du till en ny textmodul på raden.

klibbig divi -navigeringsfält från botten till toppen

Uppdatera sedan innehållet med följande H1 -rubrik:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

<h1>Above the Fold</h1>

klibbig divi -navigeringsfält från botten till toppen

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

klibbig divi -navigeringsfält från botten till toppen

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.

klibbig divi -navigeringsfält från botten till toppen

Uppdatera bakgrunden för det dubblerade avsnittet.

  • Bakgrundsfärg: # f4def1

klibbig divi -navigeringsfält från botten till toppen

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.

klibbig divi -navigeringsfält från botten till toppen

Uppdatera sedan innehållet i textmodulen genom att ersätta ordet "Nedan" med "Ovan".

klibbig divi -navigeringsfält från botten till toppen

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.

klibbig divi -navigeringsfält från botten till toppen

Lägg sedan till en rad i en kolumn i sektionen.

klibbig divi -navigeringsfält från botten till toppen

Sektionsbakgrund och vaddering

Öppna sektionsinställningarna och uppdatera bakgrundsfärgen.

  • Bakgrundsfärg: # 302ea7

klibbig divi -navigeringsfält från botten till toppen

Ta sedan bort den övre och nedre vadderingen så att navigeringsfältet har mindre höjd.

  • Fyllning: 0px topp, 0px botten

klibbig divi -navigeringsfält från botten till toppen

Lägg till synligt överflöde

För att säkerställa att rullgardinsmenyerna förblir synliga, uppdatera synlighetsalternativen enligt följande:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Horisontellt överflöde: Synligt
  • Vertikalt överflöde: synligt

klibbig divi -navigeringsfält från botten till toppen

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)

klibbig divi -navigeringsfält från botten till toppen

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)

klibbig divi -navigeringsfält från botten till toppen

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

klibbig divi -navigeringsfält från botten till toppen

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.

klibbig divi -navigeringsfält från botten till toppen

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

klibbig divi -navigeringsfält från botten till toppen

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

klibbig divi -navigeringsfält från botten till toppen

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.

klibbig divi -navigeringsfält från botten till toppen

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.

klibbig divi -navigeringsfält från botten till toppen

Slutresultat

Upptäck slutresultatet!

Avslutande tankar

Att skapa en klibbig navigeringsruta uppifrån och upp kan enkelt uppnås med Divis inbyggda position och klibbiga alternativ. Nyckeln är att ge sektionen ovanför vattenlinjen en höjd av 100vh, lägg sedan till navigeringsfältet nedan som fastnar längst ner och upptill i webbläsaren. Förhoppningsvis hjälper detta till att lägga till en mer unik och engagerande ovanför vattenlinjen på din webbplats.

Den här klibbiga navigeringsfältet fungerar bäst för en enda sidedesign snarare än en övergripande mall. Med det sagt kan du enkelt välja att använda den som din hemsidesdesign och använda en övergripande rubrik för resten av sidorna med hjälp av Divi -temabyggaren.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Jag kan inte vänta med att höra från dig i kommentarerna.

Till din hälsa!



Källlänk

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer