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:
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.
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.
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ă.
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.
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:
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.
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.
Accesați „ Antet și navigare> Elemente antet Și bifați caseta " Afișați pictograme sociale ".
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ă:
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.
.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
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin
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
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
Bună ziua Germain,
Vrei să fie alb pe toate paginile sau doar câteva pagini?