Cum de a personaliza site-ul dvs. WordPress fără a avea de înțeles CSS

Vă vom arăta cum puteți face schimbări vizuale grave în site-urile dvs. WordPress fără absolut nicio experiență anterioară a CSS. Dar, mai întâi, să luăm un minut pentru aprecierea puțină a WordPress.

Vechea interfață wordpress

Tine minte asta? Iată cum a arătat WordPress când ne-am îndrăgostit pentru prima oară. Unsprezece ani mai târziu și suntem încă îndrăgostiți de ea, dar (din fericire) sa schimbat atât de mult încât abia se poate recunoaște.

De la o platformă de bloguri la cel mai popular sistem de management al conținutului din lume, WordPress este acum fundația a sute de mii de site-uri populare cu o armată de dezvoltatori care lucrează pe platformă și o întreagă armată de dezvoltatori care construiesc atât de multe teme și pluginuri pentru că vânzarea lor este o slujbă cu normă întreagă pentru o mulțime de oameni. Themeforest este probabil cel mai faimos magazin tematic online și se mândrește cu aproape 20.000 de teme, dintre care o mare majoritate sunt pentru WordPress. Pentru a pune acest lucru în perspectivă, puteți avea un site complet diferit în fiecare zi timp de 54 de ani!

Ați fi greu să găsiți un produs comparabil, plătit sau gratuit, ceea ce îl face atât de ușornon-codere pentru a merge de la zero la un site web pe deplin funcțional la fel de ușor.

În ultimii ani am văzut personalizarea la WordPress făcută și mai ușoară, datorită listei crescânde a constructorilor de pagini care îi ajută pe utilizatori să-și deseneze propriile modele cu ușurință. Combinați aceste instrumente de arhitectură puternică cu lista tot mai mare de securitate, partajarea și comentarea pluginurilor, este foarte simplu să construiți site-ul pe care l-ați dorit mereu.

Totul menționat mai sus vă va face 90% din drum; tot conținutul de care aveți nevoie, pe o platformă în care aveți încredere; căutând aproape perfect datorită muncii aspre a dezvoltatorilor, construind teme și plugin-uri grozave.

Dar chiar și cu cele mai bune teme veți dori mereu să faceți mici schimbări. Puține editări vizuale pentru a face o temă a ta, diferită de orice altceva. Indiferent dacă este vorba despre rotunjirea colțurilor sau îngroșarea granițelor sau despre schimbarea umbrei în jurul unui obiect, aceste schimbări fac ca o temă minunată să fie perfectă.

Toate schimbările menționate mai sus au locpersonalizarea CSS. Destul de ușor dacă sunteți un designer sau un dezvoltator, dar încercați să citiți matricea dacă nu sunteți.

Efectuarea modificărilor CSS înseamnă utilizarea instrumentelor create pentru dezvoltatori, instrumente precum Inspectori de browser pentru a găsi relevante Selectori CSS și manipularea manuală a acestora. Va trebui apoi să copiați acest CSS ca text, să îl lipiți într-un editor de text pentru a vă asigura că avea doar informațiile de care aveți nevoie și că nu ați luat opțiuni de browser ca casetele de selectare sau numele foilor de stil. Apoi, creați fie o temă de copil pentru site-ul dvs. WordPress și copiați-o acolo, fie utilizați casetele personalizate CSS care vin acum cu atât de multe teme. Acesta este un proces foarte lung. Cu atât de mulți pași expunerea dvs. la a face greșeli este mult mai mare și de depanare poate fi un timp de porc.

Prezentarea eroului CSS

Așa cum constructorii de pagini au făcut mai ușor schimbarea structurii unui site WordPress, CSS Hero face posibilă editarea vizuală. Ca un non-designer poți să te uiți la un colț și să crezi "fă-o curbată, nu poate fi atât de greu", dar apoi inspectați codul necesar pentru a face această schimbare și este descurajantă;

Interfața CSS Hero

Utilizarea CSS Hero se simte mai degrabă ca folosind Photoshop sau un produs similar. Slider-urile vă permit să reglați lucruri precum umplutura, margini, claritatea colțurilor și dimensiunile fontului, în timp ce paletele de culori vă permit să ajustați aspectul implicit pentru a se potrivi mai bine temei și stilului de brand.
Chiar designerii veterani și guru-ii CSS apreciază interfața prietenoasă în timp real. Pur și simplu face lucrurile mai netede, mai rapide și mai ușor de reglat.

Ce usor? La fel de ușor ca instalarea unui plugin.

CSS Hero nu se livrează cu un manual de instrucțiuni lung, deoarece nu veți avea nevoie de el. Vă vom arăta cum vă puteți personaliza site-ul în câteva minute.

Incepe

Butonul de șurub CSS Hero

