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

Simplenet

WordPress Hosting România

  • Găzduire web
    • Shared
    • WordPress
    • WooCommerce
  • Mentenanță
  • Optimizare
  • Blog
  • Suport
    • Baza de cunoștințe
    • Deschide un tichet
  • Zonă clienți

Cum să ai un meniu colorat ca al lui Cabral

20 ianuarie 2015

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

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!

Din categoria: Tutoriale

Simplenet

Soluții de găzduire WordPress, mentenanță și optimizare performanță.

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

Află mai multe

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ă. Câmpurile obligatorii sunt marcate cu *

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ă personalizezi pagina de start a unui website

23 mai 2022

Care este diferența dintre Pagini și Postări în WordPress?

21 februarie 2022

O alternativă pentru Google Workspace / G Suite legacy free edition

14 februarie 2022

Cat plătește o companie pe un site construit cu WordPress?

7 februarie 2022

10 newslettere pentru programatori care merită citite

31 ianuarie 2022

Servicii

  • Găzduire web
  • Găzduire shared
  • Găzduire WordPress
  • Găzduire WooCommerce
  • Optimizare WordPress
  • Mentenanță WordPress

Info

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

Copyright © 2022 Simplenet Hosting srl