CSS Hero Review: Personalizarea designului WordPress simplificat

Dacă sunteți unul dintre numeroșii începători care doresc să vă personalizeze designul site-ului WordPress fără să atingeți CSS, atunci aveți noroc. Pluginul CSS Hero pentru WordPress vă permite să personalizați designul fără a atinge o singură linie de cod. În această recenzie actualizată CSS Hero, vă vom arăta cum să folosiți CSS Hero pentru a vă personaliza site-ul, și de ce credem că este unul dintre pluginurile pe care trebuie să le încerce fiecare începător WordPress.


CSS Hero review

Recenzia noastră pentru eroi CSS

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

Aveți capacitatea de a anula modificări, care este extrem de util pentru începători. Toate modificările sunt salvate ca o foaie de stil suplimentară, ceea ce înseamnă că vă puteți actualiza tema WordPress fără să vă faceți griji cu privire la pierderea modificărilor.

Dacă sunteți designer sau dezvoltator, veți găsi CSS Hero la fel de bun. Funcționează bine cu toate temele și cadrele populare WordPress. Puteți face rapid modificări la o temă pentru copii, apoi să o exportați pentru a fi utilizată pe site-ul web al unui client.

CSS Hero vă poate economisi mult timp și frustrare când vine vorba de personalizarea designului.

De obicei, suntem foarte sceptici în ceea ce privește pluginurile de personalizare a designului punct-și-clic, datorită dimensiunii lor umflate. Cu toate acestea, CSS Hero ne-a impresionat cu adevărat de la început.

Dacă ar fi să ne ceri o recenzie onestă a CSS Hero, atunci îi vom oferi un 5 din 5 stele.

Cum să utilizați CSS Hero pentru a vă 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.

Este un plugin WordPress premium, cu prețuri începând de la 29 USD pentru un singur site (merită total investiția, luând în considerare timpul și dificultățile pe care le va economisi).

Folosiți codul cupon CSS Hero: WPBeginner pentru a beneficia de o reducere specială de 34% reducere. Dacă cumpărați planul PRO, atunci același cod vă va beneficia de o reducere de 40%.

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

Scopul CSS Hero este de a vă oferi o interfață WYSIWG (ceea ce vedeți este ceea ce primiți) pentru editarea temei. Pur și simplu accesați site-ul dvs. web când v-ați autentificat și veți observa butonul Hero CSS din bara de administrare WordPress.

Butonul CSS Hero

Dacă faceți clic pe buton, convertiți site-ul dvs. în previzualizare live. Acum veți putea vedea bara de instrumente CSS Hero.

Editor CSS Hero live

În continuare, trebuie doar să faceți clic pe orice element de pe site-ul dvs. Web, iar CSS Hero vă va arăta proprietățile CSS utilizate de tema dvs. pentru acel anumit element.

Proprietățile elementului

Acestea vor include proprietăți CSS comune pentru elementul selectat, cum ar fi fundalul, tipografia, marginile, distanțarea și multe altele. Puteți face clic pe orice element pentru a-l extinde și apoi modifica proprietățile CSS folosind o interfață simplă de utilizator.

Editarea proprietăților

Pe măsură ce efectuați modificări, veți observa că CSS-ul personalizat apare în mod magic mai jos. Dacă învățați CSS, atunci veți fi util să vedeți cum se aplică diferite modificări CSS cu rezultatul în previzualizarea live.

Editarea stilurilor pentru diferite elemente folosind CSS Hero

Aveți probleme pentru a găsi imagini gratuite pentru site-ul dvs. web? CSS Hero vine cu integrarea Unsplash integrată care vă permite să răsfoiți, să căutați și să utilizați fotografii frumoase în designul site-ului dvs..

Utilizarea de imagini gratuite cu drepturi de autor în designul site-ului dvs. web

CSS Hero vine și cu câteva fragmente pregătite pe care le puteți aplica diferitelor elemente de pe site-ul dvs. web. Pur și simplu treceți la fila Snippets din coloana din stânga.

Fragmente gata de erou CSS

