Å få nettstedet ditt til å skille seg ut fra mengden er noen ganger lettere sagt enn gjort. Heldigvis kan du engasjere deg i å være en liten DIYer ved å legge til kreative tilpasninger som sikrer at bloggen din skiller seg ut fra andre.

I denne opplæringen vil jeg vise deg hvordan du bruker Divi-byggeren til å tilpasse bloggen din, og spesielt CSS-området.

Dette er regionen jeg snakker om:

Hva dette betyr er at eventuelle endringer vi gjør her, bare vil være effektive på siden vi redigerer. Det er en utrolig interessant og nyttig funksjon!

Her er det endelige resultatet vi vil ha på slutten av denne opplæringen. Bakgrunnsfargen på navigasjonsmenyen som endres avhengig av siden du besøker. Som et ekstra alternativ vil du merke at ikonene også endrer farge.

Jeg vil først vise hvordan du bruker bakgrunnsfargen på menyen. Så hver for seg vil jeg vise deg hvordan du får de sosiale ikonene til å matche.

Hvis du ennå ikke har lest opplæringen vår om presentasjon av temaet WordPress Divi, Jeg inviterer deg til å gjøre det.

La oss begynne!

Bruk farger på menyer

Først bruker jeg standard headerformat. Hvis du bruker et annet format, bør denne opplæringen fortsatt være effektiv fordi den generiske ID-en til "divs" på Divi er den samme for alle formater (# main-header), så vidt jeg vet. Hvis du har problemer med andre formater.

Vi må sørge for at lenkene vises nederst. Fargene jeg valgte, som du finner på Coolors.co hvis du vil bruke dem, er på den mørkere siden, så jeg må gjøre tekstlenken til en lys farge. Jeg valgte fargen hvit.

Jeg bruker rgba (255,255,255,0.6) som vil være koblingsfargen og mørkhvit som den aktive koblingsfargen (for ønsket visuell effekt)

Gå deretter til siden du vil bruke den første endringen på (du burde se meny koblinger på plass). Klikk på ikonet "3 linjer", så vises en alternativboks.

Legg nå til følgende CSS i denne boksen:

# Hånd header {bakgrunn: #474f61; }

Du bør ha noe som ligner på dette, ikke glem å endre hex-koden til hvilken farge du vil:

Klikk på Lagre og oppdater Og dette vil gjelde for hovedmenyen, alt i en kodelinje.

Nå trenger du bare å legge til den samme koden for alle sidene dine og endre heksekoden hver gang.

Sosiale nettverksikoner (valgfritt)

For denne delen skal vi endre koden vi allerede har gjort, og deretter legge til litt kode på nettstedets CSS-nivå, og jeg vil forklare hvorfor noen CSS bør legges til på de enkelte sidene, og hvorfor noen ikke bør være være.

Så først må du sørge for at du har satt opp sosiale koblinger. Gå til " Divi-alternativer> Generelt tema Og legg til nettadressene dine på sosiale mediesider.

Gå deretter til innstillingene i den sekundære menylinjen og angi bakgrunns- og tekstfarger. Jeg velger 'hvit' som tekstfarge fordi jeg skal legge til en rund farget bakgrunn til hvert sosiale ikon for å matche med den nye menyfargen, slik at ikonet kan vises.

Gå til " Topptekst og navigering> Topptekstelementer Og merk av i ruten " Vis sosiale ikoner '.

Husker du hvordan vi gikk videre med å legge til CSS på hver side? Vi vil gå tilbake og redigere det vi skrev før. Erstatt hva du har der med følgende CSS, eller hvis du kjenner igjen det som er annerledes, kan du ganske enkelt legge til den ekstra koden.

# Hånd header, # .and topp-header-sosial-ikonet {background: #474f61; }

Denne koden gjør at nettstedet vårt ikke bare kan endre bakgrunnsfargen for menyen på denne siden, men også bakgrunnen til våre sosiale ikoner. Vi har nettopp lagt til et annet element i blandingen. Du bør ha noe som ser ut som følgende:

Du må kanskje sjekke at sekskantfarger stemmer på hver side.

Generell CSS

Følgende kode vil være i din " Temaalternativ> CSS-boks Eller i stilfilen til barnetema.

# Top-header-sosial-ikoner .og li {margin-left: 5px; } # .og topp-header-sosial-ikon {padding: 4px; margin-bottom: 8px; bredde: 30px; høyde: 30px; border-radius: 50%; linje-høyde: 24px; }

Du lurer kanskje på hvorfor det ikke er slik i CSS-boksen på siden. Årsaken er at dette bestemte kodestykket påvirker alle målrettede elementer, så det er ineffektivt å plassere nøyaktig samme kode flere steder. Bare bakgrunnsfargen endres per side, men denne koden endres ikke per side. Det er bare en god praksis å unngå å legge vekt på nettstedet ditt.

Det er alt for denne opplæringen, jeg håper den vil tillate deg å tilpasse menyene på din 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”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]

Andre divisjoner

• 5 nettsteder for restaurant bruk Divi tema
• Slik legger du til tekst på et Divi WooCommerce-produkt
• Slik endrer du menyfargen mellom Divi-sider
• Hvordan tilpasse rutenettene til en blogg med Divi
• Hvordan bruke rollen Divi editor på WordPress
• Hvordan lage en Divi-glidebryter på fullskjerm
• Hvordan endre farge på menyer mellom Divi-sider
• Funksjoner du sannsynligvis ikke kjenner til Divi
• Slik bruker du Divi Builder på WordPress
• Slik bruker du Divi video-rullemodulen
• Slik bruker du Divi Builder Flip-modulen
• Hvordan legge til en attestmodul på Divi Builder
• Slik bruker du Divi-tekstmodulen
• Hvordan lage en glidebryter på Divi
• Hvordan redigere en Divi-brukerrolle
• Slik bruker du Divi Social Media-modulen
• Hvordan bruke butikkmodulen på temaet WordPress Divi
• Slik bruker du Divi sidebar-modulen
• Slik bruker du Divi Price Table Module
• Slik bruker du tittelmodulen til Divi-publikasjoner
• Hvordan legge til en videomodul av Divi
• Slik bruker du artikkelen navigasjonsmodulen
• Slik bruker du Divi-søkemodulen
• Slik bruker du Divi-lommebokmodulen
• Slik bruker du personmodulen på Divi Builder
• Slik bruker du lommebokmodulen med Divi filter
• Slik bruker du skyvemodulen med full bredde
• Slik bruker du Divi Builder Image Module
• Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
• Slik bruker du bildegalleriemodulen
• Slik bruker du Divi Builder Full-Width Card Module
• Slik bruker du Divi Full Width Portfolio Module
• Hvordan bruke Divi-modulen i full bredde
• Slik bruker du Divi-tellermodulen
• Slik bruker du glidebryteren for artikler på Divi Builder
• Slik bruker du Divi Email Optin-modulen