Behöver skapa en global rubrik för din webbplats med Divi?
En global rubrik kommer att visas överallt på din webbplats, såvida du inte har tilldelat en annan rubrik till en sida eller ett inlägg.
Låt oss börja!
undersökningen
Här är en förhandstitt på den globala rubriken vi ska designa.
Konfigurera din huvudmeny
Börja med att skapa din meny i din WordPress-webbplats utseendeinställningar.
Öppna alternativet Theme Builder under Divi
I alternativen för Divi-temaklickar du på Theme Builder. Väl där kommer du att märka en webbplats mall Standard.
Lägg till och skapa en global rubrik
Le webbplats mall standard är där du kan börja skapa din anpassade globala sidhuvud, globala text och globala sidfot. Klicka på "Lägg till global rubrik" och fortsätt genom att klicka på "Bygg global rubrik" för att påbörja processen.
Avsnitt inställningar
dimensionering
Öppna sektionsinställningarna du hittar på sidan, i stilfliken ändrar du måtten på olika skärmstorlekar.
- Maximal bredd: 100 %
- Maximal bredd: 1280px (för PC och surfplatta), 100 % (för mobil)
avstånd
Ta bort alla övre och nedre inre marginaler
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
gräns
Lägg nu till en kantradie i sektionens nedre vänstra och högra hörn.
- Nederst till vänster: 50px
- Nederst till höger: 50px
Skugga låda
Låt oss också lägga till en subtil boxskugga.
- Box Shadow Blur Styrka: 60px
- Textningstypsnittsfärg: rgba(0,0,0,0.13)
synlighet
- Horisontellt överflöde: Synligt
- Vertikalt spill: Synligt
Dedikera en ny rad till rubriken
Nu när vi har slutfört de allmänna avsnittsinställningarna kan vi börja lägga till rader. Totalt kommer vi att behöva två rader; en som är dedikerad till rubriken och en som låter menyalternativ visas. Vi börjar med rubriken genom att lägga till en ny rad med följande kolumnstruktur:
Linjeinställningar
Bakgrundsinställningar
Utan att lägga till några moduler till raden, öppna linjeinställningarna och ändra bakgrundsfärgen.
- Bakgrund: #38383F
dimensionering
Ändra sedan parametrarna för linjestorlek.
- Använd anpassad rännbredd: JA
- Kolumnavstånd: 1
- Maximal bredd: 100 %
- Maximal bredd: 100 %
Tittar
Låt oss nu se till att kolumnerna visas bredvid varandra på mindre skärmar genom att lägga till denna rad med CSS-kod till huvudradelementet.
01
display: flex;
Lägg till bildmodul i kolumn 1
Ladda ner logotyp
När du har slutfört radinställningarna är det dags att börja lägga till moduler. Lägg till en bildmodul i kolumn 1 och ladda upp din logotyp.
uppriktning
Gå till fliken Stil och justera bilden till vänster.
dimensionering
Ändra även modulens bredd.
avstånd
Lägg även till anpassade marginalvärden.
Lägg till spårningsmodul för sociala medier i kolumn 2
Lägg till sociala nätverk
Låt oss gå till den andra kolumnen. Där kommer vi att behöva en spårningsmodul för sociala medier. Lägg till de sociala nätverk du väljer. Du kan lägga till hur många sociala medier du vill.
Sociala nätverk bakgrundsfärg
Öppna sedan varje socialt nätverk individuellt och ändra bakgrundsfärgen till en helt transparent färg.
- Bakgrundsfärg: rgba (0,0,0,0)
uppriktning
Gå tillbaka till de normala modulinställningarna och ändra sedan den fullständiga justeringen av modulen.
icon
Ändra även ikoninställningarna.
- Ikonfärg: #FFFFFF
- Använd anpassad ikonstorlek: Ja
- Ikon teckensnittsstorlek: 16px (PC och surfplatta), 12px (telefon)
avstånd
Lägg till en toppmarginal.
Lägg till knappmodulen i kolumn 3
Flytta till den tredje kolumnen och lägg till en knappmodul som innehåller en valfri text.
uppriktning
Ändra justeringen av knappen på fliken Stil.
Knappinställningar
Anpassa knappinställningarna enligt följande:
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 12px (dator), 10px (surfplatta), 8px (telefon)
- Knappens textfärg: #ffffff
- Bakgrundsknapp: #ffae25
- Knappkantsbredd: 0 pixlar
- Kantradieknapp: 0 pixlar
- Bokstavsavstånd mellan knappar: 5 px (dator), 3 px (surfplatta och telefon)
- Teckensnittsknapp: Öppna Ingen
- Knapp för mjukt ljus: fet text
- Kopiera knappstil: TT
avstånd
Anpassa marginalvärden.
Dedikera en ny rad till menyraden
När du har fyllt i raden tillägnad den globala rubriken kan du lägga till ytterligare en rad precis nedanför.
Linjeinställningar
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna och ändra storleksinställningarna på fliken Stil.
avstånd
Ta sedan bort alla nedre och övre marginaler.
Lägg till en menymodul i kolumnen
Välj Meny
Lägg sedan till en menymodul i kolumnen och välj menyn du skapade i den första delen av den här handledningen.
Disposition
Växla till fliken Stil och ändra layoutinställningarna enligt följande:
Anslutningar
Ändra även färgen på den aktiva länken på fliken Stil.
- Aktiv länkfärg: #ffae25
Rullgardinsmenyn
Gör samma sak för rullgardinsmenyns radfärg i rullgardinsmenyns inställningar.
- Färg på rullgardinsmenyn: #ffae25
icon
- Hamburgermenyikonens färg: #ffae25
Menytext
Med menytextinställningar.
- Menytypsnitt: Prata
- Menytextfärg: #000000
Få sidhuvud och menyrad att stanna överst
Öppna avsnittsinställningar
När du har slutfört den andra raden behöver du bara se till att avsnittet stannar högst upp på våra sidor och inlägg. För att göra detta kommer vi att öppna avsnittsinställningarna igen.
Lägg till anpassad CSS till huvudelementet
Därefter kommer vi att gå till den avancerade fliken och vi kommer att lägga till några rader med CSS-kod till huvudelementet i avsnittet.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Spara globala header- och temabyggaralternativ
När du har slutfört hela den globala rubrikdesignen, se till att spara designen innan du lämnar malllayouten. När du är ute ur malllayouten sparar du hela dina ändringar av temabyggaren och du är klar!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på resultatet.
Slutsats
I den här artikeln visade vi hur du skapar en anpassad global rubrik med Divis nya temabyggare. Den här handledningen visar hur lätt det är att skapa vackra rubriker och tillämpa dem på hela din webbplats eller specifika anpassade inläggstyper.
Vi hoppas att det hjälper dig att anpassa din webbplats med Theme Builder.
Om du har några frågor eller förslag, vänligen lämna en kommentar till oss kommentarsfältet nedan.
.
