Divi: Sådan opretter du en klæbrig global header

Kunne du tænke dig at lave en sticky header med Divi ?

Oprettelse af sticky headers er gået glat siden ankomsten af temaer, men vi oplever, at mange mennesker ikke ved, hvordan de opretter dem uden at bruge ekstra kode. Det er dog også ret nemt at gøre det takket være de klæbrige muligheder Divi.

Faktisk er det ikke kun nemmere, men denne metode giver flere muligheder for at tilpasse designet.

Vi vil derfor tage os tid, i denne tutorial, til at vise dig, hvordan du opretter en ultra personlig sticky header ved hjælp af parametrene Divi.

undersøgelse

Før vi dykker ned i denne tutorial, lad os tage et kig på det resultat, vi ønsker at opnå.

Byg overskriftselementstrukturen

Opret en ny global header-skabelon

Få adgang til Divi Theme Builder, og begynd at oprette en ny global eller tilpasset header.

Parametre i afsnit 1

Gradient baggrund

Når vi først er i skabeloneditoren, starter vi med at bygge strukturen af vores overskriftselementer. I den anden del af denne øvelse vil vi fokusere på at anvende de forskellige klæbrige indstillinger for at fuldføre design af klæbrig overskrift.

Læs også: Sådan opretter du en glidende og push-menu i DIVI

I skabeloneditoren vil du bemærke en sektion. Åbn dette afsnit og anvend en gradientbaggrund.

Farve 1: #ffba60
Farve 2: #ffd6a0
Gradientretning: 90 grader
Udgangsposition: 50%
Endelig position: 50 %

afstand

Fjern derefter alle interne margener (øverst og nederst) som standard.

Indre margin toppunkt: 0px
Bund intern margin: 0px

Tilføj en ny linje

Struktur af søjlen

For at oprette vores øverste overskriftslinje tilføjer vi en ny række til vores sektion ved hjælp af følgende kolonnestruktur:

dimensionering

Uden at tilføje moduler endnu, skal du åbne rækkeindstillingerne og ændre størrelsesindstillingerne som følger:

Brug tilpasset tagrendebredde: Ja
Kolonneafstand: 1
Maksimal bredde: 95%
Maksimal bredde: 2 pixels

afstand

Tilføj også tilpassede interne margener (top og bund).

Indre margin toppunkt: 15px
Bund intern margin: 15px

CSS hovedelement

Og for at sikre, at kolonnerne forbliver ved siden af hinanden på mindre skærmstørrelser, tilføjer vi en linje med CSS-kode til hovedrækkeelementet i den avancerede fane.

display: flex;

Tilføj modulet 'Følg os på sociale medier' til kolonne 1

Tilføj sociale netværk efter eget valg

Det er tid til at tilføje moduler, startende med et 'Følg os på sociale medier'-modul i kolonne 1. Tilføj de sociale netværk efter eget valg sammen med deres tilsvarende links.

Fjern baggrundsfarve fra hvert socialt netværk

Fortsæt ved at fjerne hver af baggrundsfarverne fra det sociale netværk individuelt.

Ikonindstillinger

Gå derefter tilbage til de generelle modulindstillinger og skift ikonfarven i designfanen.

Ikonfarve: #26333a

afstand

Tilføj også en øverste margen.

Topmargin: 5 px

Tilføj knapmodulet til kolonne 2

Tilføj tekst til knappen

I kolonne 2 er det eneste modul, vi har brug for, et knapmodul. Tilføj en tekst efter eget valg.

Tilføj et link

Tilføj derefter et link.

Knapjustering

Skift derefter til fanen Stil og skift knapjusteringen.

Knapjustering: højre

Knapindstillinger

Vi tilpasser også knappen.

Brug brugerdefinerede stilarter til knap: Ja
Knaptekststørrelse: 14px
Knaptekstfarve: #26333a
Knapkantbredde: 2px
Knapkantfarve: #26333a
Knapkantradius: 0 pixels

Bogstavafstandsknapper: 4px
Blødt lys-knap: Fed tekst
Kopistil-knap: store bogstaver
Vis knap: ja

afstand

Og vi afslutter modulindstillingerne ved at tilføje interne margener (øverst og nederst) til afstandsindstillingerne.

Indre margin toppunkt: 10px
Bund intern margin: 10px