Pe măsură ce aduceți modificări site-ului dvs. web, CSS Hero va memora aceste modificări, dar nu le va publica. Pentru a aplica aceste modificări pe site-ul dvs. live, trebuie să faceți clic pe butonul Salvare și publicare.

Salvați și publicați modificările

Cum să anulați schimbările în CSS Hero

Una dintre cele mai bune caracteristici ale CSS Hero este capacitatea de a anula orice modificare pe care o faceți în orice moment. CSS Hero păstrează un istoric al tuturor modificărilor pe care le aduceți temei. Pur și simplu faceți clic pe butonul istoric din bara de instrumente CSS Hero pentru a vedea lista modificărilor.

Istoria Eroilor CSS

Puteți face clic pe o dată și ora pentru a vedea ce arăta site-ul dvs. în acel moment. Dacă doriți să reveniți la starea respectivă, atunci pur și simplu salvați sau reluați editarea din acel moment.

Aceasta nu înseamnă că modificările pe care le-ai făcut după acel punct ar dispărea. Acestea ar mai fi stocate și puteți reveni și la acel moment. Nu devine mai simplu decât atât.

Dar dacă doriți doar să reveniți la modificările pe care le-ați făcut unui anumit articol?

În acest caz, nu trebuie să utilizați instrumentul istoric. Pur și simplu faceți clic pe elementul pe care doriți să îl restabiliți, apoi faceți clic pe butonul Resetare.

Resetați un singur element

Acest lucru va schimba articolul înapoi la setările implicite definite de tema dvs. WordPress.

Personalizarea site-ului dvs. pentru dispozitive mobile în CSS Hero

Cel mai provocator aspect al designului web este compatibilitatea dispozitivului. Trebuie să vă asigurați că site-ul dvs. arată la fel de orbitor pentru toate dispozitivele și dimensiunile ecranului. Designerii web folosesc o varietate de instrumente pentru a testa compatibilitatea browserului și a dispozitivului. Norocos pentru tine, CSS Hero vine cu un instrument de previzualizare încorporat.

Pur și simplu faceți clic pe pictograma desktop din bara de instrumente CSS Hero, apoi faceți clic pe un tip de dispozitiv. Puteți alege dintre dispozitive mobile, tablete și desktop. Zona Previzualizare se va schimba în dispozitivul selectat.

Editare în diferite moduri de dispozitiv

Acum puteți edita site-ul dvs. în timp ce îl previzualizați pentru dispozitive mobile. Acest instrument este deosebit de util pentru a regla designul temei pentru mobil și tablete.

Compatibilitate cu tema Eroilor CSS

Site-ul oficial CSS Hero are o listă mereu în creștere de teme compatibile. Această listă include multe dintre cele mai bune teme gratuite pentru WordPress. De asemenea, are cele mai populare teme premium de la magazine precum CSSIgniter, Themify, StudioPress și multe altele.

Ce este despre teme care nu sunt pe lista de compatibilitate cu teme?

CSS Hero vine cu o funcție numită Auto-Mod Rocket Detecție. Dacă utilizați o temă care nu este inclusă în lista de compatibilitate cu teme, CSS Hero va începe automat să utilizeze modul rachetă.

Modul rachetă încearcă să ghicească selecționatorii CSS din tema ta. Acest lucru merge perfect de cele mai multe ori. Dacă tema respectă standardele de codare WordPress, atunci veți putea edita aproape totul.

De asemenea, poate doriți să contactați dezvoltatorul dvs. de temă și să le cereți să ofere compatibilitate cu CSS Hero.

Ce plugin-uri sunt compatibile cu CSS Hero?

CSS Hero este testat periodic cu plugin-uri WordPress de top pentru compatibilitate. Aceasta include plugin-uri de formular de contact, construitori de pagini populare, WooCommerce și altele.

Dacă utilizați un plugin WordPress care generează o ieșire care nu poate fi modificată de CSS Hero, atunci puteți solicita autorului pluginului să o rezolve. Chiar nu trebuie să facă multe pentru a oferi compatibilitate cu CSS Hero.

Sperăm că v-ați găsit utilă recenzia CSS Hero. De asemenea, poate doriți să vedeți ghidul nostru final privind îmbunătățirea vitezei și performanței WordPress pentru începători.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me