Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

Recenzie CSS Hero: Personalizarea Designului WordPress, Simplificată

Doriți să faceți modificări de design pe care personalizatorul încorporat al WordPress sau chiar constructorii de pagini nu le oferă? Pluginul CSS Hero vă permite să personalizați aceste elemente greu de atins fără a atinge niciun cod.

Folosim adesea CSS Hero noi înșine atunci când avem nevoie să ajustăm elemente specifice de design – cum ar fi efecte de hover, spațiere complexă sau animații subtile – care necesită de obicei CSS personalizat. Este perfect pentru acele ajustări vizuale care par simple, dar care necesită de obicei cunoștințe de codare.

În această recenzie CSS Hero, vă vom arăta cum să folosiți CSS Hero pentru a personaliza cu ușurință aspectul site-ului dvs. Fie că ajustați stilurile butoanelor sau modificați layout-uri complexe, acest instrument face personalizarea avansată accesibilă tuturor.

Recenzie CSS Hero, instrument de design web pentru WordPress

Iată o prezentare generală a subiectelor pe care le vom aborda:

Ce este CSS Hero?

CSS Hero este un plugin premium WordPress care vă permite să vă creați propria temă WordPress fără a scrie o singură linie de cod (nu este necesar HTML sau CSS).

Puteți anula modificările la designul WordPress rapid, făcându-l extrem de util pentru începători. Toate modificările sunt salvate ca o foaie de stil suplimentară, astfel încât să puteți actualiza tema WordPress fără să vă faceți griji că veți pierde modificările.

Veți găsi CSS Hero la fel de bun dacă sunteți designer sau dezvoltator. Funcționează bine cu toate temele WordPress populare și framework-urile. Puteți schimba rapid o temă sau o temă copil și o puteți exporta pe site-ul unui client.

Cum am folosit și testat CSS Hero

De fapt, folosim deja CSS Hero în multe dintre tutorialele noastre WordPress. A devenit soluția noastră preferată atunci când cititorii au nevoie să facă ajustări specifice de design fără codare.

Iată câteva exemple:

Pentru această recenzie, am făcut un pas suplimentar și am instalat CSS Hero pe un site de test nou. Am parcurs fiecare funcționalitate și am aplicat diverse personalizări. Acest test amănunțit ne ajută să identificăm orice capacități noi sau limitări pe care le-am fi putut rata în utilizarea noastră zilnică.

De ce să ai încredere în WPBeginner? 📣

Urmărim instrumentele de personalizare WordPress din 2009, testând fiecare soluție majoră care intră pe piață. Cu atâtea pluginuri disponibile, înțelegem cât de copleșitor poate fi să alegi pe cel potrivit pentru site-ul tău.

Recomandările noastre provin din testări reale și experiență practică. Cel mai important, ne actualizăm constant cunoștințele pe măsură ce WordPress evoluează. Când instrumente precum CSS Hero lansează noi funcționalități sau actualizări, le vom evalua și vă vom împărtăși constatările noastre.

Pentru mai multe informații, puteți consulta ghidurile editoriale.

Este CSS Hero un Page Builder WordPress?

Nu – CSS Hero și constructori de pagini au scopuri diferite. CSS Hero este conceput special pentru a face ajustări de stil la elementele temei existente, în timp ce constructorii de pagini sunt pentru crearea de layout-uri de pagină complet noi.

Gândiți-vă la CSS Hero ca la un instrument de personalizare a designului. Vă permite să ajustați schemele de culori, spațierea, tipografia și alte elemente vizuale fără a atinge codul, dar nu vă va ajuta să construiți pagini noi de la zero.

Pagina de destinație CSS Hero

Pentru crearea de layout-uri personalizate, pagini de destinație sau pagini de vânzări, veți dori un constructor de pagini adecvat, cum ar fi SeedProd. Este soluția noastră recomandată care vă permite să construiți orice tip de pagină folosind blocuri drag-and-drop, șabloane predefinite și controale de design puternice.

