33Ysd0q
CSS Hero review, uno de los editores de CSS más populares de WordPress. Personaliza tu sitio de WordPress como un profesional sin ningún conocimiento de codificación.
Una de las razones principales detrás de la popularidad masiva del CMS de WordPress sería su potencial de personalización integral.
Sin embargo, algunos de los temas de WordPress, con sus opciones limitadas de temas, hace que sea difícil diseñar correctamente según sus gustos.
La personalización manual de los archivos de temas principales es posible, pero puede ser un poco engorrosa y puede dar lugar a problemas si no se tiene cuidado. Pero eso no debería ser un problema con el plugin CSS Hero WordPress.
Una vez instalado, el plugin le dará acceso a una interfaz de punto y clic que permite al usuario ajustar el aspecto de su sitio web en tiempo real.
La mayoría de las personalizaciones básicas, como el ajuste del color, la alineación y el tamaño de fuente, se pueden manejar a través de su interfaz gráfica de usuario normal.
Sin embargo, para una configuración más avanzada, tendrá acceso a un editor de código dedicado que le permitirá introducir su CSS personalizado.
En pocas palabras, este es el sueño de un desarrollador web si se tiene en cuenta el potencial de diseño y personalización que tiene el plugin.
Pero con eso dicho, vale la pena mencionar que el plugin está pagado, y por lo tanto, la gente podría estar considerando si es o no una buena inversión para ellos.
Por eso, para el propósito de esta lectura, hemos preparado una lectura exhaustiva que repasa todos los detalles que el Héroe CSS tiene para ofrecer, para que usted pueda tomar una decisión bien informada con respecto al plugin.
Así que sin más preámbulos, empecemos:
Resumen contenido
- 1 CSS Hero – Características
- 2 Personalización para diferentes tamaños de pantalla
- 3 Acceso a propiedades de CSS complejas
- 4 Editor de código incorporado
- 5 Fragmentos de código listos para usar
- 6 Opción de deshacer/rehacer el historial
- 7 Guardar puntos de verificación
- 8 Y eso no es ni la mitad de todo
- 9 CSS Hero – Interfaz de usuario
- 10 Héroe de CSS – Precios
- 11 ¿Debería usar CSS Hero?
CSS Hero – Características
Para comenzar la revisión, repasemos rápidamente todas las características y funcionalidades que ofrece el plugin:
- Estilos de fuentes y tipografía
- Gestión integral del color
- Fragmentos ya preparados
- Deshacer / Rehacer historial
- Editor de código CSS
- Grabar versiones de tratamiento
- Y más
Personalización para diferentes tamaños de pantalla
CSS Hero le ofrece opciones para editar y previsualizar cómo su sitio se verá en pantallas de diferentes tamaños como escritorio, tableta y móvil.
Esto le permite ajustar el diseño de tal manera que los usuarios que vienen de teléfonos de pantalla pequeña así como de monitores de pantalla grande, todos puedan disfrutar de la mejor experiencia de usuario posible.
Usted tendrá acceso a una pantalla de edición en vivo que le permitirá realizar cambios en tiempo real.
Además, el plugin le permite crear diferentes diseños para diferentes tamaños de pantalla, dándole total libertad de personalización.
Acceso a propiedades de CSS complejas
El plugin le da acceso a propiedades CSS complejas que puede añadir o modificar en el diseño de su sitio con una simple interfaz de apuntar y hacer clic.
Todo lo que tiene que hacer es introducir un número o mover un control deslizante y se realizarán cambios en estos elementos CSS específicos del diseño, como degradados, sombras de caja, sombras de texto, etc.
Y eso no es todo, tendrás acceso a la enorme colección de fuentes de Google, así como fuentes TypeKit para ayudarte con todas tus necesidades tipográficas.
Simplemente seleccione el tipo de letra que desea utilizar en el menú desplegable y ya está listo.
La personalización del color también es muy conveniente con la inclusión de un selector de color dedicado y la opción de probar ajustes de color y cambios de fondo en tiempo real.
El plugin incluso le permite almacenar/guardar sus opciones de color para ayudarle a crear y aplicar fácilmente una combinación de colores.
Además, con una interfaz de deslizamiento suave, podrá ajustar el acolchado y los márgenes dados a los diferentes elementos y módulos de diseño, lo que le proporcionará un control adicional sobre el diseño y el aspecto general de su sitio web.
Editor de código incorporado
El plugin le da acceso a una avanzada interfaz de editor CSS/LESSCSS con soporte para renderizado en vivo, apodado Inspector.
La funcionalidad le permite añadir reglas adicionales, copiar/pegar ciertas líneas de código e incluso exportar su trabajo con un solo clic.
Esto es una bendición para los desarrolladores, ya que podrán hacer ajustes y ajustes directamente en el nivel central.
Es totalmente capaz de ayudarle a revisar, editar y refinar la codificación CSS generada e incluso puede ayudarle a depurar cualquier problema que surja.
Fragmentos de código listos para usar
El editor de código incorporado le permite insertar directamente códigos personalizados para realizar las modificaciones deseadas en el diseño de su sitio.
Sin embargo, si estás buscando hacer algunos ajustes genéricos usando fragmentos de código estándar, entonces estás de suerte.
El plugin contiene una atractiva colección de fragmentos de código listos para usar que le ayudarán a agilizar su proceso.
Opción de deshacer/rehacer el historial
Todos los ajustes y cambios que hagas usando el plugin se pueden deshacer o rehacer si crees que cometiste un error durante la edición. Todos los cambios realizados con el plugin se almacenan en un historial dedicado.
Todo está muy bien detallado, así que ir hacia atrás o hacia delante en su proceso de edición es tan simple como hacer clic en la versión a la que desea volver. Esto hace que la experimentación sea mucho más fácil!
Guardar puntos de verificación
El plugin también le permite crear y almacenar puntos de control para su proceso de edición de temas. Aquí puede tomar instantáneas de sus ediciones y almacenarlas como versiones diferentes.
Más tarde, puede revisar estas versiones, elegir la que más le guste y hacer clic en un solo botón para ponerla en funcionamiento.
Por supuesto, también puede utilizar la función de punto de control para guardar el progreso de edición y volver a él más adelante.
Y eso no es ni la mitad de todo
Aquí están algunas de las otras características notables que el plugin trae a la mesa:
- No Lock-Ins – El plugin no te bloquea, así que estás obligado a usar el plugin únicamente. De hecho, usted será capaz de exportar fácilmente todo su sitio junto con toda la personalización realizada utilizando el plugin sin tener que preocuparse.
- Personalizar su sitio como un usuario no registrado – Los usuarios no registrados tienen una vista diferente de su sitio web y, por lo tanto, pueden tener una experiencia de usuario diferente a la que usted tiene la intención de ofrecer. Pero eso no debería ser un problema, ya que el plugin le permite estilizar o personalizar su tema desde la perspectiva de un usuario no registrado.
- Estilice su página de inicio de sesión – El plugin incluso le permite personalizar su página de inicio de sesión, para ayudarle a crear una experiencia única y personalizada para los miembros del sitio mientras se conectan a su sitio web.
- Incluya animación a sus diseños – El plugin incluye una amplia gama de animaciones y efectos CSS impresionantes que puede aplicar fácilmente a su sitio web y mejorar el diseño general y UX.
- Integración Unsplash – Con la integración nativa de Unsplash, usted podrá integrar fácilmente imágenes de alta calidad y libres de derechos de autor directamente a su sitio web, todo desde el enorme catálogo de imágenes de stock de Unsplash.
- Edición no destructiva – CSS Hero no hace ninguna modificación directa a los archivos de temas principales. De hecho, todos sus ajustes generan una sola hoja de estilo estática adicional diseñada para anular el CSS predeterminado de su tema.
- Optimizado para el rendimiento – El plugin junto con su código personalizado generado es súper ligero y no pone ninguna carga extra en su sitio web, lo que resulta en una degradación del rendimiento de siguiente a cero. El tiempo de carga de su sitio será el mismo que antes de instalar y usar el plugin.
CSS Hero – Interfaz de usuario
CSS Hero te da acceso a una experiencia de edición WYSIWYG de front-end que se verá similar a la que se muestra en la imagen de abajo:
Como puede ver, obtendrá una barra de herramientas en la parte superior que le da acceso a todas las opciones básicas, como el tamaño de la pantalla para la que desea editar, deshacer o rehacer opciones, crear puntos de control y mucho más.
El editor principal del Inspector se posiciona como una barra lateral en el lado izquierdo de la pantalla.
Dependiendo del elemento o módulo que esté editando, la interfaz mostrará diferentes opciones a las que puede acceder para iniciar el proceso de edición.
Aquí también es donde obtendrá acceso a la interfaz del editor de código. Una vez finalizada la personalización, puede pulsar el botón Guardar y publicar.
Alternativamente, si no desea publicar su trabajo en este momento, puede utilizar la opción Puntos de comprobación en la barra de herramientas superior para guardar su trabajo pero no publicarlo.
También tendrá acceso a una barra de herramientas inferior que le permitirá saltar rápidamente entre las diferentes secciones de su diseño, para que pueda personalizarlas rápidamente.
Sin embargo, también se le permite seleccionar específicamente el elemento HTML que desea editar y no tendrá que hacer su personalización en trozos.
Héroe de CSS – Precios
CSS Hero te ofrece dos modelos de precios diferentes para elegir, o bien puedes pagar un pago único con actualizaciones de por vida y soporte prioritario, o bien puedes acceder a uno de sus planes de suscripción anual.
El precio comienza desde $29/año, por lo que obtendrá una licencia para usar el plugin en un solo sitio web junto con el soporte técnico básico.
Actualizando el plan a $59/año se extenderá la licencia para 5 sitios web, y se recomienda para el webmaster promedio.
Y luego está el plan de $199/año dirigido a las agencias web y/o desarrolladores. Viene con soporte para WordPress Multisite y permite que el plugin se instale en 999 sitios web.
Sin embargo, si no le gustan estos modelos de suscripción, puede optar por la opción de pago único de $599, que le dará pleno derecho al plugin para utilizarlo en todos los sitios web que desee, junto con actualizaciones de productos de por vida y soporte técnico multisitio de WordPress.
¿Debería usar CSS Hero?
En resumen, CSS Hero es un excelente paquete de plugins de personalización en una gran cantidad de potentes funciones dentro de una interfaz de usuario intuitiva.
Los desarrolladores seguramente encontrarán que esta es una herramienta invaluable en su arsenal. Lo mismo ocurre con los webmasters que están cansados de buscar el diseño del tema correcto, y sólo quieren una herramienta de edición poderosa que les ayude a personalizar adecuadamente el diseño de su sitio web.
Además, recuerde que el plugin viene sin bloqueos y puede exportar fácilmente todas sus hojas de estilo desde un sitio web e importarlas a otro.
Por lo tanto, si usted puede sacrificarse en la conveniencia de hacer cambios directamente a la interfaz de su sitio web, usted puede obtener su plan base de $29/año, que es prácticamente un robo cuando usted piensa en ello.