• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Simplenet

Găzduire WordPress

  • Prețuri
    • Găzduire shared
    • Găzduire managed
  • Studii de caz
  • Resurse
    • Tutoriale video
    • Teme WordPress
    • Optimizare WordPress
    • Experți WordPress
    • Pluginuri WordPress
    • Blog Simplenet
  • Suport
    • Baza de cunoștințe
    • Deschide un tichet
  • Login clienți

Cum să ai un meniu colorat ca al lui Cabral

20 ianuarie 2015

Facebook0Tweet0LinkedIn0

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.

screen-options-wordpress-menus

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.

toki-theme-menu-before

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.

adding-classes-wp-menus

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;}

view raw
cabral-css-example
hosted with ❤ by GitHub

Puteți folosi hexcolortool.com pentru a genera coduri de culori.

Pe tema noastră modificările făcute arată cam așa…

toki-theme-menu-color

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!

Similare

Din categoria: Tutoriale

Simplenet

Mai mult decât găzduire

Dezvoltă-ți afacerea online pe o fundație solidă, optimizată pentru WordPress. Testează gratuit 10 zile.

Vezi pachete

Articol anterior: « Cum schimbi fonturile unei teme Genesis
Articolul urmator: Cum aleg pluginurile WordPress »

Reader Interactions

Comentarii

  1. Luci Florescu a zis

    20 ianuarie 2015 la ora 19:32

    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.

    Răspunde
  2. Catalin a zis

    24 februarie 2015 la ora 9:35

    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.

    Răspunde
  3. Farcas Gelu Danut a zis

    14 decembrie 2015 la ora 8:00

    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.

    Răspunde

Lasă un răspuns Anulează răspunsul

Adresa ta de email nu va fi publicată.

Footer

Simplenet

Ajutăm antreprenorii online să aibă site-uri WordPress mai rapide și mai scalabile, să economisească bani și să accelereze dezvoltarea afacerii lor online.

Articole recente

Cum să faci un Landing Page eficient în 2021

9 februarie 2021

7 modalități să obții gratuit sloganul potrivit pentru afacerea ta 

1 februarie 2021

Cele mai bune 10 plugin-uri WordPress pentru gestionarea evenimentelor

27 ianuarie 2021

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la blog și vei primi notificări prin email când vor fi publicate articole noi.

Alătură-te celorlalți 486 de abonați

Copyright © 2021 Simplenet Hosting srl

  • Despre noi
  • Contact
  • Termeni și condiții de utilizare
  • Politica de confidențialitate
  • ANPC
  • SOL