Puteți consulta recenzia noastră despre SeedProd pentru mai multe informații.

Pluginul de construire a paginilor SeedProd pentru WordPress

Cum să folosești CSS Hero pentru a-ți personaliza tema WordPress

Mai întâi, trebuie să instalați și să activați pluginul CSS Hero. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Deoarece CSS Hero este un plugin premium pentru WordPress, trebuie să plătiți 29 USD pentru un singur site. Acestea fiind spuse, credem că prețul merită cu siguranță investiția, având în vedere timpul și bătăile de cap pe care vi le va economisi.

Puteți folosi codul CSS Hero coupon WPBEGINNER pentru a obține o reducere specială de 34%. Dacă achiziționați planul PRO, același cod vă va oferi o reducere de 40%.

La activare, veți fi redirecționat pentru a obține cheia de licență CSS Hero. Urmați instrucțiunile de pe ecran și veți fi redirecționat înapoi pe site-ul dvs. în câteva clicuri.

CSS Hero își propune să vă ofere o interfață WYSIWYG (ceea ce vedeți este ceea ce obțineți) pentru editarea temei dumneavoastră.

Pur și simplu vizitați site-ul dvs. WordPress în timp ce sunteți conectat și veți observa butonul CSS Hero în bara de administrare WordPress.

Butonul CSS Hero în bara de instrumente de administrare WordPress

Făcând clic pe buton, site-ul dvs. va fi convertit într-o previzualizare live.

Veți putea acum să vedeți editorul CSS Hero. Acesta are o bară de instrumente sus și jos, o coloană stângă și o previzualizare live a site-ului dvs.

Interfața utilizator CSS Hero

Apoi, duceți mouse-ul peste un element pe care doriți să îl editați, iar CSS Hero îl va evidenția pentru a indica unde vă aflați.

Făcând clic pe el, veți selecta acel element și veți vedea proprietățile sale în coloana din stânga.

Proprietăți pe care le poți edita pentru un element

Acestea vor include proprietăți CSS comune pentru elementul selectat, cum ar fi fundalul, tipografia, marginile, spațierea și multe altele.

Poți face clic pe orice element pentru a-l extinde și apoi edita proprietățile CSS folosind o interfață simplă de utilizator.

Proprietăți de fundal

Pe măsură ce faceți modificări, CSS-ul personalizat apare magic mai jos.

Dacă înveți CSS, vei găsi util să vezi cum sunt aplicate diferite modificări CSS, cu rezultatul în previzualizarea live.

Previzualizare cod CSS

Aveți probleme în a găsi imagini fără drepturi de autor pentru site-ul dvs. web?

CSS Hero are, de asemenea, o integrare Unsplash încorporată, permițându-vă să căutați și să utilizați fotografii frumoase în designul site-ului dvs.

Integrare Unsplash

CSS Hero vine, de asemenea, cu câteva fragmente gata făcute pe care le puteți aplica diferitelor elemente de pe site-ul dvs. web.

Comutați la fila „Snippets” din coloana din stânga și veți vedea o mulțime de elemente comune listate acolo.

Folosiți fragmente

Poți face clic pentru a selecta un element, iar CSS Hero îți va arăta diferite variații de stil.

Apăsați pe butonul „Set Params” pentru a edita un stil care vă place, apoi apăsați pe butonul „Apply” pentru a-l adăuga la tema dvs.

Aplică un stil de fragment

Un alt lucru grozav pe care îl poate face CSS Hero este să personalizeze un element specific pe postări individuale sau anumite tipuri de șabloane. Pentru a face acest lucru, navigați la setarea „Mod selecție” din partea stângă sus a ecranului. Aceasta determină cât de larg se vor aplica personalizările dumneavoastră:

  • Normal: Modificările dvs. afectează fiecare instanță a acelui element pe întregul site
  • Doar acesta: Modificările se aplică doar elementului specific pe care îl editați
  • Tipuri de șabloane/arhive: Modificările se aplică tuturor paginilor care utilizează acel șablon (cum ar fi paginile de categorii)

