Framtiden för webbhotell är här!

Så snart din webbplats når 15.000 3 besökare per månad under en period av 90 månader (XNUMX dagar) blir ditt webbhotell automatiskt gratis på livstid ... liksom alla Premium WordPress-plugins inkluderade.

N

Oöverträffad hanterad hosting

N

Elementor, Divi AI, AIOSEO och mer

N

PayPal-e-postadress för affiliates

N

Brouavo Super Marketing Plugin

N

Lansera din webbplats på några minuter

N

Expertsupport i toppklass dygnet runt

N

30 jours satisfait ou remboursé

Ingår i alla paket: Elementor Pro – Divi Builder och Divi Ai, Translatepress Pro, Allt-i-ett SEO-proffs, Försvarare Pro, Forminator Pro, Smush Pro, Snapshot Pro, Betald medlemsprenumeration Pro, Kolibri Pro, Hustle Pro, Brouavo Super Marketing-plugin.

Att få din webbplats att sticka ut från mängden är ibland lättare sagt än gjort. Som tur är kan du komma igång med dina gör-det-själv-projekt genom att lägga till kreativa anpassningsdetaljer som får din blogg att sticka ut från mängden.

I den här handledningen visar jag 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 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″ stil= »platt » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-nedladdning »]LADDA NED DET DIVI TEMA [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials » target= blank » layout= »expanderad » align= »center » font_family= »Raleway » font_weight= »700″ style= »platt » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-ladda ner »]NEDLADDA MALL DIVI[/vcex_button][/vc_column][/vc_row]

Andra Divi tutorials

författarens avatar
Blair Jersyer
WordPress-utvecklare och brinner för allt som rör nya tekniska trender. Plugin författare, WordPress-teman och andra webbapplikationer. Författare på BlogPasCher.com.

Klämma fast den på Pinterest