At få dit websted til at skille sig ud fra mængden er nogle gange lettere sagt end gjort. Heldigvis kan du blive involveret i gør-det-selv ved at tilføje kreative tilpasninger, der sikrer det din blog skiller sig ud fra andre.

I denne tutorial vil jeg vise dig, hvordan du bruger Divi-byggeren til at tilpasse din blog, og i særdeleshed CSS-området.

Dette er den region, jeg taler om:

Hvad dette betyder er, at eventuelle ændringer, vi foretager her, kun vil være effektive på den side, vi redigerer. Dette er en utrolig interessant og nyttig funktion!

Her er det endelige resultat, vi vil have i slutningen af ​​denne tutorial. Baggrundsfarven på navigationsmenuen, der ændres afhængigt af den side, du besøger. Som en ekstra mulighed vil du bemærke, at ikonerne også ændrer farve.

Jeg vil først vise, hvordan jeg anvender baggrundsfarven i menuen. Derefter viser jeg dig separat, hvordan du får de sociale ikoner til at matche.

Hvis du endnu ikke har læst vores tutorial om præsentation af temaet WordPress Divi, Jeg inviterer dig til at gøre det.

Lad os starte!

Anvend farver til menuer

Først bruger jeg standard headerformat. Hvis du bruger et andet format, skal denne tutorial stadig være effektiv, fordi det generiske ID for "divs" på Divi er det samme for alle formater (# main-header), så vidt jeg ved. Hvis du har problemer med andre formater.

Vi er nødt til at sikre, at linkene vises i bunden. De farver, jeg valgte, som du finder på Coolors.co, hvis du vil bruge dem, er på den mørkere side, så jeg er nødt til at gøre tekstlinket til en lys farve. Jeg valgte farven hvid.

Jeg bruger rgba (255,255,255,0.6), som vil være linkfarven og mørk hvid som den aktive linkfarve (for den ønskede visuelle effekt)

Gå derefter til den side, hvor du vil anvende den første ændring (bør du se menuen links på plads). Klik på ikonet "3 linje", så vises et valgfelt.

Tilføj nu følgende CSS i denne boks:

# Hand-header {baggrund: #474f61; }

Du skal have noget lignende dette, glem ikke at ændre hex-koden til den farve, du vil have:

Klik på Gem og opdater Og dette vil gælde for hovedmenuen, alt sammen i en kodelinie.

Nu skal du bare tilføje den samme kode til alle dine sider og ændre hex-koden hver gang.

Sociale netværksikoner (valgfrit)

For denne del vil vi ændre den kode, vi allerede har gjort, og derefter tilføje nogle kode på webstedets CSS-niveau, og jeg vil forklare, hvorfor nogle CSS skal tilføjes på individuelle sider, og hvorfor nogle ikke skal være være.

Så først skal du sørge for, at du har konfigureret dine sociale links. Gå til " Divi-indstillinger> Generelt tema Og tilføj dine URL'er til dine sociale mediesider.

Gå derefter til dine indstillinger i den sekundære menulinje og indstil baggrunds- og tekstfarver. Jeg vælger 'hvid' som tekstfarve, fordi jeg vil tilføje en rund farvet baggrund til hvert sociale ikon for at matche med den nye menufarve, så ikonet kan vises.

Gå til " Header & Navigation> Header Elements Og markér afkrydsningsfeltet " Vis sociale ikoner '.

Kan du huske, hvordan vi fortsatte med at tilføje CSS på hver side? Vi går tilbage og redigerer det, vi skrev før. Erstat hvad du har der med følgende CSS, eller hvis du genkender, hvad der er anderledes, kan du blot tilføje den ekstra kode.

# Hånd-header, # .og top-header-social-ikon {baggrund: #474f61; }

Denne kode tillader, at vores websted ikke kun ændrer baggrundsfarven til menuen på denne side, men også baggrunden for vores sociale ikoner. Vi har lige tilføjet et andet element til blandingen. Du skal have noget, der ligner følgende:

Du skal muligvis kontrollere, at hexfarver er korrekte på hver side.

Generelt CSS

Følgende kode findes i din " Temaindstilling> CSS-boks Eller i stilfilen til barnets tema.

# Top-header-sociale-ikoner .og li {margin-left: 5px; } # .og top-header-social-ikon {padding: 4px; margin-bottom: 8px; bredde: 30px; højde: 30px; border-radius: 50%; line-height: 24px; }

Du undrer dig måske over, hvorfor det ikke er tilfældet i CSS-boksen på siden. Årsagen er, at dette bestemte stykke kode påvirker alle de målrettede elementer, så det er ineffektivt at anbringe den nøjagtige samme kode flere steder. Kun baggrundsfarven ændres pr. Side, men denne kode ændres ikke pr. Side. Det er bare en bedste praksis at undgå at lægge vægt på dit websted.

Det er alt for denne tutorial, jeg håber, at den vil give dig mulighed for at tilpasse menuerne på din WordPress blog.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column" /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andre Divi tutorials

• 5 websteder, der bruger Divi restaurant tema
• Sådan tilføjer du tekst på et Divi WooCommerce-produkt
• Sådan ændres menuen farve mellem Divi sider
• Sådan tilpasses tavlerne på en blog med Divi
• Sådan bruges rolle Divi redaktør på WordPress
• Sådan opretter du en Divi-skyder på fuld skærm
• Sådan ændres menuenes farve mellem Divi-sider
• Funktioner, som du sandsynligvis ikke kender til Divi
• Sådan bruger du Divi Builder på WordPress
• Sådan bruges Divi-video-rullemodulet
• Sådan bruges Divi Builder Flip-modulet
• Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
• Sådan bruges Divi-tekstmodulet
• Sådan opretter du en skyder på Divi
• Sådan redigeres en Divi-brugerrolle
• Sådan bruges Divi Social Media-modulet
• Sådan bruges butikmodulet med temaet WordPress Divi
• Sådan bruges Divi sidebar modul
• Sådan bruges Divi Price Table Module
• Sådan bruges titelmodulet i Divi-publikationer
• Sådan tilføjes et videomodul til Divi
• Sådan bruges artikelnavigationsmodulet
• Sådan bruges Divi-søgemodulet
• Sådan bruges Divi wallet-modulet
• Sådan bruges personmodulet på Divi Builder
• Sådan bruges tegnebogen modulet med Divi filter
• Sådan bruges glidemodulet i fuld bredde
• Sådan bruges Divi Builder Image Module
• Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
• Sådan bruges billedgallerimodulet
• Sådan bruges Divi Builder Fuldbredde-kortmodul
• Sådan bruges Divi Full Width Portfolio Module
• Sådan bruges Divi-modulet i fuld bredde
• Sådan bruges Divi Counter Module
• Sådan bruges artikelskyderen på Divi Builder
• Sådan bruges Divi Email Optin-modulet