Această flexibilitate îți permite să faci modificări de design țintite exact acolo unde ai nevoie, fără a afecta alte părți ale site-ului tău.

Trecerea la modul de selecție a categoriei în CSS Hero

Pe măsură ce faceți modificări pe site-ul dvs. web, CSS Hero va salva automat acele modificări, dar nu le va publica.

Pentru a aplica aceste modificări site-ului tău live, apasă butonul „Salvează și Publică” din colțul din dreapta jos al ecranului.

Salvează și publică modificările

Cum să anulezi modificările în CSS Hero

Una dintre cele mai bune caracteristici ale CSS Hero este capacitatea de a anula orice modificări pe care le faci oricând.

CSS Hero păstrează un istoric al tuturor modificărilor pe care le faci la tema ta. Pur și simplu apasă pe butonul de istoric din bara de instrumente CSS Hero pentru a vedea lista modificărilor. Acest buton arată ca un mic ceas.

Revizii istorice

Puteți face clic pe o dată și oră pentru a vedea cum arăta site-ul dvs. la acel moment. Dacă doriți să reveniți la acea stare, salvați sau reluați editarea din acel punct.

Acest lucru nu înseamnă că modificările pe care le-ați făcut după acel moment vor dispărea. Ele vor fi în continuare stocate; puteți reveni și la acel moment. Nu se poate mai simplu de atât.

Dar ce se întâmplă dacă doriți doar să anulați modificările pe care le-ați făcut la un anumit element?

În acest caz, nu trebuie să utilizați instrumentul de istoric. Faceți clic pe elementul pe care doriți să îl reveniți la o versiune anterioară și apoi faceți clic pe butonul „Reset”.

Resetează modificările pentru un element

Acest lucru va readuce elementul la setările implicite definite de tema dvs. WordPress.

Personalizarea site-ului dvs. pentru dispozitive mobile cu CSS Hero

Cel mai provocator aspect al designului web este compatibilitatea cu dispozitivele. Trebuie să vă asigurați că site-ul dvs. arată la fel de impresionant pe toate dispozitivele și dimensiunile ecranului.

Designerii web folosesc diverse instrumente pentru a testa compatibilitatea cu browserele și dispozitivele. Din fericire pentru dvs., CSS Hero vine cu un instrument de previzualizare încorporat.

Selectați un dispozitiv mobil, tabletă sau desktop în bara de instrumente de sus. Zona de previzualizare se va schimba pentru acel dispozitiv. Puteți, de asemenea, comuta între modurile „Editare” și „Navigare” pentru a ascunde alte bare de instrumente.

Previzualizare pe diferite dispozitive

Trecerea la modul „Editare” vă va permite să vă editați site-ul în timp ce îl previzualizați pentru dispozitive mobile. Acest instrument este util pentru ajustarea designului temei dvs. pentru mobil și tabletă.

Este CSS Hero compatibil cu toate temele WordPress?

Site-ul oficial CSS Hero are o listă în continuă creștere de teme compatibile. Această listă include multe dintre cele mai bune teme gratuite de WordPress.

De asemenea, are cele mai populare teme premium de la magazine precum Divi, CSSIgniter, Themify, StudioPress, Astra și altele.

Ce se întâmplă cu temele care nu sunt pe lista de compatibilitate a temelor?

CSS Hero vine cu o funcționalitate numită Rocket Mode Auto-detection. Dacă utilizați o temă care nu este inclusă în lista de compatibilitate a temelor, atunci CSS Hero va începe automat să utilizeze Rocket Mode.

Modul Rocket încearcă să ghicească selectorii CSS din tema ta. Acest lucru funcționează perfect de cele mai multe ori. Dacă tema ta respectă standardele de codare WordPress, atunci vei putea edita aproape totul.

