Vill du skapa en snygg transparent och klibbig header med Divi?
När det gäller att ställa in en global rubrik för din webbplats, det finns många sätt att närma sig det. En av de mer subtila metoderna är en transparent rubrik.
Om du bestämmer dig för att använda en genomskinlig rubrik men vill att den ska vara klibbig när du rullar, kommer du att älska den här handledningen. Övergången mellan transparent och klibbig är enkel!
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet.
Skapa en ny global rubrikmall
Gå till Divi > Theme Builder.
Avsnitt #1 Inställningar
Bakgrundsfärg
Väl i mallredigeraren kommer du att märka ett avsnitt. Det här avsnittet kommer att ägnas åt den övre rubrikraden som du kan lägga märke till i förhandsvisningen av den här artikeln. Öppna avsnittsinställningarna och lägg till en svart bakgrundsfärg.
- Bakgrund: #000000
avstånd
Växla till fliken Sektionsstil och ta bort alla inre 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 med följande kolumnstruktur:
Lägg till en textmodul i kolumnen
Lägg till en textmodul i radkolumnen och ange ett valfritt meddelande.
Textinställningar
Växla till fliken Modulstil och ändra textinställningarna därefter:
- Texttypsnitt: Oswald
- Text Kopieringsstil: TT
- Textfärg Text: #ffffff
- Text Textstorlek:
- Desktop: 19px
- Surfplatta: 18px
- Telefon: 16px
- Textjustering: Centrerad
Lägg till avsnitt 2
avstånd
Precis under det första avsnittet lägger du till ytterligare ett vanligt avsnitt. Det här avsnittet kommer att ägnas åt vår genomskinliga meny som blir klibbig när du rullar.
Öppna avsnittsinställningarna och ta bort alla interna marginaler (Överst och Nederst) som standard på fliken Stil.
- 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 med följande kolumnstruktur:
Transparent bakgrundsfärg
Öppna linjeinställningarna och använd en helt transparent bakgrundsfärg på linjen.
- Bakgrund: rgba (255,255,255,0 XNUMX XNUMX)
dimensionering
Växla till fliken Linjestil och ändra storleksinställningarna.
- Använd anpassad rännbredd: Ja
- Kolumnavstånd: 1
- Maximal bredd: 100%
- Maximal bredd: 100%
avstånd
Lägg sedan till anpassade interna (vänster och höger) marginaler.
- Vänster innermarginal: 10 %
- Intern marginallag: 10 %
Skugga låda
Applicera sedan en transparent boxskugga. Senare i handledningen kommer vi att använda den här boxskuggan i ett klibbigt tillstånd med en annan skuggafärg.
- Box Shadow Blur Styrka: 50px
- Textning teckensnittsfärg: rgba (0,0,0,0)
Placera
För att se till att linjen visas överst på innehåll på sidan, med en transparent bakgrund, kommer vi att använda en absolut position för vår rad på fliken Avancerat.
- Position: Absolut
- Plats: Överst till vänster
Kolumn 2 Synlighet
Vi döljer också den andra kolumnen i vår rad på surfplatta och telefon för att ha en mindre komplex rubrikdesign på mindre skärmstorlekar.
Lägg till menymodul i kolumn 1
Välj en meny
Nu när våra radinställningar är på plats är det dags att lägga till moduler, börja med en menymodul i kolumn 1. Välj den meny du vill ha.
Ladda ner logotyp
Ladda sedan upp en logotyp.
Ta bort bakgrundsfärg
Ta också bort bakgrundsfärgen från modulen.
Menytextinställningar
Växla till modulens Style-flik och ändra menytextinställningarna i enlighet med detta:
- Teckensnittsmeny: Oswald
- Meny för mjukt ljus: Fet
- Kopiera stilmeny: TT
- Menytextfärg: #efefef
- Menytextstorlek: 18px
- Textjustering: höger
Inställningar för rullgardinsmenyn
Ändra även rullgardinsmenyns inställningar.
- Färg på rullgardinsmenyn: rgba(0,0,0,0)
- Mobilmeny Bakgrundsfärg: rgba (0,0,0,0,95)
Ikoninställningar
Ändra sedan ikonfärgerna i ikoninställningarna.
- Korgikonens färg: #ffffff
- Sökikonens färg: #ffffff
- Hamburgermenyikon Färg: #ffffff
Logotypinställningar
Vi ändrar även färgen på vår logotyp i logotypinställningarna genom att ändra bildinversionsfiltret.
- Bildinvertering: 90 %
dimensionering
Därefter kommer vi att tilldela en maximal höjd till vår logotyp.
- Logotyp Max bredd: 40 pixlar
avstånd
Därefter kommer vi att lägga till topp- och bottenstoppning på små skärmstorlekar.
- Maximal intern marginal:
- Surfplatta och telefon: 10px
- Nedre inre marginal:
- Surfplatta och telefon: 10px
Lägg till knappmodulen i kolumn 2
Lägg till text till knappen
I kolumn 2 är den enda modul vi behöver en knappmodul. Lägg till en text som du väljer.
Knappjustering
Växla till fliken Modulstil och ändra knappjusteringen.
- Knappinställning: höger
Knappinställningar
Anpassa knappen nästa.
- Använd anpassade stilar för Knapp: Ja
- Knapptextstorlek: 16px
- Knappens textfärg: #ffffff
- Bakgrundsknapp: #ed4441
- Kantfärg på knapp: #ed4441
- Kantradieknapp: 0 pixlar
- Knappbokstavsavstånd: 4px
- Knapptypsnitt: Oswald
- Knapp för mjukt ljus: fet text
- Kopiera stilknapp: TT
- Visa knappikon: Ja
- Knappikon Färg: #1a1a1a
avstånd
Och komplettera modulparametrarna genom att lägga till anpassade avståndsvärden.
- Toppmarginal: -70px
- Topp och botten inre marginal: 25 px
Använd anpassade klibbiga effekter
Gör avsnitt #2 klibbigt
Nu när vi har lagt grunden för vår header är det dags att applicera den klibbiga effekten! För att göra detta, börja med att öppna inställningarna i det andra avsnittet och tillämpa följande klibbiga inställningar på den avancerade fliken:
- Sticky Position: Håll dig till toppen
- Stick Top Offset: 0px
- Botten Sticky Mimit: Ingen
- Offset från omgivande klibbiga element: JA
- Övergångsstandard och Sticky Styles: JA
Stick linje bakgrundsfärg
Nu när det klibbiga alternativet är aktiverat kan vi göra ändringar av klibbiga alternativ för alla element i sektionen. Vi börjar med att öppna raden som innehåller vår meny och applicera en vit bakgrundsfärg på det klibbiga alternativet.
- Bakgrundsfärg: #FFFFFF
Klibbigt radavstånd
Därefter kommer vi att ändra avståndsvärdena för radens klibbiga funktion.
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
Sticky Row Shadow Box
Vi ändrar också färgen på boxskuggan i ett klibbigt tillstånd.
- Textningstypsnittsfärg: rgba(0,0,0,0.08)
Klibbig linjepositionering
Därefter återställer vi radpositioneringen till relativ i ett klibbigt tillstånd.
- Position: Anhörig
- Offset Ursprung: uppe till vänster
Textinställningar för klibbig tillstånd
Därefter ändrar vi menytextfärgen till det klibbiga tillståndet.
- Menytextfärg: #000000
Meny rullgardinsinställningar i klibbigt tillstånd
Med mobilmenybakgrundsfärg i rullgardinsmenyinställningar.
- Mobilmeny, bakgrundsfärg: #ffffff
Menyikonen färger i klibbigt tillstånd
Ändra också ikonfärger i ett klibbigt tillstånd.
- Korgikonens färg: #000000
- Sökikonens färg: #000000
- Hamburgermenyikon Färg: #000000
Logotypfilter i klibbigt tillstånd
Ta sedan bort inverteringsfiltret från logotypen i ett klibbigt tillstånd.
- Bildinversion: 0 %
Knappavstånd i klibbigt tillstånd
Och slutför handledningen genom att ta bort den negativa övre marginalen från knappen när den är i klibbigt tillstånd.
- Toppmarginal: 0px
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på slutresultatet.
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi hur du kombinerar konstruktören av teman av Divi med de nya klibbiga alternativen. Specifikt visade vi dig hur du växlar från en genomskinlig rubrik till en annan stil klibbig rubrik medan du rullar.
Det här tillvägagångssättet låter dig slå samman din siddesign med din meny samtidigt som du behåller en snygg klibbig rubrik när du rullar.
Om du vill veta mer om Divi, tveka inte att besöka vår katalog med Divi tutorials. Du kan också konsultera Hur man skapar bloggsidan med Divi Blog-modulen
Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.
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.
.
