Revisión de CSS Hero: ¡La personalización del tema de WordPress es fácil!

Ofertas de WordPress


Cuando se trata de hacer que un sitio web se vea exactamente como le gustaría, ¡la gran cantidad de diferentes temas de WordPress disponibles es una verdadera bendición! Y si pasa el tiempo suficiente buscando, es posible que pueda encontrar un tema que sea absolutamente perfecto para su sitio. Sin embargo, existe la posibilidad de que, aunque podrá acercarse a lo que desea, probablemente aún esté un poco alejado de la perfección. Después de todo, ¿puede un tema prediseñado realmente adaptarse a las necesidades de un individuo hasta una T? …

Entonces, ¿qué hacer si ha logrado encontrar un tema cercano a lo que desea, pero aún necesita hacer algunos cambios? Bueno, si tienes las habilidades requeridas, por supuesto, no hay problema: podrás modificarlo como quieras. Pero, ¿qué pasa si no tienes la confianza para entrar y hacer tus propios cambios en los archivos necesarios??

Hoy, me gustaría presentarle un complemento muy útil: CSS Hero, un complemento que le permite realizar personalizaciones visuales pequeñas, o incluso relativamente grandes, usted mismo: sin tener que tocar una sola línea de código!

¿Qué es CSS Hero??