Fiecare personalizare începe cu clicul unui fulger albastru. Acest lucru deschide meniul de personalizări CSS Hero chiar pe interfața site-ului dvs. web, fără a se deranja în tabloul de bord, făcând schimbări și apoi întors în față pentru a vedea cum arată. Uita-te la schimbările se întâmplă în timp ce le face.

Ce faceți cu CSS depinde de dvs., lăsați-l în CSS Hero și va funcționa ca un farmec fără a mai fi nevoie de alte acțiuni. De asemenea, puteți copia în atemă pentru copii sau panoul dvs. personalizat CSS. CSS-ul dvs., regulile dvs. Să mergem direct în editări!

Mișcare, țintă, schimbare

Pentru această demonstrație folosim tema Divi prin teme elegante. Aceasta este una dintre zecile de teme Hero-Ready (ceea ce înseamnă că am adăugat toți selectorii de care aveți nevoie pentru a face să funcționeze chiar din cutie). Dacă nu utilizați o temă Hero-Ready, puteți încă să adăugați propriile clase și ID-uri direct în CSS Hero sau să utilizați Mod rachetă, dar vom ajunge la asta mai târziu.

Cu excepția adăugării câtorva pagini și a unui post pe blog, am început cu Divi cam așa "cum este". Vrem să vă arătăm ce face CSS Hero unei teme noi. Folosim o postare de blog ca exemplu pentru că este, probabil, în mod implicit, cea mai clară parte a Divi. Este singura secțiune unde nu puteți utiliza constructorul de pagini încorporat, deci este aici cu siguranță că doriți să adăugațipropriile atingeri personale.

Modificați designul anteturilor.

În primul rând, dorim să schimbăm acel antet - este foarte plat - cu excepția unei linii subțiri gri sub ea, se întâmplă foarte puțin. Vom folosi CSS Hero pentru a adăuga o umbră sub ea și ao ridica de pe pagină. CSS Hero vine cu o grămadă de opțiuni pentru adăugarea diferitelor tipuri de umbre, toate putând fi modificate pentru a vă ajuta să obțineți efectul dorit.

Box Shadow

Apoi vom schimba culoarea foarte ușor până la alb. Puteți utiliza selectorul de culori încorporat pentru a face aceste modificări sau dacă lucrați în afara unei scheme de culoare, puteți introduce doar valorile RGBA sau HEX. Ambele sunt acceptate și sunt simple de introdus.

Modificați culoarea de fundal a antetului

Apoi vom viza secțiunea corp a blogului, făcând clic pe el, astfel încât CSS Hero ne poate arăta opțiunile disponibile. De aici vom schimba culoarea de fundal într-un gri mai întunecat. Acum, antetul nostru iese în evidență și, odată ce facem modificările adiționale, la fel și conținutul nostru și bara laterală.

Prin schimbarea fundalului din stânga în alb, acesta se află cu adevărat în afara paginii, dar culoarea se diluează puțin la margine, așa că am dat o margine mai închisă, cu o grosime de doar 1 pixel. O mică ajustare a razei de graniță conferă secțiunii o curbă frumoasă și ajustarea plăcuței face o margine frumoasă în jurul conținutului.

Am schimbat fonturile de titlu Helvetica. Unul dintre cele peste 100 de fonturi Google afișate în meniul derulant al fonturilor din CSS Hero, dar dacă doriți să adăugați unul din celelalte fonturi Google+ 550+, este ușor de făcut.

Schimbați fontul: HelveticaModificați fundalul la griAdăugați 1px de margineAdăugând 20px de umpluturăAdăugarea razei de graniță

Modificați dimensiunea imaginii recomandate

În mod prestabilit, Divi adaugă imaginea recomandată dintr-un post de blog sub titlul la toată lățimea. Aceasta ocupă o mulțime de spațiu deasupra clapei și împinge textul din vedere. Am folosit CSS Hero pentru a schimba lățimea la 50% și pentru a flota imaginea corectă. Prin setarea noului înălţime a imaginii la auto și-a păstrat raportul de aspect și imaginea arată perfect pe toate dispozitivele. Am adăugat și un pic umplutură la imagine, astfel încât textul să nu stea lângă el. Adăugarea de colțuri ușor curbate la imagine utilizând culisorul de rază de bord din CSS Hero a fost tot ceea ce a fost necesar pentru a face această imagine să pară perfectă.

Modificați dimensiunea imaginii recomandate și adăugați o rază de margine

Câteva alte editări mici care utilizează CSS Hero, inclusiv capitalizarea textului meta, schimbarea culorii și marginea butonului "trimite comentariu" și suntem destul de mulțumiți de modul în care arată secțiunea din stânga. Dacă o comparăm cu modul în care a fost privită înainte, puteți vedea o îmbunătățire vastă a fost făcută în câteva minute.

Meta sunt acum în Uppercase

