Uw site onderscheiden van de massa is soms makkelijker gezegd dan gedaan. Gelukkig kun je meedoen aan het doe-het-zelf-werk door creatieve aanpassingen toe te voegen die daarvoor zorgen jouw blog onderscheidt zich van anderen.

In deze tutorial laat ik je zien hoe je de Divi-builder kunt gebruiken om aan te passen jouw blog, en in het bijzonder het CSS-gebied.

Dit is de regio waar ik het over heb:

Dit betekent dat alle wijzigingen die we hier aanbrengen alleen van kracht zijn op de pagina die we aan het bewerken zijn. Het is een ongelooflijk interessante en nuttige functie!

Hier is het eindresultaat dat we aan het einde van deze tutorial hebben. De achtergrondkleur van het navigatiemenu dat verandert afhankelijk van de pagina die u bezoekt. Als extra optie zult u merken dat de pictogrammen ook van kleur veranderen.

Ik zal eerst laten zien hoe je de achtergrondkleur op het menu toepast. Vervolgens laat ik je afzonderlijk zien hoe je de sociale pictogrammen kunt laten matchen.

Als je onze tutorial nog niet hebt gelezen over presentatie van het thema WordPress Divi, Ik nodig je uit om het te doen.

Laten we beginnen!

Pas kleuren toe aan menu's

Ten eerste gebruik ik het standaard header-formaat. Als je een ander formaat gebruikt, zou deze tutorial nog steeds effectief moeten zijn omdat de generieke ID van de "divs" op Divi hetzelfde is voor alle formaten (# main-header), voor zover ik weet. Als u problemen heeft met andere formaten.

We moeten ervoor zorgen dat de links onderaan verschijnen. De kleuren die ik heb gekozen, die je op Coolors.co vindt als je ze wilt gebruiken, zijn aan de donkere kant, dus ik moet de tekstlink een lichte kleur geven. Ik koos voor de kleur wit.

Ik gebruik rgba (255,255,255,0.6), wat de linkkleur en donkerwit als de actieve linkkleur zal zijn (voor het gewenste visuele effect)

Ga vervolgens naar de pagina waarop u de eerste wijziging wilt toepassen (U zou de menu-links die zijn ingesteld, moeten zien). Klik op het pictogram "3 regels" en een optievenster zal verschijnen.

Voeg nu de volgende CSS toe aan dit vak:

# Hoofdkoptekst {achtergrond: #474f61; }

Je zou zoiets als dit moeten hebben, vergeet niet om de hexadecimale code te veranderen in de gewenste kleur:

Klik op Opslaan en bijwerken En dit is van toepassing op het hoofdmenu, alles op één regel code.

Nu hoeft u alleen maar dezelfde code voor al uw pagina's toe te voegen en de hexadecimale code elke keer te wijzigen.

Pictogrammen sociaal netwerk (optioneel)

Voor dit deel gaan we de code wijzigen die we al hebben gedaan, dan wat code toevoegen op het CSS-niveau van de site, en ik zal uitleggen waarom sommige CSS moeten worden toegevoegd aan afzonderlijke pagina's en waarom sommige niet 'zijn.

Dus je moet er eerst voor zorgen dat je je sociale links hebt ingesteld. Ga naar ' Divi-opties> Algemeen thema En voeg uw URL's toe aan uw sociale media-pagina's.

Ga dan naar je instellingen in de secundaire menubalk en stel de achtergrond- en tekstkleuren in. Ik kies 'wit' als de tekstkleur omdat ik een ronde gekleurde achtergrond aan elk sociaal pictogram ga toevoegen die overeenkomt met de nieuwe menukleur, zodat het pictogram kan verschijnen.

Ga naar ' Header & navigatie> Header-elementen En vink het vakje aan " Toon sociale pictogrammen .

Weet je nog hoe we CSS op elke pagina hebben toegevoegd? We zullen teruggaan en bewerken wat we eerder schreven. Vervang wat je daar hebt met de volgende CSS, of als je herkent wat anders is, kun je eenvoudig de extra code toevoegen.

# Hoofdhoofd, # bovenhoofd. En-sociaal-icoon a {achtergrond: #474f61; }

Met deze code kan onze site niet alleen de achtergrondkleur voor het menu op deze pagina wijzigen, maar ook de achtergrond van onze sociale pictogrammen. We hebben zojuist een ander element aan de mix toegevoegd. U zou iets moeten hebben dat er als volgt uitziet:

Mogelijk moet u controleren of hexadecimale kleuren op elke pagina correct zijn.

Algemene CSS

De volgende code staat in uw ' Thema-optie> CSS-box Of in het stijlbestand van het kindthema.

# Top-header .and-sociale-iconen li {marge-left: 5px; } # Top-header. En-sociaal-icoon a {padding: 4px; Marge-bodem: 8px; Breedte: 30px; Hoogte: 30px; Randstraal: 50%; Lijnhoogte: 24px; }

Je vraagt ​​je misschien af ​​waarom dit niet zo is in het CSS-vak van de pagina. De reden is dat dit specifieke stuk code alle beoogde elementen beïnvloedt, dus het is inefficiënt om exact dezelfde code op meerdere plaatsen te plaatsen. Alleen de achtergrondkleur verandert per pagina, maar deze code verandert niet per pagina. Het is gewoon een goede gewoonte om te voorkomen dat u gewicht toevoegt aan uw site.

Dat is alles voor deze tutorial, ik hoop dat je hiermee de menu's op je . kunt aanpassen 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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/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=”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 DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi-zelfstudies

• 5 websites voor restaurant gebruik Divi thema
• Tekst toevoegen aan een Divi WooCommerce-product
• Hoe de menukleur tussen Divi-pagina's te veranderen
• Hoe de rasters van een blog personaliseren met Divi
• Hoe de rol Divi editor op WordPress
• Een Divi-schuifregelaar op volledig scherm maken
• Hoe de kleur van menu's tussen Divi-pagina's te veranderen
• Functies die u waarschijnlijk niet kent over Divi
• Divi Builder gebruiken op WordPress
• Hoe de Divi-scrolmodule video te gebruiken
• Hoe de Divi Builder Flip-module te gebruiken
• Hoe een getuigenismodule op Divi Builder toe te voegen
• Hoe de Divi-tekstmodule te gebruiken
• Hoe maak je een schuifregelaar op Divi
• Hoe u een Divi-gebruikersrol kunt bewerken
• Hoe de Divi Social Media-module te gebruiken
• Hoe de shopmodule te gebruiken met het thema WordPress Divi
• Hoe de Divi zijbalkmodule te gebruiken
• Hoe de Divi Price Table-module te gebruiken
• Hoe de titelmodule van Divi-publicaties te gebruiken
• Hoe een videomodule van Divi toe te voegen
• Hoe de artikelnavigatiemodule te gebruiken
• Hoe de Divi-zoekmodule te gebruiken
• Hoe de Divi wallet-module te gebruiken
• Hoe de persoonsmodule op Divi Builder te gebruiken
• De walletmodule gebruiken met Divi-filter
• De schuifregelaarmodule op de volledige breedte gebruiken
• Hoe de Divi Builder-beeldmodule te gebruiken
• De navigatiemodule op de volledige breedte van Divi Builder gebruiken
• Hoe de afbeeldingengalerij-module te gebruiken
• Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
• Hoe de Divi Full Width Portfolio Module te gebruiken
• Hoe de Divi header-module over de volle breedte te gebruiken
• Hoe de Divi Counter-module te gebruiken
• De schuifregelaar voor artikelen gebruiken in Divi Builder
• Hoe de Divi Email Optin-module te gebruiken