CSS Hero es un complemento de personalización de temas (ver características.

CSS Hero

Como tal, ocupa un espacio similar al de arrastrar y soltar complementos del generador de páginas. Sin embargo, donde los creadores de páginas lo alientan a crear un diseño personalizado desde cero, CSS Hero le permite ajustar su tema de WordPress existente de la manera que desee.

Esto le permite jugar como desarrollador, sin necesariamente poseer ninguna de las habilidades de desarrollador que generalmente están involucradas. Continúa utilizando su tema de WordPress diseñado profesionalmente, ya sabe, el creado por un experto, no por alguien que está agregando módulos aleatorios, complementos al estilo de la página, mientras realiza pequeños ajustes para satisfacer sus necesidades..

Ningún elemento en el sitio está fuera de los límites: puede personalizar cualquier cosa y todo. CSS Hero convierte sus personalizaciones en el código CSS relevante, que luego se aplica a una nueva hoja de estilo CSS (la hoja de estilo original permanece intacta, evitando cualquier problema en el futuro).

CSS Hero también funciona con cualquier tema de WordPress. Aquellos ampliamente probados para la compatibilidad se conocen como Hero-ready, mientras que los temas no probados todavía son compatibles con el Modo Rocket.

Precios

CSS Hero es un complemento premium asequible. Para reflejar su competencia, tiene un precio a la par con los complementos más populares del creador de páginas.

Una licencia de inicio básica cuesta solo $ 29 y le da acceso al complemento CSS Hero completo (aunque está restringido para usar en un solo sitio web).

Si desea utilizar CSS Hero en más de un sitio web, sus opciones son:

  • Licencia personal ($ 59): hasta cinco sitios
  • Licencia Pro ($ 199) – hasta 999 sitios

Como puede imaginar, la licencia profesional está dirigida a agencias creativas y desarrolladores profesionales. Tanto las licencias personales como las profesionales también vienen con acceso al complemento premium, Inspector Pro: cubriremos esto con más detalle más adelante en la página.

Las tres licencias de CSS Hero son válidas por un año, otorgan acceso a las actualizaciones y soporte de un año, y vienen con una garantía de devolución de dinero de 30 días..

Empezando

Después de realizar su compra, se lo dirigirá al panel de control de CSS Hero. A partir de ahí, podrás acceder a la extensa documentación del complemento, además de la increíble Academia de Héroes CSS. La academia es un buen toque, con una serie de video tutoriales para principiantes diseñados para ayudarlo a aprovechar al máximo su nuevo complemento (me encantaría ver otros complementos avanzados que sigan su ejemplo).

Panel de CSS Hero

El panel realiza otra función importante: es donde descargas el CSS Hero y, según tu nivel de licencia, los complementos de Inspector Pro.

Con las descargas completas, inicie sesión en su panel de WordPress. Navega a Complementos > Añadir nuevo > Cargue el complemento, luego siga las instrucciones para cargar los archivos zip del complemento y active el complemento. Si alguna vez instaló un complemento de WordPress antes, todo esto le resultará muy familiar..

Sin embargo, la instalación de CSS Hero requiere un paso adicional: la verificación. Haga clic en el botón azul, luego siga las instrucciones mientras registra una de sus licencias. Hasta aquí todo bien.

Ahora, CSS Hero es una herramienta de edición de temas y, como tal, la edición se realiza en la parte frontal, donde puede ver los cambios en tiempo real. Acceda al front-end de su sitio y verá un nuevo ícono azul en la esquina superior derecha de la pantalla. Haga clic aquí para comenzar a usar su nuevo complemento.

CSS Hero Icon

CSS Hero Editor

Después de hacer clic en el ícono azul, tendrás que esperar unos segundos para que CSS Hero se encienda. Con el complemento activado, ahora puede comenzar a diseñar y personalizar su sitio web.

Para comenzar, simplemente haga clic en el icono azul en la parte superior del panel de opciones. Si no está seguro de cómo proceder, el complemento le proporcionará enlaces útiles que cubren todos los aspectos básicos. Sin embargo, si está listo para sumergirse directamente, puede comenzar a orientar y editar cualquier elemento en su página.

Desplácese sobre el elemento que desea editar, luego haga clic (vamos a comenzar mirando un párrafo de contenido relativamente básico, como se ve en la captura de pantalla a continuación). Una vez que se hace clic, CSS Hero bloqueará su elemento, lo que significa que puede comenzar a personalizarlo.

Elemento de destino CSS Hero

Para que el proceso sea lo más simple posible, CSS Hero le proporcionará una lista de opciones de personalización, según el tipo de elemento que haya elegido. Después de seleccionar un párrafo, mis opciones incluyen cambiar fuentes, fondos y bordes, y configurar el relleno alrededor del texto.

Editar los elementos es fácil, con todo controlado desde la barra de menú de la derecha, más los cambios previsualizados en tiempo real. Para comenzar, he decidido centrarme en las propiedades del texto. Con esta opción seleccionada, CSS Hero muestra todas las opciones disponibles para configurar el texto, incluyendo:

  • Cara de fuente: con cada fuente de Google disponible para seleccionar
  • Color de fuente
  • Tamaño de fuente
  • Peso de la fuente
  • Alineación del texto
  • Transformación de texto – por ejemplo, mayúscula
  • Espacio entre palabras
  • Altura de la línea

Realice los cambios que desee y vea cómo se aplican al texto una fracción de segundo más tarde..

Estilo de fuente CSS Hero

Luego puede regresar y configurar un fondo para su párrafo; nuevamente, CSS Hero le entrega el control total. Puede cargar una imagen personalizada, seleccionar un color o configurar un degradado para mostrar como fondo.

Gradiente de fondo CSS Hero

También tiene las mismas opciones para los bordes de párrafo, con total flexibilidad en el estilo, ancho y color del borde..

Estilo de borde de héroe CSS

Incluso hay algunos estilos geniales preconfigurados, por ejemplo, convertir el texto en un botón o mostrar un fondo listo en varios diseños geniales.

Estilos CSS Hero ReadyMade

Si prefiere no trabajar con los cambios de una sección a la vez, también puede seleccionar la opción todos, que enumera todas las opciones de personalización en una pantalla conveniente.

Deshacer cambios

A medida que realice cambios en el texto, CSS Hero los aplicará a la versión en vivo de su sitio web. Sin embargo, no se preocupe por hacer cambios permanentes en este punto: antes de aplicar los cambios, tiene la opción de borrarlos haciendo clic en cancelar, o para confirmarlos presionando el botón Guardar.

Sin embargo, incluso después de presionar guardar, no se quedará atrapado con los cambios no deseados. Para volver al original, regrese al nivel superior del menú CSS Hero, navegue a la sección de herramientas, luego seleccione la opción de restablecer la configuración predeterminada del tema.

También es posible restaurar un elemento individual a la configuración predeterminada de fábrica: simplemente haga clic en el elemento que desea restaurar, luego haga clic en el pequeño icono de restablecimiento ‘R‘ a la derecha del menú. Presione confirmar, y su elemento rebelde será restaurado a su antigua gloria..

Como mencioné antes, todas las personalizaciones se aplican a una hoja de estilo adicional. Si ocurriera lo peor, la hoja de estilo original de su tema permanecerá intacta. Esto significa que, sin importar los cambios que realice con CSS Hero, no se puede hacer daño a largo plazo. Si todas las demás opciones de restauración fallan, puede restaurar su tema predeterminado y dormir fácilmente!

Editar cualquier elemento

Una de las fortalezas de CSS Hero es que te permite editar cualquier elemento en tu página, sin importar cuán grande o pequeño sea.

Si observa el panorama general, puede editar la imagen de fondo, el estilo de la barra lateral y la sección de pie de página de su sitio.

Esto se logra utilizando el mismo proceso que usamos para editar nuestro párrafo, pero demuestra que CSS Hero se puede utilizar para realizar cambios fundamentales en la estética de su sitio. Echa un vistazo a la captura de pantalla a continuación, donde cambié el fondo de mi barra lateral, cambié los estilos de encabezado del widget y también volví a configurar el espacio. Aquí está el tiro básico antes:

Captura de pantalla de CSS Hero Before

Y aquí está después de mi ajuste: no soy diseñador, lo admito, pero esto tomó solo unos segundos para lograrlo..

Captura de pantalla de CSS Hero After

También puede personalizar pequeños elementos de contenido, como imágenes, colores de enlace y estilos de lista. Los estilos de lista son particularmente interesantes, porque puedes elegir viñetas personalizadas de la sección de listas dedicadas. Hay seis viñetas precompiladas compatibles, incluidos cuadrados, decimales y números romanos, o puede cargar sus propios iconos personalizados para un toque más personal.

Con suerte, esto le dará una idea de cómo puede revisar el diseño de su sitio. Su tema de WordPress proporciona la base, pero, gracias a CSS Hero, puede ajustar cada píxel de su sitio web a su gusto, sin tocar una línea de código.

Otras características

CSS Hero posee varias otras características interesantes sobre las que me gustaría llamar su atención.

Primero es el cambiador de vista. Con un creciente énfasis en el diseño receptivo, es importante que su sitio web funcione sin problemas en dispositivos de todas las formas y tamaños. CSS Hero viene con una función incorporada que le permite ver su sitio en escritorio, tableta y vista móvil.

Simplemente seleccione su vista preferida de la barra de herramientas (es la segunda opción hacia abajo) y deje que CSS Hero transforme su pantalla al tamaño apropiado. Esta es una excelente manera de probar los cambios que ha aplicado en dispositivos más pequeños.

Vista de tableta CSS Hero

A continuación, tenemos la importante función de historial. Cada vez que presiona el botón Guardar, CSS Hero almacena una instantánea de su sitio web. Estas instantáneas se pueden ver y restaurar con solo hacer clic en un botón, lo que significa que su trabajo duro nunca se pierde; simplemente puede saltar hacia adelante y hacia atrás en el tiempo.

Finalmente, tenemos la opción Exportar CSS, disponible en la sección de herramientas. Esto le brinda la oportunidad de exportar su CSS editado para usarlo en otro sitio web, o simplemente subirlo a la pantalla para estudiar los cambios que realizó (una de las mejores formas de aprender CSS).

Complemento Inspector Pro

Aquellos de ustedes que actualizaron a los planes personales o profesionales también obtienen el complemento CSS Hero Inspector Pro incluido con su licencia.

Anunciado en mayo de 2015, y recientemente fuera del modo beta, Inspector Pro está dirigido a usuarios de CSS más avanzados. Si bien CSS Hero es una herramienta que no requiere absolutamente ninguna habilidad de CSS, Inspector Pro ha sido desarrollado para aquellos que desean personalizar su sitio ajustando el CSS directamente.

Inspector Pro muestra el CSS de su tema debajo de la vista previa en vivo. Puede editar este código como desee y, a medida que lo haga, sus cambios se reflejarán en la vista previa. Al darle la posibilidad de editar el CSS directamente, este complemento le brinda control absoluto sobre sus personalizaciones, píxel por píxel.

CSS Hero Inspector Pro

Sin embargo, Inspector Pro también ofrece algunas funcionalidades útiles, por lo que nunca estará solo. Por ejemplo, puede saltar a una línea específica utilizando la útil función de búsqueda o deshabilitar líneas de estilo específicas para que los elementos superpuestos no se interpongan en el camino.

Si escribe su CSS desde cero, le encantará este complemento, ya que significa que ya no tendrá que pasar de una ventana a otra: puede hacer y ver todas sus ediciones en una pantalla. Práctico!

CSS Hero Support

Desde el momento en que inicia sesión en el panel de control de CSS Hero, puede ver que los desarrolladores se esfuerzan por ayudarlo a aprovechar al máximo su complemento.

Ya he mencionado la extensa documentación y la CSS Hero Academy (la academia está en pañales, pero hay planes concretos para continuar su expansión).

Estas dos secciones son increíblemente completas, y la academia incluye videos tutoriales útiles. CSS Hero puede parecer difícil de usar al principio, por lo que estos breves tutoriales en video me resultaron útiles para encontrar mis pies, después de lo cual, el complemento se sintió relativamente sencillo.

CSS Hero Academy

También hay una sección de documentación más avanzada, conocida como la Base de conocimiento de desarrolladores. Esto está dirigido a los desarrolladores de plugins / temas, que siguen los pasos necesarios para garantizar que sus productos sean totalmente compatibles con CSS Hero, es decir, listos para héroes..

Para aquellos que aún no pueden resolver sus problemas, a pesar de la documentación detallada, también hay un foro de soporte. Los miembros del personal de soporte de CSS Hero están disponibles para responder cualquier consulta, generalmente en cuestión de horas. Una licencia le otorga acceso de un año al foro y al equipo de soporte.

Foro de soporte CSS

En general, CSS Hero no puede ser criticado por sus esfuerzos de soporte. Los tutoriales preescritos y grabados son realmente útiles, y están salpicados a lo largo de la experiencia del usuario en los puntos donde es más probable que se necesiten..

A medida que los complementos de WordPress se vuelven cada vez más sofisticados, me gustaría ver a más desarrolladores siguiendo el ejemplo de CSS Hero, brindando soporte avanzado desde el primer momento, para que los usuarios sin experiencia nunca se sientan fuera de su alcance..

Pensamientos finales

En general, quedé realmente impresionado con CSS Hero. Con un potencial de personalización sin restricciones, este complemento podría haber sido abrumador fácilmente; sin embargo, debido a la interfaz inteligente e intuitiva (y tutoriales útiles), ha sido fácil de usar en todo momento.

Las opciones de personalización son infinitas, lo que le permite modificar su tema de cualquier manera que pueda imaginar. Esto le permite crear algunos diseños geniales y originales, utilizando los fundamentos de su tema, y ​​todo sin ensuciarse las manos con el código.

Sin embargo, CSS Hero no es solo para programadores aficionados. Inspector Pro es una herramienta emocionante para desarrolladores experimentados que buscan construir un sitio web desde cero.

El complemento hace que sea completamente factible que pueda construir un sitio desde cero, viendo su creación cobrar vida a medida que codifica, línea por línea. Sin embargo, de manera más realista, elimina las conjeturas de la personalización del tema, lo que ahorrará enormes cantidades de tiempo para los desarrolladores que realizan el trabajo del cliente..

En general, CSS Hero es un complemento superior, y uno que realmente debería atraer a los usuarios de WordPress de todos los niveles de habilidad. Si aún no lo has hecho, échale un vistazo!

(actualización – 16 de marzo – desde que escribimos esta publicación, CSS Hero nos ha proporcionado amablemente un especial código de cupón de descuento autorizando a los lectores de WinningWP hasta 40% de descuento – ver cupón.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map