Bara laterală

Am trecut apoi la bara laterală, care din nou, în mod implicit, este destul de clară. Prin utilizarea acelorași tehnici utilizate pentru editarea secțiunii noastre stângi, am reușit să aplicăm rapid o margine curbată și fundal întunecat care ajută această secțiune să sară de pe pagină. Am schimbat fonturile de titlu pentru a se potrivi cu personalizările curente și le-a dat o culoare palidă pentru a vă ajuta să ieșiți pe fundalul întunecat.

Am schimbat culorile link-urilor pentru a le face mai ușoare și le-au vizat în mod special pentru momentul în care utilizatorul se plimba și a setat o altă culoare. Am scăpat de albastrul electric standard și am mers cu ceva mai mult în concordanță cu tema. Dacă doriți, puteți seta și o altă culoare activ legături și legături care au fost vizitat în trecut, folosind CSS Hero.

Bara laterală

Ce am făcut noi?

Prin utilitatea de export CSS Hero suntem capabili să vedem ceea ce tocmai am creat pe site-ul nostru, pe partea de cod.

Acest lucru poate fi util pentru cei care doresc să înceapă înțelegerea CSS, precum și pentru cei care doresc doar să exporte codul generat și să copieze și să lipsească oriunde doresc.

Fragment al întregului CSS, generat de CSS Hero

Inspectorul Hero CSS

Puteți chiar să utilizați noul nostru instrument de inspector pentru a examina CSS pe care l-ați creat și pentru a vă familiariza cu modul în care se fac aceste modificări. Puteți utiliza inspectorul pentru a face mici modificări și în CSS, cum ar fi ajustarea dimensiunii fontului, a curbei sau a grosimii unui chenar, sau orice altceva. Cometatorul pe care îl obțineți cu CSS, cu atât este mai util instrumentul de inspector.

În general, aceste personalizări au durat puțin cinci minute. Cinci minute pentru a schimba complet aproape fiecare element al postului de blog. 

Hero Ready, Configurare și Mod Rocket

Eroul gata temele sunt bune pentru a ieși din cutie așa cum sa discutat mai devreme. Majoritatea temelor populare WordPress sunt pregătite de eroi, inclusiv Generatepress, Enfold, Genesis framework, Pagelines DMS, Plugin WooCommerce și LayersWP.

Aceasta înseamnă că nici o configurație nu este necesară, dar dacă este, este și ușor. Există două moduri de abordare.

Mod rachetă

O caracteristică relativ nouă și una pe care ne-o place foarte mult, modul Rocket, va căuta în mod automat foaia de stil a temei pentru selectorii valide. Odată găsită, le va adăuga la CSS Hero și va permite temeliei dvs. non-eroice să funcționeze extrem de bine fără a mai avea o configurație ulterioară. Dacă, din orice motiv, tema dvs. arată că este incompatibilă cu modul Rocket, puteți adăuga selectorii cu ajutorul instrumentului de configurare încorporat.

Adăugarea de clase și ID-uri la eroul CSS

Configuratorul rapid

Dacă știți clasele și ID-urile pe care tema dvs. le folosește, le puteți adăuga manual la CSS Hero și le puteți viza exact așa cum ați face orice alt element dintr-o temă pregătită de eroi. Aveți nevoie de ajutor pentru a le găsi? Încercați instrumentul Element de inspectare în majoritatea browserelor sau căutați foaia de stil a temei pentru orice element cu un punct (.) În fața acestuia sau o etichetă hash (#). În mod alternativ, majoritatea temelor high end vor include documentația, fie în cadrul temei în sine, fie pe site-ul web cu selectorii relevanți de care aveți nevoie.

Constructorii de pagini, pluginurile și eroul CSS

Am menționat mai devreme despre beneficiile structurale ale utilizării unui constructor de pagini pentru a accelera / simplifica procesul de construire a paginilor în WordPress. Dar totuși doriți să controlați cum arată, nu? Același lucru se poate spune și pentru pluginurile care construiesc formulare, adaugă tabele etc.
Acesta este unul dintre motivele pentru care ne-am uitat dincolo de temele când construim CSS Hero. Veți putea să o utilizați imediat, la fel cum se arată la editarea paginii de blog, cu o grămadă de resurse WordPress reci. Beaver Builder, un constructor de pagini foarte popular, este pe deplin compatibil cu CSS Hero, așa cum este Visual Composer și Formular de Contact 7. Verificați dacă pluginurile pe care le utilizați sunt compatibile aici.

Deci asta este! Fără a cunoaște niciodată CSS (sau orice alt limbaj de programare), puteți construi un site WordPress complet personalizat și complet personalizat. Dacă faceți asta sau ați construit ceva folosind CSS Hero, asigurați-vă că ne-ați informat în comentarii. Ne-ar plăcea să-l vedem!