Kako promijeniti boju izbornika između stranica Divi

još Blair Jersyer | Divi, WordPress Tutorial

Istaknuti svoju web stranicu iz gomile ponekad je lakše reći nego učiniti. Srećom, možete se uključiti u DIY dodavanjem kreativnih dodataka prilagodbi koji će to osigurati blog ističe se od ostalih.

U ovom vodiču pokazat ću vam kako koristiti Divi builder za prilagodbu blog, a posebno CSS područje.

Ovo je regija o kojoj govorim:

Prilagođeni odjeljak za graditelj WordPress CSS

To znači da će sve promjene koje ovdje napravimo biti učinkovite samo na stranici koju uređujemo. To je nevjerojatno zanimljiva i korisna značajka!

Evo konačnog rezultata koji ćemo imati na kraju ovog vodiča. Boja pozadine navigacijskog izbornika koja se mijenja ovisno o stranici koju posjećujete. Kao dodatnu opciju primijetit ćete da i ikone također mijenjaju boju.

Ikona koja mijenja boju divi

Prvo ću pokazati kako primijeniti boju pozadine na izborniku. Tada ću vam odvojeno pokazati kako prilagoditi socijalne ikone.

Ako još niste pročitali naš vodič prezentacija teme WordPress Divi, Pozivam vas da to učinite.

Krenimo!

Nanesite boje na izbornike

Prvo, koristim zadani format zaglavlja. Ako koristite drugi format, ovaj bi vodič i dalje trebao biti učinkovit, jer je generički ID "div-ova" na Diviu jednak za sve formate (# glavno zaglavlje), koliko znam. Ako imate problema s drugim formatima.

Divi format zaglavlja

Moramo biti sigurni da se veze pojavljuju na dnu. Boje koje sam odabrao, a koje ćete pronaći na Coolors.co ako ih želite koristiti, na tamnijoj su strani, tako da moram napraviti tekstualnu poveznicu svijetle boje. Odlučio sam se za bijelu boju.

Personalizacija divi izbornika

Koristim rgba (255,255,255,0.6) koji će biti boja veze i tamno bijela kao aktivna boja veze (za željeni vizualni efekt)

Zatim idite na stranicu na kojoj želite primijeniti prvu promjenu (trebali biste vidjeti veze izbornika staviti na mjesto). Kliknite ikonu "3 line" i pojavit će se okvir s opcijama.

Wordpress divi graditelj

U ovaj okvir dodajte sljedeći CSS:

# glavno zaglavlje {pozadina: #474f61; }

Trebali biste imati nešto slično ovome, ne zaboravite promijeniti hex kod u bilo koju boju koju želite:

Divi postavke za prilagodbu boja

Kliknite na Spremite i ažurirajte A to će se odnositi na glavni izbornik, sve u jednom retku koda.

Sada samo trebate dodati isti kod za sve svoje stranice i svaki put mijenjati hex kod.

Ikone na društvenim mrežama (neobavezno)

U ovom ćemo dijelu izmijeniti kôd koji smo već napravili, a zatim dodati neki kôd na razini CSS-a web lokacije, a ja ću objasniti zašto neki CSS treba dodati na pojedinačnim stranicama i zašto neki ne bi trebao biti biti.

Dakle, prvo morate biti sigurni da ste postavili svoje društvene veze. Idi na " Opcije Divi> Općenita tema I dodajte svoje URL-ove na stranice svojih društvenih medija.

Ikona društvenog diva

Zatim idite na svoje postavke na sekundarnoj traci izbornika i postavite boje pozadine i teksta. Odabirem 'bijelu' kao boju teksta, jer ću dodati ikonu u obliku okrugle boje na svaku društvenu ikonu kako bi se podudarala s novom bojom izbornika, kako bi se ikona mogla pojaviti.

Prilagođavanje sekundarnog izbornika

Idi na " Zaglavlje i navigacija> Elementi zaglavlja I označite okvir " Pokažite društvene ikone ".

Divi element zaglavlja wordpress

Sjećate li se kako smo dodavali CSS na svaku stranicu? Vratit ćemo se i urediti ono što smo prije napisali. Zamijenite ono što imate tamo sljedećim CSS-om ili ako prepoznate što je drugačije, jednostavno možete dodati dodatni kôd.

# glavno zaglavlje, # vršno zaglavlje .et-društveno-ikona a {pozadina: #474f61; }

Ovaj će kôd omogućiti našoj web stranici da promijeni ne samo boju pozadine izbornika na ovoj stranici, već i pozadinu naših društvenih ikona. Upravo smo dodali još jedan element u mješavinu. Trebali biste imati nešto što izgleda ovako:

Prilagođeni css kod divi uređivač tema

Možda ćete morati provjeriti jesu li šesterokutne boje ispravne na svakoj stranici.

Opći CSS

Sljedeći će kôd biti u vašem " Opcija teme> CSS okvir Ili u datoteci stila dječje teme.

Prilagođeni odjeljak divi css opcije teme

# top-header.and-društvene ikone li {margin-left: 5px; } # top-header .et-društveno-ikona a {padding: 4px; margina-dno: 8px; širina: 30px; visina: 30px; granični polumjer: 50%; visina linije: 24px; }

Možda se pitate zašto to nije tako u CSS polju stranice. Razlog je taj što ovaj određeni dio koda utječe na sve ciljane elemente, tako da je neučinkovito postavljati isti kod na više mjesta. Mijenja se samo boja pozadine po stranici, ali taj se kôd ne mijenja po stranici. To je samo najbolja praksa da se izbjegne dodavanje težine na web mjestu.

To je sve za ovaj vodič, nadam se da će vam omogućiti da prilagodite izbornike na svom 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”]PREUZMI DIVI TEMU [/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”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]

Ostali Divi tutoriali

3 Komentari

  1. Cocos
    Cocos 8. siječnja 2020. u 22:13

    Pozdrav,

    Hvala vam na svim vašim udžbenicima.
    Znate li možemo li podmenu divi (druga razina ispod padajućeg izbornika) staviti u širinu punjenja? koja zauzima punu širinu stranice

    odgovor
  2. Germain Jung
    Germain Jung 10. listopada 2018. u 10 h 20 min

    Pozdrav,

    Kako idete na promjenu boje teksta u glavnom zaglavlju? Imajući prozirnu pozadinu (na glavnom zaglavlju), boja fonta koju sam odabrala (na glavnom zaglavlju, koje predstavlja moje različite odjeljke) putem sučelja za prilagodbu divi-a je crna. Međutim, volio bih da na nekim stranicama bude bijelo jer je donja fotografija pretamna.

    Kako?

    Hvala vam unaprijed

    odgovor
    • Thierry Bertrand
      Thierry Bertrand 10. listopada 2018. u 16 h 32 min

      Pozdrav Germain,

      Želite li da bude bijelo na svim stranicama ili samo na nekoliko stranica?

      odgovor

Objavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.