Gå till innehållet

Hur man ändrar färg på menyerna mellan sidorna Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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:

Anpassad wordpress css byggare avsnitt

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.

Ikon som ändrar färgdelning

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.

Divi-rubrikformat

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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.

Anpassning av divi-menyn

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.

Wordpress divi byggare

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:

Divi-inställningar för färganpassning

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

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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.

Social divi-ikon

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.

Anpassa sekundärmenyn

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

Divi wordpress rubrikelement

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:

Anpassad CSS-kodredigerare för tematema

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

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Allmän CSS

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

Anpassade avsnitt divi css temalternativ

# 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.

Andra Divi tutorials

Den här artikeln innehåller kommentarer 3

  1. 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

  2. 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

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
22 aktier
del13
tweet2
Enregistrer7