Att få din webbplats att sticka ut från mängden är ibland lättare sagt än gjort. Lyckligtvis kan du engagera dig i att vara en liten gör-det-själv genom att lägga till kreativa anpassningsdetaljer som säkerställer att din blogg sticker ut från andra.

I den här handledningen kommer jag att visa dig hur du använder Divi-byggaren för att anpassa din blogg, och i synnerhet 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 var allt för den här handledningen, jag hoppas att den låter dig 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 NED 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”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials

liknande föremål

3 Kommentarer

cocos den 8 januari 2020 kl 22 h 13 min

Hej!

Tack för alla dina tutorials.
Vet du om vi kan lägga divi-undermenyn (andra nivå under rullgardinsmenyn) i fyllningsbredd? som tar upp hela bredden på sidan
svar
Germain Jung den 10 oktober 2018 vid 10 timmar och 20 min

Hej!

Hur ska du ändra på färgen på texten i huvudrubriken? Med en transparent bakgrund (på min huvudrubrik) är teckensnittsfärgen jag valde (på min huvudrubrik, som presenterar mina olika avsnitt) via divi-anpassningsgränssnittet svart. Jag skulle dock vilja att den skulle vara vit på Vissa SIDOR eftersom bilden nedan är för mörk.

Hur?

Tack på förhand
svar
- thierry Bertrand den 10 oktober 2018 vid 16 timmar och 32 min
  
  Hej Germain,
  
  Vill du att den ska vara vit på alla sidor eller bara några få sidor?
  svar