De asemenea, puteți contacta dezvoltatorul temei dvs. și îi puteți ruga să ofere compatibilitate cu CSS Hero.

Ce pluginuri sunt compatibile cu CSS Hero?

CSS Hero este testat în mod regulat cu pluginuri WordPress de top pentru compatibilitate.

Acestea includ pluginuri de formulare de contact, constructori de pagini populari, WooCommerce și altele.

Dacă utilizați un plugin WordPress care generează o ieșire care nu este editabilă de CSS Hero, atunci puteți cere autorului plugin-ului să remedieze acest lucru. Nu trebuie să facă prea multe pentru a oferi compatibilitate cu CSS Hero.

Pentru mai multe detalii, consultați ghidul nostru despre cum să solicitați corect suport WordPress și să îl obțineți.

Sperăm că ați găsit utilă recenzia noastră despre CSS Hero. De asemenea, ați putea dori să vedeți ghidul nostru complet despre îmbunătățirea vitezei și performanței WordPress pentru începători și comparația noastră a celor mai buni constructori de teme WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

49 CommentsLeave a Reply

  1. Acest review CSS Hero este incredibil de cuprinzător și util! Apreciez în mod deosebit explicația detaliată a modului în care diferă de constructorii de pagini precum SeedProd. Ca cineva care s-a luptat cu personalizarea CSS în trecut, capacitatea de a face modificări fără codare și de a le anula ușor este un factor de schimbare.
    Integrarea încorporată Unsplash și previzualizarea compatibilității cu dispozitivele sunt caracteristici fantastice pe care aș dori să le încerc.

    Această recenzie m-a convins să încerc CSS Hero.
    Vă mulțumesc pentru o recenzie atât de informativă și bine structurată!

  2. Aceasta este o unealtă foarte utilă. Uneori, când am avut nevoie să modific ceva pe site-ul meu, mă chinuiam să folosesc instrumentul de inspectare al Firefox sau diverse instrumente de dezvoltare de la alte browsere pentru a găsi clasa CSS pe care trebuia să o ajustez, ceea ce dura adesea mult timp. Apoi, a trebuit să mă bazez pe editarea CSS asistată de AI, deoarece eu însumi nu înțeleg CSS. Acest lucru schimbă complet jocul pentru astfel de modificări și simplifică enorm totul. O unealtă grozavă!

  3. Mulțumesc pentru postare. Ați făcut-o foarte simplă cu acest plugin pentru a personaliza site-ul Wordpress. Voi încerca cu siguranță CSS Hero cândva.

  4. Am avut 3 site-uri web timp de peste 10 ani pe WordPress și nu am atins niciodată CSS. Am încercat, deoarece trebuia să repar ceva ce nu puteam face în constructorul de teme, dar asta nu s-a terminat niciodată bine. Toate tutorialele erau super complexe și nu ajutau cu adevărat persoanele care nu sunt familiarizate cu codarea.

    Bine de știut că există alternative acum care pot ajuta persoanele mai puțin pricepute la tehnologie să facă ceea ce vor să facă, fără a învăța noi abilități doar pentru a repara câteva lucruri mici.

  5. Am aproape zece ani de experiență cu WordPress și sunt oarecum cunoscător în CSS. Nu pot să-l scriu, dar îl pot implementa cu ajutor.

    Am achiziționat plugin-ul CSS Hero, deoarece afirmă că va funcționa cu plugin-ul LearnPress LMS. Cu toate acestea, după ce am încercat, am constatat că plugin-ul nu funcționează cu LMS.

    Am vorbit cu dezvoltatorul meu de teme foarte experimentat (WPExplorer) și el a declarat, pe scurt, că pluginul LearnPress este scris complex și oarecum prost, ceea ce va face ca pluginul CSS Hero să nu funcționeze corect.

    CSS Hero oferă o garanție de returnare a banilor în 30 de zile, însă după ce am contactat compania de două ori și au trecut două săptămâni, încă nu am primit niciun răspuns de la nimeni de la CSS Hero.

    Doar aveți grijă la garanție, deoarece pare că va trebui să încerc să contactez compania mea de card de credit și să încerc să anulez.

    • Vă mulțumim pentru că ați împărtășit experiența dvs., doar pentru a fi în siguranță, vă rugăm să vă asigurați că orice mesaj pe care l-ar fi putut trimite nu este prins în folderul dvs. de spam.

      Admin

  6. Salut,

    Știți dacă CSS Hero funcționează cu pluginul Simple Membership? Mulțumesc mult

    • Ar trebui să verificați cu CSS Hero pentru orice întrebări despre conflictele curente.

      Admin

  7. Tocmai am lansat un site web nou și am fost extrem de frustrat de incapacitatea de a personaliza temele prea mult. Multe dintre controale sunt blocate în spatele plății pentru o temă, dar nici măcar nu sunt sigur dacă îmi place tema suficient pentru a risca să plătesc pentru ea, deoarece nu pot edita totul suficient. CSS Hero îmi va permite să ocolesc cumpărarea temelor și să editez versiunile gratuite?

    • Ar depinde de personalizările pe care le căutați, CSS Hero vă va ajuta cu siguranță să vă personalizați site-ul fără a avea nevoie de o temă plătită. Ați putea dori să aruncați o privire la pagina lor de demonstrație de pe site-ul lor pentru a vedea ce poate face plugin-ul.

      Admin

  8. Uimitor cât de bun este acest lucru în recenzie. Poate are legătură cu toate linkurile de afiliere pe care le-ai presărat pe parcurs pentru a face bani din recomandări?

    Nu spun că pluginul nu este bun, dar acest tip de recenzii sunt greu de luat în serios. Dacă ar fi fost cu adevărat bun, ați putea spune asta, dar a spune că este bun pe aceeași pagină cu încercarea de a face bani din vânzarea lui îl face să pară o reclamă editorială plătită foarte mare pentru acest plugin.

  9. Sunt puțin confuz de ce ați folosi CSS Hero cu un constructor de teme precum Elementor sau Divi, în afară de a vedea codul folosit pentru un anumit element. Îmi scapă ceva?

  10. Salut, mulțumesc că m-ai lăsat să fiu primul care pune întrebări. Încă am probleme în a le afișa fără caseta de imagine pe pagina principală, dar pe pagina produsului am reușit să elimin imaginea, apoi să micșorez placeholder-ul în afara ecranului spre stânga. Nu s-a micșorat chiar, dar a permis textului să înceapă dintr-un punct de plecare mai respectabil.

    Aș dori în continuare să vorbesc cu cineva care are suficient timp liber pentru a-mi permite să angajez pe bază de sarcini. Aș avea nevoie de ajutor pentru a crea o bară de căutare mai bună cu date de la și până la, și apoi mult mai mult de lucru și aș avea nevoie de un partener pentru a împărți sarcinile și a lucra împreună.

  11. Bună, am găsit wpbeginner foarte util pentru începători, așa cum sunt și eu.
    Unul dintre subsite-urile din multisite-ul meu a instalat tema Affinity, pe care o iubim foarte mult.
    Dar când am adăugat pluginul Buddypress, afișarea administratorilor și moderatorilor de grupuri Buddypress ocupă mult spațiu, mai ales pe mobil.

    Putem modifica aspectul BP sub Affinity folosind CSS Hero?
    Mulțumesc,
    Sam

  12. Salut,

    este acest plugin compatibil cu Slider revolution (5.4) și Visual Composer?
    Ar putea fi o modalitate mai rapidă de a lucra cu acesta – decât cu celelalte… în unele cazuri.

    Îmi face plăcere să aud de la tine!
    Erik

  13. Bună ziua
    Am achiziționat acest plugin, dar nu îl pot folosi: CSS Hero nu este activ
    însă nu găsesc modalitatea de activare...

  14. Salut,
    Foarte frumos rezumatul și pluginul în sine pare foarte util. Am descărcat CSS Hero, dar nu reușesc să-l pornesc pe computerul meu. Acest plugin este destinat doar pentru Mac?

    Cu stimă,

    Enn

  15. Am descoperit recent WPB. Deși sunt un administrator de site-uri WP de câțiva ani, constat că învăț ceva nou de fiecare dată când văd unul dintre tutorialele dvs. Mulțumesc. Apreciez eforturile dvs.

  16. Acest plugin va elimina meniurile pe o temă Pavillioin, una dintre temele standard Wordpress? Văd cum este oarecum asemănător cu Firebug, în sensul că puteți identifica partea de cod pe care doriți să o schimbați, dar acest plugin vă va permite de fapt să o schimbați fără să știți cod, corect? Dar va elimina meniul în loc să schimbe culoarea sau locația sau orice altceva.

    Mulțumesc

  17. Salut,

    Am cumpărat o temă WordPress de pe Theme Forest și am încărcat tema în builderul meu WordPress. Site-ul este găzduit de InMotion Hosting. Întrebarea mea este, din moment ce folosesc builderul de site-uri WordPress pentru a lucra la site-ul meu, după ce instalez pluginul pentru CSS Hero, va apărea acel buton în partea dreaptă sus a site-ului meu pentru a putea edita conținutul când folosesc builderul web WordPress? sau trebuie să-mi găzduiesc site-ul pentru a avea acea capacitate? nu cred că contează dacă altcineva îmi găzduiește site-ul, corect? atâta timp cât folosesc builderul WordPress? sunt puțin ignorant în privința asta și învăț pe parcurs. Mulțumesc

    • Salut Anthony,

      Dacă tema dvs. respectă cele mai bune practici standard de codare WordPress, atunci o veți putea folosi cu CSS Hero fără probleme. Dacă nu, vă rugăm să contactați suportul temei dvs.

      Admin

  18. Tocmai m-am întors pe un site WordPress pentru a face o actualizare, dar pluginul CSSHERO nu funcționează, deși este vizibil pe pagină. Nu se întâmplă nimic când trec cu mouse-ul peste conținut, chiar dacă CSSHero pare să fie activ. Pluginul este activ (V 2.1), dar am observat că versiunea curentă este 2.3, dar nu există nicio notificare de actualizare?

  19. Nu este același lucru cu Chrome Dev Tools…. Nu am găsit nicio diferență considerabilă între CDT și CSS Hero….

    Apropo, codul de cupon nu funcționează nici mie ???

  20. Am tema gratuită Yuuta. În prezent, am nevoie de acest lucru pentru a putea modifica dimensiunea logo-ului meu pe site (folosirea jetpack este teribilă, inserează logo-ul, dar este mic și nu pot modifica dimensiunea sau nimic) va funcționa pentru mine?

  21. Am urmat linkul și am ajuns pe o pagină cu „Planuri de prețuri”… Un mare nu-nu pentru mine! Înțeleg că acesta este cel mai eficient mod pentru orice afacere de a face bani, dar nu am de gând să mă abonez la niciun „plan” – în afară de găzduirea site-ului meu (unde am încetat să mai fiu un „client fidel” atunci când serviciul și timpii de încărcare nu sunt corecți).

    • Nu există abonament automat – poți reînnoi în fiecare an dacă dorești actualizări ale pluginului – dar produsul VA continua să funcționeze acolo unde a fost instalat – fără a plăti în fiecare an.

  22. Am achiziționat pluginul dvs., primul site pe care l-am încercat pe tema Wordpress Stella Magazine... nu a funcționat.
    Sunt dezamăgit
    Ce putem face?

  23. Dacă schimbați proprietățile, să zicem, ale h2, le puteți schimba doar pentru o singură instanță sau o singură pagină, sau puteți schimba doar toate h2-urile de pe site?

  24. Este gratuit? dacă nu, există vreun alt editor vizual CSS ca acesta, care este gratuit?

Lasă un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.