Vill du skapa en sticky header med Divi ?
Att skapa klibbiga rubriker har gått smidigt sedan ankomsten av teman, men vi upptäcker att många människor inte vet hur man skapar dem utan att använda ytterligare kod. Det är dock ganska enkelt att göra det också tack vare de klibbiga alternativen Divi.
Faktum är att det inte bara är lättare, utan den här metoden ger fler möjligheter att anpassa designen.
Vi kommer därför att ta oss tid, i den här handledningen, att visa dig hur du skapar en ultrapersonlig sticky header med hjälp av parametrarna Divi.
undersökningen
Innan vi dyker in i denna handledning, låt oss ta en titt på resultatet vi vill uppnå.
Bygg rubrikelementets struktur
Skapa en ny global rubrikmall
Gå till Divi Theme Builder och börja skapa en ny global eller anpassad rubrik.
Avsnitt 1 Parametrar
Lutningbakgrund
Väl i mallredigeraren börjar vi med att bygga strukturen för våra rubrikelement. I den andra delen av denna handledning kommer vi att fokusera på att tillämpa de olika klibbiga inställningarna för att slutföra designen av klibbiga rubriker.
Läs också: Hur man skapar en skjut- och tryckmeny i DIVI
I mallredigeraren kommer du att märka ett avsnitt. Öppna det här avsnittet och använd en gradientbakgrund.
- Färg 1: #ffba60
- Färg 2: #ffd6a0
- Lutningsriktning: 90 grader
- Startposition: 50%
- Slutposition: 50 %
avstånd
Ta sedan bort alla interna marginaler (överst och nedre) som standard.
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
Lägg till en ny rad
Strukturen av kolonnen
För att skapa vår översta rubrikrad lägger vi till en ny rad i vår sektion med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler än, öppna radinställningarna och ändra storleksinställningarna enligt följande:
- Använd anpassad rännbredd: Ja
- Kolumnavstånd: 1
- Maximal bredd: 95%
- Maximal bredd: 2 pixlar
avstånd
Lägg även till anpassade interna marginaler (överst och nedre).
- Innermarginal Vertex: 15px
- Nedre intern marginal: 15px
CSS huvudelement
Och för att se till att kolumnerna stannar bredvid varandra på mindre skärmstorlekar, lägger vi till en rad med CSS-kod till huvudradelementet på fliken Avancerat.
display: flex;
Lägg till modulen "Följ oss på sociala medier" i kolumn 1
Lägg till valfria sociala nätverk
Det är dags att lägga till moduler, börja med en "Följ oss på sociala medier"-modul i kolumn 1. Lägg till de sociala nätverk du väljer tillsammans med deras motsvarande länkar.
Ta bort bakgrundsfärg från varje socialt nätverk
Fortsätt genom att ta bort var och en av bakgrundsfärgerna från det sociala nätverket individuellt.
Ikoninställningar
Gå sedan tillbaka till de allmänna modulinställningarna och ändra ikonfärgen på designfliken.
- Ikonfärg: #26333a
avstånd
Lägg också till en övre marginal.
- Toppmarginal: 5 px
Lägg till knappmodulen i kolumn 2
Lägg till text på knappen
I kolumn 2 är den enda modul vi behöver en knappmodul. Lägg till en text som du väljer.
Lägg till en länk
Lägg sedan till en länk.
Knappjustering
Växla sedan till fliken Stil och ändra knappjusteringen.
- Knappinställning: höger
Knappinställningar
Vi anpassar även knappen.
- Använd anpassade stilar för Knapp: Ja
- Knapptextstorlek: 14px
- Knappens textfärg: #26333a
- Knappkantsbredd: 2px
- Kantfärg på knapp: #26333a
- Knappkantradie: 0 pixlar
- Bokstavsavståndsknappar: 4px
- Knapp för mjukt ljus: fet text
- Kopiera stilknapp: versaler
- Visa knapp: ja
avstånd
Och vi kommer att slutföra modulinställningarna genom att lägga till interna marginaler (överst och nedre) till avståndsinställningarna.
- Innermarginal Vertex: 10px
- Nedre intern marginal: 10px
Lägg till avsnitt 2
Lutningbakgrund
Lägg till ytterligare ett vanligt avsnitt precis under det föregående. Det här avsnittet kommer att ägnas åt vår meny och kommer att göras klibbigt i den andra delen av denna handledning.
Se även: Hur man skapar global header med inloggningsformulär i DIVI
När du har lagt till avsnittet, använd en gradientbakgrund.
- Färg 1: #ffffff
- Färg 2: #f7f7f7
- Gradienttyp: Linjär
- Lutningsriktning: 90 grader
- Startposition: 25%
- Slutposition: 25 %
avstånd
Växla till fliken Sektionsformat och ta bort alla interna marginaler (överst och nedre) som standard.
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad i sektionen med följande kolumnstruktur:
dimensionering
Växla till fliken Stil och ändra storleksinställningarna enligt följande:
- Använd anpassad rännbredd: Ja
- Kolumnavstånd: 1
- Maximal bredd: 2 pixlar
avstånd
Ta sedan bort alla interna marginaler (överst och nedre) som standard.
- Innermarginal Vertex: 10px
- Nedre intern marginal: 10px
Lägg till en menymodul i kolumnen
Välj en meny
Lägg sedan till en menymodul i radkolumnen och välj en dynamisk meny som du väljer.
Ladda ner logotyp
Ladda sedan upp en logotyp.
Ta bort bakgrundsfärg
Ta sedan bort standardvit bakgrundsfärg från modulen.
Menytextinställningar
Växla till fliken Stil och anpassa även menytextinställningarna.
- Dim Light Menu: Fet text
- Menytextfärg: #002d4c
- Menytextstorlek: 15px
- Meny Bokstavsavstånd: 4px
- Textjustering: höger
Listrutan textinställningar
Gör sedan några ändringar i rullgardinsmenyns inställningar.
- Bakgrundsfärg på rullgardinsmenyn: #ffffff
- Färg på rullgardinsmenyn: #002d4c
Ikoninställningar
Med ikoninställningar.
- Korgikonens färg: #002d4c
- Sökikonens färg: #002d4c
- Hamburgermenyikon Färg: #002d4c
dimensionering
Och slutför modulinställningarna genom att lägga till en maximal logotyphöjd till storleksinställningarna.
- Maximal logotyphöjd: 60 pixlar
2. Använd anpassade klibbiga effekter
Gör avsnitt #2 klibbigt
Nu när vi har skapat strukturen för våra rubrikelement är det dags att göra vårt andra avsnitt klibbigt och anpassa dess element när de är i ett klibbigt tillstånd.
Se även: Hur man skapar en vertikal navigeringsmeny i DIVI
Öppna inställningarna för det andra avsnittet och växla till fliken Avancerat. Gå där till inställningarna för rullningseffekter och använd följande klibbiga alternativ:
- Sticky Position: Håll dig till toppen
- Sticky Top Offset: 0px
- Nedre klibbgräns: Ingen
- Offset från omgivande klibbiga element: Ja
- Övergångsstandard och Sticky Styles: Ja
Ändra avsnittsgradientbakgrund i klibbigt tillstånd
Nu när vår sektion har blivit klibbig kommer ytterligare ett alternativ att dyka upp i våra sektions-, rad- och modulinställningar; det klibbiga alternativet. När du klickar på den här ikonen kommer du att kunna skapa en alternativ stil för det element du har valt i ett klibbigt tillstånd.
Börja med att gå till bakgrundsinställningarna i det andra avsnittet och tillämpa följande klibbiga gradientbakgrund:
- Färg 1: #26333a
- Färg 2: #1e272f
Stretchlina i klibbigt tillstånd
Sedan kommer vi att öppna raden som innehåller menymodulen och vi kommer att ändra bredden i ett klibbigt tillstånd.
- Maximal bredd: 95%
Ta bort stoppningen i klibbigt tillstånd
Vi tar också bort de inre marginalerna (topp och botten) från det klibbiga tillståndet på vår linje.
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
Ändra menytextfärg i klibbigt tillstånd
Därefter ändrar vi menytextfärgen till ett klibbigt tillstånd.
- Menytextfärg: #ffbd68
Ändra menyikonens färger i klibbigt tillstånd
Med ikonfärger.
- Korgikonens färg: #ffffff
- Sökikonens färg: #ffffff
- Hamburgermenyikon Färg: #ffffff
Ta bort logotypens höjd i klibbigt tillstånd
Och slutligen kommer vi att ändra den maximala logotypens höjd till noll i ett klibbigt tillstånd. Detta kommer helt att ta bort logotypen från vår rubrik när avsnittets klibbiga inställningar är aktiverade.
Maximal logotyphöjd: 0px
Det är klart !
Se till att spara alla ändringar i Divi Theme Builder när du är klar med att designa din rubrik och förhandsgranska den på din webbplats.
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på resultatet.
Ladda ner DIVI nu!!!
Slutsats
Där ! Det var allt för den här artikeln. I den senare visade vi hur du skapar en klibbig rubrik med hjälp av konstruktorn för teman av Divi och anpassade stilar.
För att bekanta dig med Divis Theme Builder kan du också läsa vår artikel om Hur man skapar en global rubrik med Divis Theme Builder
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att 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.
.
