Vill du skapa en global sidohuvud med Divi?
I den här handledningen visar vi dig hur du skapar en global roterad rubrik som visas på vänster sida av dina sidor och inlägg. Rubrikens bakgrundsfärg är helt genomskinlig, vilket gör att innehåll av sidan/inlägget.
Vi såg till att den globala rubriken förblir fixerad på vänster sida medan vi rullade och vi gjorde även menyn till en mobilvänlig version.
I den här handledningen visar vi dig hur du återskapar designen från grunden!
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet vi vill uppnå.
Gå till Divis temabyggare och börja skapa en global header
Från WordPress-instrumentpanelen, gå till Divi > Theme Builder
Klicka på "Lägg till global rubrik"
Välj "Bygg global header".
Börja skapa den globala sidhuvudet
Lägg till en ny sektion
Bakgrundsfärg
Väl i mallredigeraren kan du öppna avsnittet redan där och ändra bakgrundsfärgen på olika skärmstorlekar.
- Bakgrundsfärg: rgba(0,0,0,0) (Skrivbord), #FFFFFF (Surfplatta och telefon)
dimensionering
Gå till fliken Designa, dra ned alternativet Storlek och ändra sedan parametrarna för sektionsstorlek.
- Bredd: 5vw (dator), 100% (surfplatta och telefon)
- Min höjd: 100 vw (dator), auto (surfplatta och telefon)
avstånd
Dra sedan ner alternativet mellanrum och ändra inställningarna enligt följande:
- Stoppning (topp och botten): 2vw
Skugga låda
Gå sedan till Box skugga och lägg till anpassad boxskugga på olika skärmstorlekar.
- Box Shadow horisontell position: 32px (Skrivbord), 0px (Surfplatta och telefon)
- Box Shadow Blur Styrka: 49px
- Spridningsstyrka: 0px (dator), 19px (surfplatta och telefon)
- Skuggfärg: rgba(0,0,0,0.12)
Lägger till anpassad CSS
Vi kommer också att se till att den globala sidhuvudet förblir fixerat till vänster sida genom att lägga till några rader med CSS-kod till huvudsektionselementet.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
På att sväva över avsnittet
Se till att även lägga till dessa rader med CSS-kod till huvudelementet när du håller muspekaren över avsnittet.
position: fixed;
top: 0;
Standard synlighet
Öka sedan z-indexet i positionsparametrarna.
- Z-index: 99999
Hover synlighet
Se till att samma värde gäller när du svävar.
- Z-index: 99999
Lägg till en ny rad
Strukturen av kolonnen
När du har slutfört avsnittsinställningarna fortsätter du genom att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna och ändra storleksinställningarna.
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
avstånd
Ta också bort alla standardmarginaler.
- Utfyllnad (topp och botten): 0px
Kolumnparametrar
Tillagd anpassad CSS (surfplatta och telefon)
På surfplatta och telefon väljer vi en helt annan display. Vi kommer att placera tre olika moduler bredvid varandra. För att göra detta måste vi lägga till lite CSS-kod.
Öppna kolumninställningarna, gå till fliken Advanced Open water och infoga följande rader med CSS-kod i utrymmet Huvudelementet för surfplatta och telefon:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
Lägg till en bildmodul i kolumnen
Ladda ner logotyp
Det är dags att börja lägga till moduler! Den första modulen vi behöver är en bildmodul. Ladda upp en semi-transparent logotypbildfil som du väljer.
dimensionering
Gå sedan till fliken Designa och ändra bredden på olika skärmstorlekar.
- Bredd: 4 vw (dator), 12 vw (surfplatta), 16 vw (telefon)
Omvandlingsskala
Öka storleken på modulen genom att ändra inställningarna för transformationsskala efteråt.
- Höger: 170 % (Skrivbord), 100 % (Surfplatta och telefon)
- Låg: 170 % (dator), 100 % (surfplatta och telefon)
"Översätt översätt"
Och tryck modulen åt höger genom att ändra följande parametrar
- Nederst: 1vw (dator), 0vw (surfplatta och telefon)
Lägg till en menymodul i kolumnen
Välj menyn att lägga till
Nästa modul vi behöver är Menymodulen. Välj en valfri meny.
Ta bort bakgrundsfärg
Ta sedan bort bakgrundsfärgen från modulen.
Disposition
Gå sedan till fliken Designa och ändra layoutinställningarna.
- Stil: Centrerad
- Rullgardinsmeny Riktning: Nedåt
Menytextinställningar
Ändra även menytextinställningarna.
- Aktiv länkfärg: #cecece
- Menyteckensnitt: Montserrat
- Meny Teckensnittsvikt: Fet
- Textfärg: #000000
- Menytextstorlek: 0,9 vw (skrivbord), 2 vw (surfplatta), 2,5 vw (telefon)
Menytext vid muspekaren
Ändra färgen på menytexten när du håller muspekaren.
- Menytextfärg: #afafaf
Rullgardinsmenyn
Vi gör också några ändringar i rullgardinsmenyn.
- Färg på rullgardinsmenyn: #000000
- Rullgardinsmeny Textfärg: #000000
ikoner
Ändra sedan färgen på hamburgermenyns ikon.
- Hamburgermenyikon Färg: #000000
avstånd
Och lägg till anpassade marginalvärden på olika skärmstorlekar.
- Marginal (överst och neder): 18 vw (dator), 0 vw (surfplatta och telefon)
- Marginal (vänster och höger): -13vw (dator), 0vw (surfplatta och telefon)
Transformera rotationen
Nu, för att skapa rotationseffekten, ska vi leka med modulens transformationsrotationsvärden.
- Vänster: 270 grader (skrivbord), 0 grader (surfplatta och telefon)
Lägg till modulen "Följ sociala medier" i kolumnen
Lägg till sociala nätverk
Låt oss gå vidare till modulen "Social Media Follow", som är nästa och sista modul vi behöver för att slutföra vår globala pivoterade rubrik. Lägg till några valfria sociala nätverk.
Återställ ikonstilar för sociala medier
Fortsätt genom att återställa inställningarna för varje socialt nätverk individuellt. Detta kommer att hjälpa oss att bli av med deras bakgrundsfärg.
uppriktning
Byt sedan till fliken Designa av modulen och ändra inriktningen av modulen på olika skärmstorlekar.
- Justeringsmodul: Vänster (Skrivbord), Höger (Surfplatta och telefon)
Ikoninställningar
Ändra slutligen även ikoninställningarna.
- Ikonfärg: #000000
- Använd anpassad ikonstorlek: JA
- Ikon Teckenstorlek: 2,1 vw
Spara konstruktorändringar och visa resultatet
När du har slutfört alla moduler kan du spara modellen, avsluta byggaren av teman av Divi och visualisera resultatet på din webbplats !
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på resultatet.
office
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi hur du skapar en roterad global rubrik. Om du inte väljer något annat kommer den globala rubriken vi skapade att visas på alla dina inlägg och sidor.
Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Se också 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.
.
