As dit kom by die verkryging van 'n webwerf wat presies lyk soos wat jy wil, is die groot rykdom aan verskillende beskikbare WordPress-temas 'n goeie voorsprong! En as u lank genoeg soek, kan u moontlik 'n tema vind wat perfek vir u webwerf is. Die kans is egter dat alhoewel jy in staat is om naby te kom aan wat jy wil, jy waarskynlik nog 'n entjie van perfeksie sal wees. Per slot van rekening, kan 'n voorafgeboude tema ooit regtig pas by die behoeftes van 'n individu tot by 'n T? …
Wat moet u dus doen as u daarin geslaag het om 'n tema te vind wat naby is aan wat u wil, maar tog 'n paar veranderinge moet aanbring? Wel, as u natuurlik die vereiste vaardighede het, is dit geen probleem nie: u kan dit verander soos u wil. Maar wat as u nie die vertroue het om in te gaan en u eie wysigings aan die nodige lêers aan te bring nie?
Vandag wil ek u 'n baie handige inprop voorstel: CSS Hero – 'n inprop wat u bemagtig om klein – of miskien selfs relatief groot – visuele aanpassings self te maak: sonder om aan 'n enkele reël kode te hoef te raak!
1 Wat is CSS held??
5 Ontdoen veranderinge
6 Wysig enige element
7 Ander eienskappe
8 Inspekteur Pro byvoeging
9 CSS Hero Ondersteuning
Wat is CSS held??
CSS Hero is 'n plugin vir die aanpassing van temas (bekyk funksies.
As sodanig beslaan dit 'n soortgelyke ruimte as die plug-en-plug-in vir bladsybouer. Waar die bladsybouers u egter aanmoedig om van nuuts af 'n persoonlike ontwerp te bou, laat CSS Hero u u bestaande WordPress-tema aanpas op enige manier wat u wil.
Dit stel u in staat om ontwikkelaar te speel, sonder om noodwendig oor die ontwikkelaarsvaardighede te beskik wat gewoonlik daarby betrokke is. U gebruik voortdurend u professioneel ontwerpte WordPress-tema – u weet, die een wat deur 'n kundige gebou is, nie deur iemand wat ewekansige modules saamgooi nie; à la page builder-plugins – terwyl u kleiner aanpassings maak om aan u vereistes te voldoen.
Geen terreinelement is buite perke nie: u kan alles en nog alles aanpas. CSS Hero sit u aanpassings om in die toepaslike CSS-kode, wat dan op 'n nuwe CSS-stylblad toegepas word (die oorspronklike stylblad bly onaangeraak, en vermy probleme in die ry).
CSS Hero werk ook met enige WordPress-tema. Diegene wat ekstensief getoets is vir verenigbaarheid, word Hero-gereed genoem, terwyl ongetoetste temas steeds in Rocket Mode ondersteun word.
CSS Hero is 'n bekostigbare, premium plugin. Om sy mededinging te weerspieël, is dit op prys gestel met die gewildste inproppe vir bladsybouers.
'N Basiese beginnerslisensie kos net $ 29 en gee jou toegang tot die volledige CSS Hero-inprop (hoewel jy beperk is tot net een webwerf).
As u CSS Hero op meer as een webwerf wil gebruik, is u opsies:
Persoonlike lisensie ($ 59) – tot vyf werwe
Pro-lisensie ($ 199) – tot 999 webwerwe
Soos u kan dink, is die pro-lisensie gemik op kreatiewe agentskappe en loopbaanontwikkelaars. Beide die persoonlike lisensies en die pro-lisensies het ook toegang tot die premie-byvoeging, Inspector Pro – ons bespreek dit verder in die bladsy..
Al drie CSS Hero-lisensies is vir een jaar geldig, gee toegang tot een jaar se opdaterings en ondersteuning, en het 'n geld-terugwaarborg van 30 dae.
Nadat u u aankoop gedoen het, word u na die CSS Hero-kontroleskerm geneem. Van daar af sal u toegang hê tot die uitgebreide dokumentasie van die inprop, plus die ongelooflike CSS Hero Academy. Die akademie is 'n prettige aanraking met 'n reeks beginnersvriendelike video-tutoriale wat ontwerp is om u te help om die beste uit u nuwe inprop te haal (ek sal baie graag sien dat ander gevorderde inproppe volgende pak pas).
Die dashboard verrig nog een belangrike funksie: dit is waar u die CSS Hero aflaai en – afhangend van u lisensievlak – die Inspector Pro-inprop.
Sodra die aflaaie voltooi is, meld u by u WordPress-dashboard aan. Navigeer na inproppe > Voeg nuwe > Laai die inprop op, volg dan die instruksies om die zip-lêers van die inprop op te laai en aktiveer die inprop. As u al voorheen 'n WordPress-inprop geïnstalleer het, sal dit baie bekend voel.
Die CSS Hero-installasie benodig egter een ekstra stap: verifikasie. Klik op die blou knoppie en volg die instruksies terwyl u een van u lisensies registreer. So ver so goed.
CSS Hero is 'n tema-redigeermiddel, en as sodanig word die redigering aan die voorkant gedoen, waar u real-time veranderinge kan sien. Gaan na die voorkant van u werf en u sien 'n nuwe blou ikoon in die regter boonste hoek van die skerm. Klik hier om u nuwe inprop te gebruik.
Nadat u op die blou ikoon geklik het, sal u 'n paar sekondes moet wag totdat CSS Hero aanskakel. Met die inprop geaktiveer, kan u nou begin om u webwerf te stileer en aan te pas.
Klik op die blou ikoon aan die bokant van die opsiespaneel om te begin. As u onseker is oor hoe om voort te gaan, sal die inprop u handige skakels bied wat al die basiese beginsels dek. As u egter reg is om reguit in te duik, kan u begin om enige element op u bladsy te rig en te redigeer.
Beweeg oor die element wat u wil redigeer en klik dan (ons gaan begin met 'n relatiewe basiese inhoudsopgawe, soos gesien in die skermkiekie hieronder). Sodra u dit geklik het, sluit CSS Hero u element in, wat beteken dat u vry is om aan te pas.
Om die proses so eenvoudig moontlik te maak, sal CSS Hero u voorsien van 'n lys aanpassingsopsies, afhangende van die tipe element wat u gekies het. Nadat ek 'n paragraaf gekies het, sluit my opsies in om lettertipes, agtergronde en grense te verander, en die opvulling rondom die teks op te stel.
Dit is maklik om die elemente te redigeer, met alles reguleer vanaf die regterkant van die menubalk, plus veranderinge wat in reële tyd voorbeskou word. Om te begin, het ek besluit om op die tekseienskappe te konsentreer. Met hierdie opsie gekies, wys CSS Hero alle beskikbare opsies vir die opstel van die teks, insluitend:
Font-gesig – met elke Google-lettertipe wat u kan kies
Tekstransformasie – byvoorbeeld hoofletters
Maak die gewenste veranderinge en kyk hoe dit 'n sekonde later op die teks toegepas word.
U kan dan teruggaan en 'n agtergrond vir u paragraaf instel – CSS Hero gee weer totale beheer aan u oor. U kan 'n pasgemaakte prent oplaai, 'n kleur kies of 'n gradiënt opstel om as agtergrond te vertoon.
U kry dieselfde opsies vir paragraafgrense, met volledige buigsaamheid ten opsigte van grensstyl, breedte en kleur.
Daar is selfs 'n paar oulike vooraf-gekonfigureerde style – byvoorbeeld, om jou teks in 'n knoppie te omskep of 'n gereedgemaakte agtergrond in 'n aantal oulike ontwerpe te vertoon.
As u verkies om nie 'n gedeelte op een slag deur te werk nie, kan u ook die opsie kies, wat elke aanpassingsopsie op een gerieflike skerm bevat..
Terwyl u wysigings aan die teks aanbring, sal CSS Hero dit toepas op die regstreekse weergawe van u webwerf. U hoef egter nie op hierdie punt enige permanente veranderinge aan te bring nie – voordat die wysigings toegepas word, het u die opsie om dit uit te vee deur op Kanselleer te klik of om dit te bevestig deur op die stoor-knoppie te klik.
Selfs nadat u slaan met slaan, sal u egter nie met ongewenste veranderinge vassit nie. Gaan terug na die boonste vlak van die CSS Hero-menu om na die oorspronklike terug te keer, navigeer na die gereedskapgedeelte en kies dan die terugstellinginstellings na die standaard-opsie.
Dit is ook moontlik om 'n individuele element te herstel na die standaard fabrieksinstellings – klik net op die element wat u wil herstel, en klik dan op die klein 'R' reset-ikoon aan die regterkant van die menu. Druk op Bevestig, en u skurke element sal tot sy eertydse glorie herstel word.
Soos voorheen genoem, word alle aanpassings op 'n addisionele stylblad toegepas. Sou die ergste gebeur, sal die oorspronklike stylblad van u tema onaangeraak bly. Dit maak nie saak watter veranderinge u met CSS Hero aanbring nie, u kan geen langtermynskade aanrig nie. As al die ander herstelopsies misluk, kan u u standaardtema herstel en maklik slaap!
Wysig enige element
Een van die sterk punte van CSS Hero is dat dit u toelaat om enige element op u bladsy te redigeer – ongeag hoe groot of klein.
As u na die groot prentjie kyk, kan u die agtergrondprent, sidebalkstyl en voetskrifafdeling van u webwerf wysig.
Dit word bereik deur dieselfde proses te gebruik as wat ons gebruik het om ons paragraaf te wysig, maar toon dat CSS Hero gebruik kan word om fundamentele veranderinge aan die estetika van u werf aan te bring. Kyk na die skermkiekie hieronder, waar ek die agtergrond van my sidebalk verander het, die widget-opskrifstyle verander het en die spasiëring ook herkonfigureer. Hier is die basiese voorskoot:
En hier is dit na my aanpassing – ek is weliswaar nie 'n ontwerper nie, maar dit het net 'n paar sekondes geneem om te bereik.
U kan ook klein inhoudelemente, soos prente, skakelkleure en lysstyle, aanpas. Lysstyle is veral interessant, omdat u persoonlike kolpunte in die afdeling vir spesifieke lyste kan kies. Daar is ses koel voorgeboude koeëls wat ondersteun word – insluitend vierkante, desimale en Romeinse syfers – of u kan u eie persoonlike ikone oplaai vir 'n meer persoonlike aanraking.
Hopelik gee dit u 'n idee van hoe u die ontwerp van u webwerf kan hersien. U WordPress-tema bied die basis, maar danksy CSS Hero kan u elke pixel op u webwerf aanpas – sonder om aan 'n reël kode te raak.
CSS Hero het verskeie ander aangename funksies waarop ek u aandag wil vestig.
Die eerste is die uitsigveranderaar. Met 'n toenemende klem op responsiewe ontwerp, is dit belangrik dat u webwerf foutloos werk op toestelle van alle vorms en groottes. CSS Hero kom met 'n ingeboude funksie waarmee u u werf in rekenaar-, tablet- en mobiele aansigte kan besigtig.
Kies eenvoudig u voorkeuruitsig op die werkbalk – dit is die tweede opsie – en laat CSS Hero u skerm in die regte grootte omskep. Dit is 'n uitstekende manier om die veranderinge wat u op kleiner toestelle aangebring het, te toets.
Vervolgens het ons die belangrike geskiedenis-funksie. Elke keer as u op die stoor-knoppie klik, slaan CSS Hero 'n foto van u webwerf op. Hierdie foto's kan met 'n klik van 'n knoppie gesien en herstel word, wat beteken dat u harde werk nooit verlore gaan nie; u kan net vooruit en agtertoe spring.
Laastens het ons die opsie Export CSS beskikbaar, wat beskikbaar is uit die afdeling gereedskap. Dit gee u die geleentheid om u bewerkte CSS vir gebruik op 'n ander webwerf uit te voer, of om dit op die skerm te kry om die veranderinge wat u aangebring het, te bestudeer (een van die beste maniere om CSS te leer).
Inspekteur Pro byvoeging
Diegene van u wat opgegradeer is na die persoonlike of pro-planne, kry ook CSS Hero-byvoeging Inspector Pro wat by u lisensie ingesluit is.
Inspector Pro is in Mei 2015 aangekondig, en onlangs uit die beta-modus, is gemik op meer gevorderde CSS-gebruikers. Terwyl CSS Hero 'n instrument is wat absoluut geen CSS-vaardighede benodig nie, is Inspector Pro ontwikkel vir diegene wat hul webwerf wil aanpas deur die CSS direk aan te pas.
Inspector Pro vertoon die CSS van u tema onder die regstreekse voorskou. U kan hierdie kode verander soos u wil, en u wysigings word ook in die voorskou weerspieël. Deur u die vermoë te gee om die CSS direk te wysig, gee hierdie inprop u absolute beheer oor u aanpassings, pixel vir pixel.
Inspector Pro bied egter ook nuttige funksies, so jy is nooit op jou eie nie. Byvoorbeeld, u kan na 'n spesifieke lyn spring deur die handige soekfunksie te gebruik, of spesifieke styllyne deaktiveer sodat oorvleuelende elemente nie in die pad kom nie.
As u van nuuts af u CSS skryf, sal u van hierdie byvoeging hou, aangesien dit beteken dat u nie meer tussen vensters hoef te blaai nie – u kan al u wysigings op een skerm maak en bekyk. Handy!
CSS Hero Ondersteuning
Vanaf die oomblik dat u by die CSS Hero-dashboard aanmeld, kan u sien dat die ontwikkelaars die moeite doen om u die beste uit hul plugin te put.
Ek het al aandag gegee aan die uitgebreide dokumentasie en die CSS Hero Academy (die akademie is in sy kinderskoene, maar daar is konkrete planne om voort te gaan met die uitbreiding daarvan).
Hierdie twee afdelings is ongelooflik deeglik, en die akademie bevat nuttige video-tutoriale. CSS Hero kan aanvanklik moeilik wees om te gebruik, so ek het hierdie kort video-tutoriale nuttig gevind om my voete te vind – waarna die inprop relatief reguit gevoel het.
Daar is ook 'n meer gevorderde dokumentasie-afdeling, bekend as die Developers Knowledge Base. Dit is gerig op plugin- / tema-ontwikkelaars, wat die stappe doen om te verseker dat hul produkte ten volle CSS Hero-versoenbaar is – ook al helde-gereed.
Ten spyte van die diepgaande dokumentasie is daar ook 'n ondersteuningsforum vir diegene wat nog steeds nie hul probleme kan oplos nie. Lede van die CSS Hero-ondersteuningspersoneel is beskikbaar om enige vrae te beantwoord – gewoonlik binne enkele ure. 'N Lisensie verleen toegang tot een jaar tot die forum en ondersteuningspan.
In die algemeen kan CSS Hero nie die skuld kry vir sy steunpogings nie. Die voorafgeskrewe en opgeneemde tutoriale is baie nuttig, en hulle word regdeur die gebruikerservaring vertoon op punte waar dit waarskynlik nodig sal wees.
Namate WordPress-plugins al hoe meer gesofistikeerd raak, wil ek graag sien dat meer ontwikkelaars die voorbeeld van CSS Hero volg, wat gevorderde ondersteuning regstreeks kan bied, sodat onervare gebruikers nooit uit hul diepte sal voel nie.
In die algemeen was ek regtig beïndruk met CSS Hero. Met so 'n onbeperkte aanpassingspotensiaal, kon hierdie inprop maklik oorweldigend gewees het, maar vanweë die slim, intuïtiewe koppelvlak (en nuttige tutoriale) is dit deurgaans maklik om te gebruik.
Die aanpassingsopsies is eindeloos, waardeur u u tema op enige manier kan aanpas. Dit stel u in staat om 'n paar oulike, oorspronklike ontwerpe te maak deur die basis van u tema te gebruik, en dit alles sonder om u hande vuil te maak met die kode.
CSS Hero is egter nie net vir amateur-coders nie. Inspector Pro is 'n opwindende instrument vir ervare ontwikkelaars wat van die grond af 'n webwerf wil bou.
Die byvoeging maak dit heeltemal haalbaar dat u van nuuts af 'n webwerf kan bou en kyk hoe u skepping lewendig word soos u lyn vir lyn kodeer. Meer realisties is dit egter dat die raaiwerk uit die aanpassing van temas verwyder word, wat enorme hoeveelhede tyd sal bespaar vir ontwikkelaars wat kliëntewerk doen.
In die algemeen is CSS Hero 'n top-inprop, en dit behoort 'n beroep op WordPress-gebruikers van alle vaardigheidsvlakke te maak. As u dit nog nie gedoen het nie, gaan kyk gerus!
(Opdateer – 16 Maart – Sedert die skryf van hierdie pos, het CSS Hero ons vriendelik van 'n spesiale aanbieding voorsien afslagkoeponkode gee die WinningWP-lesers die reg op tot 40% afslag – besigtig koepon.