Branding

In acest ghid vom invata cum sa personalizam design-ul platformei: culori (Theme Kit), logo si layout (Layout), si logo email (Misc).

Acceseaza Theme Kit (Culori)

Logheaza-te in WP Admin. In meniul din stanga, mergi la Setari - Enlivy Kit, click pe tab-ul General si scroll in jos pana la sectiunea Theme Kit.

Activeaza si Configureaza Theme Kit

In sectiunea Theme Kit gasesti urmatoarele optiuni:

Activare:

  • Foloseste Sablon - selecteaza un template predefinit ca punct de plecare
  • Custom style is active - toggle pentru a activa customizarea manuala a culorilor

Important: Trebuie activat "Custom style is active" pentru ca modificarile de culoare sa functioneze.

Culori Light Mode:

  • Primary Color
  • Primary Color Darker
  • Secondary Color
  • Secondary Color Darker
  • Button Primary Background Color
  • Button Secondary Background Color

Culori Dark Mode:

  • Dark Mode Primary Color
  • Dark Mode Primary Color Darker
  • Dark Mode Secondary Color
  • Dark Mode Secondary Color Darker
  • Dark Mode Button Primary Background Color
  • Dark Mode Button Secondary Background Color

Important: Dark Mode are setari separate pentru a asigura contrast bun pe fundal intunecat.

Salveaza si Regenereaza Stylesheet

Dupa ce modifici culorile, click pe Salveaza modificarile. In WP Admin va aparea notificarea: "Enlivy Kit Theme: SCSS stylesheet needs to be regenerated - branding colors have been updated but the compiled CSS is missing or outdated". Click pe butonul Regenerate Stylesheet. Schimbarile vor fi acum live pe site.

Important: Fara regenerare, culorile noi NU vor aparea pe site!

Revenire la Default (Optional)

Daca vrei sa revii la culorile default, ai doua optiuni:

  • Optiunea 1: Debifeaza "Custom style is active"
  • Optiunea 2: Selecteaza "Foloseste Sablon" si alege template-ul default

Configurare Logo si Layout

In meniul din stanga, mergi la Setari - Enlivy Kit si click pe tab-ul Layout.

Logo Default (alternativa):

Poti seta logo-ul si din Aspect → Personalizeaza → Identitate site, unde gasesti: Logo, Site Title, Tagline si Site Icon (favicon).



Layout - Logo Custom:

In sectiunea Layout din Setari - Enlivy Kit:

Setare Descriere
Logo Image Fixed Size Bifeaza pentru dimensiune fixa
Logo Image Width Latime (auto / px / % / em)
Logo Image Height Inaltime (auto / px / % / em)
Layout Logo Incarca logo pentru Light Mode (Edit Image / Delete Image)
Layout Logo - Darkmode Incarca logo pentru Dark Mode (Edit Image / Delete Image)

Cum incarci logo:

  • Click pe Editeaza Imaginea
  • Selecteaza imaginea din Media Library sau incarca una noua
  • Click pe Select

Nu uita sa dai scroll pana jos si sa dai click pe Salveaza Modificarile.

Configurare Logo Email

Pentru logo-ul din email-uri, mergi la Setari - Enlivy Kit, click pe tab-ul Diverse, scroll in jos pana la sectiunea Email, incarca logo-ul pentru email-uri si click pe Salveaza modificarile.

Testeaza Email-ul (Optional dar Recomandat)

Pentru a verifica ca logo-ul si design-ul email functioneaza, mergi la Tools (meniul din stanga), click pe Enlivy Kit - Tools, apoi click pe Email Testing → Start si completeaza campurile:

Camp Descriere
Email Address Adresa unde vrei sa primesti testul
Email Title Titlu email test
Email Content Continut email test (poti folosi shortcodes)

Shortcodes disponibile: [name], [first_name], [last_name], [username], [email_address], [site_name], [site_url], [date], [date_time]

Click pe Send Test Email si verifica email-ul primit pentru a vedea logo-ul si design-ul.


Lista de verificare

  • Theme Kit activat
  • Culori Light Mode configurate
  • Culori Dark Mode configurate
  • Stylesheet regenerat dupa modificari
  • Logo incarcat (Light si Dark Mode)
  • Layout personalizat
  • Logo email configurat
  • Email test trimis si verificat
  • Design verificat pe site (Light si Dark Mode)

Cele mai bune practici

  • Asigura-te ca Primary si Secondary Color au contrast suficient pentru lizibilitate, mai ales pentru butoane si link-uri.
  • Dark Mode necesita culori diferite pentru contrast - nu copia direct culorile din Light Mode.
  • Foloseste logo SVG pentru calitate optima: SVG-urile se scaleaza perfect si arata bine pe orice rezolutie si dispozitiv.
  • Seteaza dimensiuni logo consistente: Logo Width si Height ar trebui sa mentina proportiile originale ale logo-ului pentru a evita distorsiuni.
  • Regenereaza stylesheet dupa fiecare modificare culoare - fara regenerare, modificarile nu vor fi vizibile pe site.
  • Salveaza codurile hex ale culorilor intr-un document pentru referinta si consistency viitoare.
  • Daca logo-ul tau e intunecat, creeaza o versiune light pentru Dark Mode pentru contrast bun.