Ibland är det lättare att säga än gjort att din webbplats sticker ut från mängden. Lyckligtvis kan du fastna i att spela den lilla tinkern genom att lägga till kreativa detaljer av personalisering som gör att din blogg sticker ut från resten.

I den här tutorialen kommer jag att visa dig hur du använder Divi-byggaren för att anpassa din blogg, särskilt CSS-området.

Det här är den region jag pratar om:

Vad detta betyder är att alla ändringar vi gör här bara kommer att vara effektiva på den sida vi redigerar. Det är en otroligt intressant och användbar funktion!

Här är det slutliga resultatet vi kommer att få i slutet av denna tutorial. Bakgrundsfärgen på navigationsmenyn som ändras beroende på sidan du besöker. Som ett ytterligare alternativ kommer du att märka att ikonerna också ändrar färg.

Jag visar först hur man använder bakgrundsfärgen på menyn. Sedan kommer jag separat att visa dig hur du får de sociala ikonerna att matcha.

Om du ännu inte har läst vår handledning om presentation av temat WordPress Divi, Jag inbjuder dig att göra det.

Låt oss börja!

Använd färger till menyerna

Först använder jag standardhuvudformatet. Om du använder ett annat format bör den här självstudien fortfarande vara effektiv eftersom det generiska ID för "divs" på Divi är detsamma för alla format (# huvudhuvud), såvitt jag vet. Om du har problem med andra format.

Vi måste se till att länkarna visas längst ner. De färger jag valde, som du hittar på Coolors.co om du vill använda dem, är på den mörkare sidan, så jag måste göra textlänken till en ljus färg. Jag valde färgen vit.

Jag använder rgba (255,255,255,0.6) som kommer att vara länkfärgen och mörkvit som den aktiva länkfärgen (för önskad visuell effekt)

Gå sedan till sidan där du vill använda den första ändringen (bör du se menyn länkar på plats). Klicka på ikonen "3 rader" så visas en alternativruta.

Lägg nu till följande CSS i den här rutan:

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

Du borde ha något liknande detta, glöm inte att ändra hexkoden till vilken färg du vill:

Klicka på Spara och uppdatera Och detta gäller huvudmenyn, allt i en kodrad.

Nu behöver du bara lägga till samma kod för alla dina sidor och ändra hexkoden varje gång.

Sociala nätverksikoner (valfritt)

För den här delen kommer vi att ändra koden som vi redan har gjort, lägga till lite kod på webbplatsens CSS-nivå, och jag förklarar varför vissa CSS bör läggas till på de enskilda sidorna och varför vissa inte borde vara vara.

Så först måste du se till att du har skapat dina sociala länkar. Gå till " Divi-alternativ> Allmänt tema Och lägg till dina URL: er på dina sociala mediesidor.

Gå sedan till dina inställningar i det sekundära menyraden och ställ in bakgrunds- och textfärger. Jag väljer "vit" som textfärg eftersom jag ska lägga till en rund färgad bakgrund till varje social ikon för att matcha med den nya menyfärgen så att ikonen kan visas.

Gå till " Rubrik och navigering> Rubrikelement Och kryssa i rutan " Visa sociala ikoner ".

Kommer du ihåg hur vi fortsatte med att lägga till CSS på varje sida? Vi kommer att gå tillbaka och redigera det vi skrev tidigare. Byt ut vad du har där med följande CSS, eller om du känner igen vad som är annorlunda kan du helt enkelt lägga till den extra koden.

# Hand-header, .och # top-header-social-icon {background: #474f61; }

Den här koden gör att vår webbplats inte bara kan ändra bakgrundsfärgen för menyn på den här sidan utan också bakgrunden till våra sociala ikoner. Vi har precis lagt till ett annat element i mixen. Du borde ha något som ser ut som följande:

Du kan behöva kontrollera att hexfärger är korrekta på varje sida.

Allmän CSS

Följande kod finns i din " Temalternativ> CSS-ruta Eller i stilfilen för barntema.

# Top-header-social-ikoner .och li {margin-left: 5px; } # .och top-header-social-icon {padding: 4px; margin-bottom: 8px; bredd: 30px; höjd: 30px; border-radius: 50%; line-height: 24px; }

Du undrar kanske varför det inte är så i CSS-rutan på sidan. Anledningen är att denna kodkod påverkar alla riktade objekt, så det är ineffektivt att sätta exakt samma kod på flera platser. Endast bakgrundsfärgen ändras per sida, men den här koden ändras inte per sida. Det är bara en bästa praxis att undvika att lägga vikt på din webbplats.

Det är allt för denna självstudie, jag hoppas att det kommer att göra det möjligt för dig att anpassa menyerna på din WordPress-blogg.

[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 = "platt" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] LADDA NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andra Divi tutorials

• 5 webbplatser för restaurang användning Divi tema
• Så här lägger du till text på en Divi WooCommerce-produkt
• Så här byter du menyfärg mellan Divi-sidor
• Hur du anpassar rutorna på en blogg med Divi
• Hur man använder roll Divi editor på Wordpress
• Hur man skapar en Divi-skjutreglage på full skärm
• Hur man ändrar menyens färg mellan Divi-sidor
• Funktioner du antagligen inte känner till Divi
• Så här använder du Divi Builder på WordPress
• Så här använder du Divi video-rullningsmodulen
• Så här använder du Divi Builder Flip-modulen
• Hur man lägger till en vittnesmodul om Divi Builder
• Så här använder du Divi-textmodulen
• Hur man skapar en reglage på Divi
• Hur man redigerar en Divi-användarroll
• Så här använder du Divi Social Media-modulen
• Hur man använder butikmodulen på temat WordPress Divi
• Så här använder du Divi sidebar-modulen
• Så här använder du Divi Price Table Module
• Hur man använder titelfodulen i Divi-publikationer
• Hur lägger jag till en videomodul av Divi
• Så här använder du artikelnavigationsmodulen
• Så här använder du Divi-sökmodulen
• Så här använder du Divi-plånboksmodulen
• Hur man använder personmodulen på Divi Builder
• Hur man använder plånboksmodulen med Divi-filter
• Hur man använder skjutreglaget med hela bredden
• Så här använder du Divi Builder Image Module
• Så här använder du Divi Builder med fullbredd navigationsmodul
• Hur man använder modulen för bildgalleri
• Så här använder du Divi Builder Full-Width Card Module
• Så här använder du Divi Full Width Portfolio Module
• Hur du använder Divi-modulen med full bredd
• Så här använder du Divi Counter Module
• Hur man använder artiklarna på Divi Builder
• Så här använder du Divi Email Optin-modulen