La personalització del disseny del vostre lloc mai no ha estat tan fàcil. Si feu servir un complement de l’editor en viu de WordPress CSS, podeu crear un lloc únic que coincideixi amb les vostres especificacions de disseny i que reflecteixi la imatge de la vostra marca..
Fins fa relativament poc temps, l’ús de CSS per modificar l’aspecte del vostre lloc s’ha deixat principalment als dissenyadors web. Tot i això, ara hi ha una gran varietat de complements d’editor en directe de CSS de WordPress que us ajuden a personalitzar el vostre lloc. Alguns requereixen una mica de coneixement sobre la codificació, mentre que d’altres no necessiten cap experiència de codificació. I tot això us permetrà treballar a la portada del vostre lloc real en temps real.
En aquest article, veurem què és exactament un complement d’editor de CSS en viu, quins complements d’editor en viu de WordPress CSS estan disponibles i què heu de buscar en escollir-ne un.
Contents
Què és un plugin de CSS Live Editor de WordPress?
Un complement de l’editor en directe CSS de WordPress us permet personalitzar el disseny del vostre tema. Tanmateix, diferent de l’edició dels fitxers CSS directament o l’ús d’un complement CSS estàndard de bogeria, un complement d’editor de WordPress CSS en viu us permet treballar a la portada del vostre lloc. Això vol dir que podeu veure els vostres canvis aplicats en directe en temps real, a mesura que els feu.
Si utilitzeu un complement de l’editor en viu de WordPress CSS, cal introduir codi o ajustar els controls al front end. Això significa que podeu veure que les vostres alteracions es produeixen a mesura que escriviu. No només això, treballar al costat d’un visitant d’un lloc web estalvia temps per canviar entre pestanyes i pressionar l’actualització constant.
Els complements d’editor de WordPress CSS en directe que no requereixen que editeu el CSS mostren directament un tauler de control a la part frontal del vostre lloc que us permet fer canvis al disseny del vostre lloc mitjançant una interfície visual. Això només funciona simplement apuntant i fent clic a un element de la pàgina i, a continuació, seleccioneu una configuració nova entre les opcions disponibles. L’elecció d’un dels complements de l’editor en viu de WordPress CSS amb aquesta característica és ideal per a aquells que vulguin personalitzar el disseny del seu lloc però no saben com escriure CSS.
Qualsevol tipus de complement de l’editor de WordPress CSS en viu que utilitzeu els resultats finals són essencialment els mateixos. S’obté a crear un disseny personal i original per al lloc web. A causa del component de l’editor en viu, no només estalvieu temps i esforç, sinó que realment podeu gaudir del procés.
Què heu de buscar en un connector de WordPress CSS Live Editor
El que busqueu d’un complement d’editor de CSS en directe dependrà molt del vostre nivell de coneixement CSS o experiència de codificació.
Si no us preocupeu, no us preocupeu, alguns complements de l’editor de CSS en directe han estat creats per ser utilitzats per principiants totals. Tanmateix, haureu de triar un complement d’editor en viu amb un tauler de control, que us permet apuntar i fer clic per fer modificacions. Tot i això, val la pena consultar exactament quins elements podeu personalitzar, ja que cada complement és diferent.
Els desenvolupadors més experimentats poden desitjar un complement que us permeti introduir o editar el codi. Una bona opció és aquella que us ajudarà a mesura que feu un codi i remarqueu qualsevol error. Podeu cercar altres funcions del plugin, sigui quina sigui la vostra experiència:
- Funciona amb tots els temes i complements de WordPress?
- Ofereix dissenys predefinits?
- Podeu treballar en mode d’esborrany abans de publicar els canvis?
- Estalvia canvis incrementals a mesura que es vagi fent, de manera que podeu desfer el treball si cal?
- Proporciona documentació, tutorials i suport en profunditat?
Ara, ja sabeu què cal tenir en compte abans de fer una tria, mireu els diferents connectors d’editor en directe de CSS de WordPress disponibles.
1. Heroi CSS
CSS Hero és un complement d’editor de temes de WordPress en directe excel·lent, que us permet personalitzar gairebé tots els aspectes del disseny del vostre tema. Això ho fa mitjançant una interfície intuïtiva de punt i clic que funciona a la part frontal del lloc, sense que hagueu d’introduir una línia de CSS si ho desitgeu. Per tant, encara que no tingueu coneixement de codificació, podeu utilitzar aquest complement per modificar el disseny del vostre lloc.
CSS Hero té algunes característiques especialment notables. En primer lloc, desa totes les vostres edicions, de manera que podeu desfer qualsevol tasca realitzada o tornar a un punt concret del vostre flux de treball. Ja no cal que tingueu por de cometre un error i trencar el vostre lloc.
En segon lloc, CSS Hero ofereix “Estils ja confeccionats” i “Skins temàtics”. Això us ofereix centenars de dissenys i 29 dissenys pre-elaborats, per triar com a punts de partida del vostre lloc. Així doncs, fins i tot aquells que no tinguem inspiració ni visió de disseny poden crear un lloc amb qui enorgulleix-nos.
CSS Hero és un dels més impressionants complements d’editor de CSS en viu de WordPress, dissenyats per permetre personalitzar fàcilment el disseny del vostre lloc, tant si sou un principiant de codificació com un desenvolupador web. Abans de comprar CSS Hero per només 19 dòlars, val la pena comprovar si aquest complement funciona amb el vostre tema. CSS Hero treballa en diversos temes preparats per Hero, i us proporcionen una descripció, percentatge de compatibilitat (fyi Total de puntuacions més altes del 99% – molt superior a altres temes premium més venuts) i un lloc de proves en directe per a cadascun. També podeu provar CSSHero RocketMode per fer-lo accessible al vostre tema actual.
CSSHero Summer Sale
Ara mateix podreu estalviar fins a un 50% a CSSHero durant la venda d’estiu. No es necessitarà codi, quan realitzeu el pagament, no s’aplicarà el descompte. L’oferta finalitza el 9 d’agost de 2016.
2. Llapis groc
Yellow Pencil és un editor d’estil CSS de WordPress Visual i un altre complement que no requereix cap codificació. Dit això, hi ha un editor CSS integrat per a aquells que vulguin editar els seus fulls d’estil a mà. Aquest complement funciona al 100% al front end, que permet veure i treballar al vostre lloc en temps real. Ha estat creat per permetre personalitzar qualsevol element en qualsevol tema o complement i us permet editar el tema en pocs minuts o redissenyar tot el disseny del lloc web si voleu.
El llapis groc us permet ressaltar fàcilment els selectors de CSS individuals, fent que el vostre tema sigui ràpid i indolor. Aquest complement compta amb més de 300 fons, 600 famílies de fonts i més de 50 animacions per triar, la qual cosa us permet personalitzar el tema per adaptar-se a la imatge de la vostra marca. Les pàgines grogues també ofereixen una àmplia documentació i suport per a aquells que no hagin utilitzat abans els complements de l’editor CSS de WordPress.
El llapis groc us restituirà 23 dòlars i és compatible amb tots els temes i complements de WordPress. Una vegada més, una opció fantàstica per a principiants i dissenyadors web experimentats.
3. CSS personalitzats TJ
TJ Custom CSS de Tema Junkie és un complement gratuït de WordPress que us permetrà personalitzar el vostre lloc mitjançant una interfície frontal. Aquest complement ha estat dissenyat tenint en compte els codificadors, i no és recomanable per a aquells que no confien amb CSS..
Com molts d’aquests complements, TJ Custom CSS utilitza un gestor CSS per afegir CSS personalitzat al vostre lloc, sobreposant qualsevol tema o estils predeterminats. Podeu accedir-hi i treballar-lo des del tauler de control.
Tot i això, TJ Custom CSS també permet previsualitzar els canvis en temps real. Si feu servir el personalitzador en viu, podeu veure l’efecte que tenen els vostres canvis a mesura que afegiu el CSS personalitzat. Això us pot estalviar molt de temps, ja que no haureu de mantenir l’estalvi del treball, canviar les pestanyes del navegador i les pàgines refrescants.
TJ Custom és un complement molt senzill que us ajudarà a crear un lloc únic exactament a les vostres necessitats. Si us agrada fer ganes de codi i teniu experiència en personalitzar el vostre tema mitjançant CSS, aquest seria el connector perfecte per a vosaltres.
4. SiteOrigin CSS
SiteOrigin CSS és un complement gratuït d’editor en viu de WordPress CSS en directe des de SiteOrigin. Segons els supòsits, tots els temes de WordPress, aquest complement de rics funcions ofereix una selecció d’eines per atendre les necessitats de tots els seus usuaris, sigui quina sigui la seva experiència de codificació.
Per als principiants, SiteOrigin CSS proporciona un editor visual. Aquest consisteix en un conjunt senzill de controls que us permeten triar estils, colors i altres ajustaments fàcilment. Si no teniu habilitats de codificació, podeu modificar el disseny del vostre lloc amb només uns clics.
Per aquells que tenen una experiència d’edició CSS manual i que necessiten fer-ne més, SiteOrigin arriba amb un inspector dinàmic. Això us ajuda a trobar el selector correcte a utilitzar per orientar-vos a un element específic que voleu personalitzar. Sovint pot ser la part més difícil d’editar CSS existents, per la qual cosa és una gran mà d’ajuda per a aquells que encara aprenen.
Per als codificadors més avançats que hi ha, el potent editor del CSS del complement SiteOrigin té completat automàticament tant els selectors com els atributs CSS. També us ajudarà a trobar problemes al vostre CSS abans de publicar-lo.
Siguin quines siguin les funcions d’aquest complement que utilitzeu per personalitzar el vostre lloc de WordPress, tot el treball es realitza a la part frontal del vostre lloc en temps real, de manera que podreu veure els vostres canvis mentre els feu.
5. Microthemer
Microthemer és un complement intuïtiu i potent i potent editor de WordPress CSS per endavant. Es pot personalitzar l’aparició de qualsevol tema o complement de WordPress i és prou lleuger com per evitar que es redueixi la velocitat del lloc.
Microthemer ofereix opcions per a principiants i professionals. Els no codificadors poden alterar elements com colors, tipus de lletra, imatges de fons i dissenys de llocs, per citar-ne alguns. Els desenvolupadors poden treballar en mode de previsualització en directe, codificant en CSS, SCSS i JavaScript manualment.
Una característica clau del Microthemer és que permet treballar en mode d’esborrany. Podeu provar un disseny nou per al vostre lloc o passar una estona provant diverses opcions d’estil sense que això afecti l’experiència de la vostra audiència al vostre lloc. A continuació, podeu publicar tots els canvis d’una sola vegada quan estigueu satisfets amb el projecte final.
Microthemer inclou tutorials, documentació i fòrums de suport extremadament exhaustius, que us ajudaran a treure el màxim partit d’aquest complement. Podeu comprar Microthemer per una quota única de 45 dòlars, que inclou actualitzacions gratuïtes de per vida.
Bonificació: Ultimate Tweaker
Potser voleu editar no només l’aspecte frontal del vostre lloc web, sinó alguns dels papers d’usuari, pàgina d’inici de sessió o altres funcions de WordPress. Aquí és on Ultimate Tweaker per a WordPress pot resultar útil. El complement és compatible amb les versions actuals de WordPress. La majoria de navegadors habilitats per JavaScript els faran funcionar sense problemes.
Ultimate Tweaker conté més de 260 hacks i ajustaments diversos que permeten als usuaris (sense coneixements de php o de programació) configurar i personalitzar WordPress. Malgrat la gran quantitat de funcions, el plugin és molt ràpid i optimitzat per carregar només els retocs usats (càrrega mandrosa sense ús de memòria).
El complement també admet la majoria de temes, logotips i icones i protegeix el contingut (cap menú contextual, cap selecció i cap arrossegament). La funció HTML Minifier ajuda els usuaris a eliminar comentaris, a minificar HTML i a fer URL relatius.
Entre les funcions destacades d’aquest complement es troben una interfície d’administració lleugera amb estalvi automàtic, minifestador HTML i creador d’enllaços relatius, opció d’amagar caixes meta en els tipus de pàgina personalitzada, gestor de rols, mode de configuració independent del rol, 2X més ràpid / carregat tard, amagar i el rol d’administrador “Ultimate Tweaker”.
Pensaments finals
Tots els complements d’editor de WordPress CSS en directe esmentats aquí són opcions impressionants per ajudar-vos a personalitzar el disseny del vostre lloc. Qualsevol complement que trieu, assegureu-vos de llegir la documentació proporcionada per obtenir-ne el màxim rendiment. Com més comprengueu utilitzar un editor en directe, millors són els dissenys que produireu.
Feu servir un complement d’editor de CSS en directe i si és així quin? Ho recomanaríeu? Si us plau, compartiu qualsevol consell o observació útil als comentaris.
