Kunne du tænke dig at skabe en flot gennemsigtig og klæbrig header med Divi?
Når det kommer til at opsætte en global header til din Websted, der er mange måder at gribe det an på. En af de mere subtile tilgange er en gennemsigtig header.
Hvis du beslutter dig for at gå med en gennemsigtig overskrift, men har brug for, at den er klæbrig, når du ruller, vil du elske denne tutorial. Overgangen mellem gennemsigtig og klæbrig er ubesværet!
Lad os gå.
undersøgelse
Før vi dykker ned i selvstudiet, lad os tage et hurtigt kig på resultatet.
Opret en ny global header-skabelon
Gå til Divi > Theme Builder.
Sektion #1 Indstillinger
Baggrundsfarve
Når du først er i skabeloneditoren, vil du bemærke en sektion. Dette afsnit vil være dedikeret til den øverste overskriftsbjælke, som du kan bemærke i forhåndsvisningen af denne artikel. Åbn sektionsindstillingerne og tilføj en sort baggrundsfarve.
- Baggrund: #000000
afstand
Skift til fanen Sektionsstil, og fjern alle de indre margener (øverst og nederst) som standard.
- Indre margin toppunkt: 0px
- Bund intern margin: 0px
Tilføj en ny linje
Struktur af søjlen
Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
Tilføj et tekstmodul til kolonnen
Tilføj et tekstmodul til rækkekolonnen, og indtast en besked efter eget valg.
Tekstindstillinger
Skift til fanen Modulstil og skift tekstindstillingerne i overensstemmelse hermed:
- Tekstskrifttype: Oswald
- Tekstkopistil: TT
- Tekstfarve Tekst: #ffffff
- Tekst Tekststørrelse:
- Desktop: 19px
- Tablet: 18px
- Telefon: 16px
- Tekstjustering: Centreret
Tilføj sektion # 2
afstand
Lige under den første sektion skal du tilføje en anden almindelig sektion. Denne sektion vil være dedikeret til vores gennemsigtige menu, som bliver klæbrig, når du ruller.
Åbn sektionsindstillingerne, og fjern alle interne margener (øverst og nederst) som standard på fanen Stil.
- Indre margin toppunkt: 0px
- Bund intern margin: 0px
Tilføj en ny linje
Struktur af søjlen
Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
Gennemsigtig baggrundsfarve
Åbn linjeindstillingerne og anvend en fuldstændig gennemsigtig baggrundsfarve på linjen.
- Baggrund: rgba (255,255,255,0)
dimensionering
Skift til fanen Linjestil, og skift størrelsesindstillingerne.
- Brug tilpasset tagrendebredde: Ja
- Kolonneafstand: 1
- Maksimal bredde: 100%
- Maksimal bredde: 100%
afstand
Tilføj derefter tilpassede interne (venstre og højre) margener.
- Venstre indre margen: 10 %
- Intern marginlov: 10 %
Skyggeæske
Påfør derefter en gennemsigtig boksskygge. Senere i vejledningen vil vi bruge denne boksskygge i en klæbrig tilstand med en anden skyggefarve.
- Box Shadow Blur Styrke: 50px
- Undertekstskriftfarve: rgba (0,0,0,0)
Position
For at sikre, at linjen vises øverst på indhold på siden, med en gennemsigtig baggrund, vil vi bruge en absolut position for vores række i den avancerede fane.
- Stilling: Absolut
- Sted: Øverst til venstre
Kolonne 2 Synlighed
Vi skjuler også den anden kolonne i vores række på tablet og telefon for at have et mindre komplekst headerdesign på mindre skærmstørrelser.
Tilføj menumodul til kolonne 1
Vælg en menu
Nu hvor vores rækkeindstillinger er på plads, er det tid til at tilføje moduler, startende med et menumodul i kolonne 1. Vælg den menu, du ønsker.
Download logo
Upload derefter et logo.
Fjern baggrundsfarve
Fjern også baggrundsfarven fra modulet.
Menutekstindstillinger
Skift til fanen Modulstil og skift menutekstindstillingerne i overensstemmelse hermed:
- Skriftmenu: Oswald
- Soft Light Menu: Fed
- Kopier stilmenu: TT
- Menutekstfarve: #efefef
- Menutekststørrelse: 18px
- Tekstjustering: højre
Indstillinger for rullemenu
Skift også indstillingerne for rullemenuen.
- Farve på rullemenuen: rgba(0,0,0,0)
- Mobilmenu Baggrundsfarve: rgba (0,0,0,0,95)
Ikonindstillinger
Skift derefter ikonets farver i ikonindstillinger.
- Farve på kurvens ikon: #ffffff
- Søg ikon farve: #ffffff
- Hamburger Menu Ikon Farve: #ffffff
Logoindstillinger
Vi ændrer også farven på vores logo i logoindstillingerne ved at ændre billedinversionsfilteret.
- Billedinvertering: 90 %
dimensionering
Dernæst vil vi tildele en maksimal højde til vores logo.
- Logo Maks. bredde: 40 pixels
afstand
Dernæst tilføjer vi top- og bundpolstring på små skærmstørrelser.
- Maksimal intern margin:
- Tablet og telefon: 10px
- Nederste indre margen:
- Tablet og telefon: 10px
Tilføj knapmodulet til kolonne 2
Tilføj tekst til knap
I kolonne 2 er det eneste modul, vi har brug for, et knapmodul. Tilføj en tekst efter eget valg.
Knapjustering
Skift til fanen Modulstil, og skift knapjusteringen.
- Knapjustering: højre
Knapindstillinger
Tilpas knappen næste.
- Brug brugerdefinerede stilarter til knap: Ja
- Knaptekststørrelse: 16px
- Knaptekstfarve: #ffffff
- Baggrundsknap: #ed4441
- Knapkantfarve: #ed4441
- Knap til kantradius: 0 pixels
- Knapbogstavafstand: 4px
- Knapskrifttype: Oswald
- Blødt lys-knap: Fed tekst
- Kopistil-knap: TT
- Vis knapikon: Ja
- Knapikonfarve: #1a1a1a
afstand
Og fuldfør modulindstillingerne ved at tilføje brugerdefinerede afstandsværdier.
- Topmargen: -70px
- Top og bund intern margin: 25 px
Anvend brugerdefinerede klæbrige effekter
Gør sektion #2 klæbrig
Nu hvor vi har lagt grundlaget for vores header, er det tid til at anvende den klæbrige effekt! For at gøre dette skal du starte med at åbne indstillingerne i den anden sektion og anvende følgende klæbende indstillinger på den avancerede fane:
- Sticky Position: Hold dig til toppen
- Stick Top Offset: 0px
- Nederste Sticky Mimit: Ingen
- Forskydning fra omgivende klæbrige elementer: JA
- Overgangsstandard og Sticky Styles: JA
Stick line baggrundsfarve
Nu hvor den klæbende indstilling er aktiveret, kan vi foretage ændringer af klæbrige valgmuligheder til alle elementer i sektionen. Vi starter med at åbne rækken, der indeholder vores menu og anvende en hvid baggrundsfarve til den klæbrige mulighed.
- Baggrundsfarve: #FFFFFF
Sticky rækkeafstand
Dernæst skal vi ændre afstandsværdierne for linjens klæbrige funktion.
- Indre margin toppunkt: 0px
- Bund intern margin: 0px
Sticky Row Shadow Box
Vi ændrer også farven på boksens skygge i en klæbrig tilstand.
- Undertekstskriftfarve: rgba(0,0,0,0.08)
Sticky line positionering
Dernæst returnerer vi rækkepositionen til relativ i en klæbrig tilstand.
- Stilling: Pårørende
- Offset Oprindelse: øverst til venstre
Tekstindstillinger for sticky state menu
Dernæst ændrer vi menutekstfarven til den klæbrige tilstand.
- Menutekstfarve: #000000
Menu drop-down indstillinger i klæbrig tilstand
Med mobilmenuens baggrundsfarve i rullemenuindstillinger.
- Mobilmenu, baggrundsfarve: #ffffff
Menuikonet farver i klæbrig tilstand
Skift også ikonfarver i en klæbrig tilstand.
- Farve på kurvens ikon: #000000
- Søg ikon farve: #000000
- Hamburger Menu Ikon Farve: #000000
Logofilter i klæbrig tilstand
Fjern derefter det inverterede filter fra logobilledet i en klæbrig tilstand.
- Billedinversion: 0 %
Knapafstand i klæbrig tilstand
Og fuldfør selvstudiet ved at fjerne den negative topmargen fra knappen, når den er i klæbrig tilstand.
- Topmargin: 0px
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på slutresultatet.
Download DIVI nu!!!
Konklusion
I denne artikel viste vi dig, hvordan du kombinerer konstruktøren af temaer af Divi med de nye klæbrige muligheder. Specifikt viste vi dig, hvordan du skifter fra en gennemsigtig header til en anden klæbrig header, mens du ruller.
Denne tilgang giver dig mulighed for at flette dit sidedesign med din menu, mens du stadig bevarer en pæn klæbrig overskrift, når du ruller.
Hvis du vil vide mere om Divi, så tøv ikke med at besøge vores katalog over Divi tutorials. Du kan også konsultere Sådan opretter du blogsiden med Divi Blog modulet
Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden, del denne artikel på dine forskellige sociale netværk.
...
