A face site-ul dvs. să iasă în evidență din mulțime este uneori mai ușor de spus decât de făcut. Din fericire, vă puteți implica în bricolaj, adăugând accente creative de personalizare care vă vor asigura acest lucru blogul tău iese în evidență de ceilalți.

În acest tutorial, vă voi arăta cum să utilizați generatorul Divi pentru a personaliza blogul tău, și î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

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.

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

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 e tot pentru acest tutorial, sper că vă va permite să personalizați meniurile pe dvs 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”]DESCĂRCĂ TEMA DIVI [/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”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Alte tutoriale Divi