Treci la conținutul principal

Cum se schimba culoarea meniurilor între paginile Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Uneori, a face site-ul să iasă din mulțime este mai ușor de spus decât de făcut. Din fericire, te poți lăsa prins în jocul micului jucător, adăugând atingeri creative de personalizare care vor face ca blogul tău să se distingă de restul.

În acest tutorial, vă voi arăta cum să folosiți constructorul Divi pentru a vă personaliza blogul, în special zona CSS.

Aceasta este regiunea despre care vorbesc:

Secțiune personalizată pentru constructorul wordpress css

Ceea ce înseamnă acest lucru este că orice modificare pe care o facem aici va fi eficientă numai pe pagina pe care o edităm. Aceasta este o caracteristică incredibil de interesantă și utilă!

Iată rezultatul final pe care îl vom avea la sfârșitul acestui tutorial. Culoarea de fundal a meniului de navigare care se schimbă în funcție de pagina pe care o vizitați. Ca o opțiune suplimentară veți observa că pictogramele își schimbă culoarea.

Pictogramă care schimbă culoarea divi

Mai întâi voi arăta cum să aplic culoarea de fundal în meniu. Apoi, separat, vă voi arăta cum să se potrivească icoanele sociale.

Dacă nu ați citit încă tutorialul nostru pe prezentarea temei WordPress Divi, Te invit să o faci.

Să începem!

Aplică culorile meniuri

În primul rând, folosesc formatul de antet implicit. Dacă utilizați un alt format, acest tutorial ar trebui să fie în continuare eficient deoarece ID-ul generic al „divs” pe Divi este același pentru toate formatele (# main-header), din câte știu. Dacă aveți probleme cu alte formate.

Formatul antetului Divi

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Trebuie să ne asigurăm că linkurile apar în partea de jos. Culorile pe care le-am ales, pe care le veți găsi pe Coolors.co dacă doriți să le utilizați, sunt pe partea mai întunecată, așa că trebuie să fac textul să fie o culoare deschisă. Am optat pentru culoarea albă.

Personalizarea meniului divi

Folosesc rgba (255,255,255,0.6) care va fi culoarea link-ului și albul închis ca culoare activă a link-ului (pentru efectul vizual dorit)

Apoi accesați pagina pe care doriți să aplicați prima modificare (ar trebui să vedeți link-urile de meniu în loc). Faceți clic pe pictograma „3 linii” și va apărea o casetă de opțiuni.

Wordpress divi builder

Acum adăugați următorul CSS în această casetă:

# Mână-antet {background: #474f61; }

Ar trebui să aveți ceva similar cu acesta, nu uitați să schimbați codul hexagonal în orice culoare doriți:

Setări divi pentru personalizarea culorii

Faceți clic pe Salvați și actualizați Și acest lucru se va aplica pentru meniul principal, totul într-o singură linie de cod.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

Acum trebuie doar să adăugați același cod pentru toate paginile dvs. și să schimbați codul hexagonal de fiecare dată.

Pictograme pentru rețeaua socială (opțional)

Pentru această parte, vom modifica codul pe care l-am făcut deja, apoi vom adăuga unele coduri la nivelul CSS al site-ului și vă voi explica de ce unele CSS ar trebui adăugate în pagini individuale și de ce unele nu ar trebui să fie fie.

Așadar, mai întâi trebuie să vă asigurați că ați configurat legăturile dvs. sociale. Accesați „ Opțiuni Divi> Tema generală Și adăugați adresele URL la paginile dvs. de socializare.

Pictogramă socială divi

Apoi accesați setările din bara de meniu secundară și setați culorile de fundal și text. Aleg „alb” ca culoare a textului, deoarece voi adăuga un fundal rotund colorat la fiecare pictogramă socială pentru a se potrivi cu noua culoare a meniului, astfel încât pictograma să poată apărea.

Personalizarea meniului secundar

Accesați „ Antet și navigare> Elemente antet Și bifați caseta " Afișați pictograme sociale ".

Element de antet Divi wordpress

Vă amintiți cum am procedat la adăugarea CSS pe fiecare pagină? Vom reveni și vom edita ceea ce am scris înainte. Înlocuiți ceea ce aveți acolo cu următorul CSS, sau dacă recunoașteți ce este diferit, puteți adăuga pur și simplu codul suplimentar.

# Mână-antet, # .și top-header-social-icon {background: #474f61; }

Acest cod va permite site-ului nostru nu numai să schimbe culoarea de fundal pentru meniul de pe această pagină, ci și fundalul pictogramelor noastre sociale. Tocmai am adăugat un alt element la mix. Ar trebui să aveți ceva care să arate după cum urmează:

Editor tematic personalizat cod css divi

Este posibil să fie necesar să verificați dacă culorile hexagonale sunt corecte pe fiecare pagină.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

CSS general

Următorul cod va fi în " Opțiune temă> casetă CSS Sau în fișierul de stil al temei copilului.

Opțiuni tematice pentru secțiunea personalizată divi css

.si li {margin-left-# iconițe Top-header-sociale: 5px; } # .si top-header-social-icon {padding: 4px; margin-bottom: 8px; lățime: 30px; înălțime: 30px; border-radius: 50%; line-height: 24px; }

Este posibil să vă întrebați de ce nu este așa în caseta CSS a paginii. Motivul este că această bucată de cod afectează toate elementele vizate, astfel încât este ineficient să puneți exact același cod în mai multe locuri. Numai culoarea de fundal se schimbă pe pagină, dar acest cod nu se schimbă pe pagină. Este doar o bună practică pentru a evita adăugarea de greutate pe site-ul tău.

Asta este totul pentru acest tutorial, sper că vă va permite să personalizați meniurile de pe blogul dvs. WordPress.

Alte tutoriale Divi

Acest articol conține comentarii 3

  1. bonjour,

    Vă mulțumim pentru toate tutorialele dvs.
    Știți dacă putem pune submeniul divi (al doilea nivel sub meniul vertical) în lățime de umplere? care ocupă toată lățimea paginii

  2. bonjour,

    Cum vă schimbați culoarea textului din antetul principal? Având un fundal transparent (pe antetul meu principal), culoarea fontului pe care am ales-o (pe antetul meu principal, care prezintă diferitele mele secțiuni) prin interfața de personalizare divi este neagră. Totuși, aș vrea să fie alb pe UNELE PAGINI deoarece fotografia de mai jos este prea întunecată.

    Cum?

    Va multumesc anticipat

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top