Dacă ați vizitat vreodată blogul lui Cabral, probabil ați observat meniul colorat din dreapta sus. Acest lucru se poate face relativ ușor și pe site-ul vostru, depinde insă de tema WordPress folosită, în anumite cazuri este nevoie de mai multe modificări pe partea de CSS ca să arate perfect.
Primul pas este activarea claselor CSS pentru elementele meniului.
În interfața de administrare WordPress, la Aspect > Meniuri se accesează „Opțiuni ecran” din dreapta sus și se bifează Clase CSS. Dacă ai WordPress-ul în engleză, e Appearance > Menus, Screen Options > CSS Classes.
Următorul pas este să adăugați clase CSS elementelor din meniu. În exemplul de mai jos am folosit cbr-meniu-1, cbr-meniu-2 si cbr-meniu-3 pentru cele 3 elemente ale meniului.
Se poate folosi orice nume pentru clasele respective insă aveți in vedere să nu folosiți cuvinte generale care ar mai putea fi definite ca și clase CSS și în altă parte în cadrul fișierului style.css. Practica recomandată este să aveți un prefix personalizat pentru a preveni conflictele, eu am folosit cbr de la Cabral.
Ultimul pas constă în editarea fișierului style.css al temei (nu folosiți editorul WP, descărcați fișierul prin FTP, păstrați o versiune originală de backup și apoi editați si încărcați din nou pe site).
La finalul fișierului adăugați următoarele linii de cod:
| .cbr-meniu-1 {background-color: #85ae52;} | |
| .cbr-meniu-2 {background-color: #84d48d;} | |
| .cbr-meniu-3 {background-color: #665a98;} |
Puteți folosi hexcolortool.com pentru a genera coduri de culori.
Pe tema noastră modificările făcute arată cam așa…
Nu arată perfect însă cu mici modificări în style.css se pot obține rezultate mai bune.
Ideea nu este de a face un meniu colorat de dragul culorilor, utilitatea reală este că puteți folosi ușor și rapid un accent de culoare în meniu pentru a scoate în evidență un anumit element.
În funcție de profilul site-ului, puteți evidenția în meniu un link către pagina de abonare, un landing page pentru cumpărarea unui serviciu/produs, o pagină cu promoții (în cazul site-urilor de afiliere), etc…
Această evidențiere în meniu ar putea crește rata de click și îmbunătăți rata de conversie.
Succes!
Este o chestie interesanta, ma gandeam intr-un timp sa incerc asa ceva si pe blogul meu, chiar dupa ce am vazut si eu noua tema a lui Cabral. Dar dupa am spus ca stric intreaga cromatica a blogului, adica albul si negrul. Insa acum sunt pus putin pe ganduri, daca sunt astfel colorate poate vor fi si mai utilizate.
Interesanta chestie, pana nici eu care de ani de zile umblu cu wordpress, n-am „gandacit” pe acolo.. Observ ca pot spune ca nu stiu WordPress in totalitate.
Sper sa va placa, am folosit temele Genesis child pe care ni le-ati pus la dispozitie si am facut ce puteti vedea in site-urile aflate in contul de hosting Simplenet care-mi apartine: http://www.petrecericopii.eu, http://www.certificat-energetic.net si altele.
Fiind plin de linkuri, poate ar fi bine sa stergeti acest comentariu.