in ,

Revisión de CSS Hero: quitando el dolor de la personalización de WordPress

Ningún sitio web está completo sin un diseño que capte y mantenga la atención de tus lectores. Pero con tantas opciones de temas de WordPress disponibles en el mercado, puede ser abrumador tratar de decidir cuál usar.

¿Cómo sabes qué tema es el mejor para ti sin probarlo primero?

¿Qué pasa si necesitas hacer personalizaciones extensas, pero tienes un presupuesto limitado?

O, ¿qué pasa si tus habilidades de diseño son muy deficientes y no tienes experiencia en codificación, pero contratar a un profesional caro para que haga el trabajo por ti está fuera de discusión?

Cualquiera de estas situaciones se podrían aplicar. De hecho, yo mismo he estado así.

Pero, ¿y si te dijera que hay una herramienta que podría ayudarte a hacer los cambios de diseño que necesitas para tu sitio web, sin tener que tocar una sola línea de código, contratar a un diseñador o romper el banco?

Pues prepárate, porque eso es lo que estoy a punto de hacer.

Conoce CSS Hero, un plugin de WordPress que te ayudará a personalizar fácilmente tu tema de WordPress en tiempo real.

Hoy veré lo que CSS Hero puede hacer probándolo yo mismo. Te mostraré lo fácil que es cambiar la apariencia de tu sitio web, con solo unos pocos clics, y cómo puedes usarlo para inyectar nueva vida a un tema estándar de WordPress.

¿Qué es CSS Hero y cómo funciona?

Similar a un creador de páginas, CSS Hero funciona al permitir seleccionar y modificar elementos de tu sitio web utilizando un editor visual en vivo. El editor se muestra en la parte frontal de tu sitio web. Y atención a esto, personalizar cada elemento en tu sitio web es tan simple como apuntar y hacer clic.

CSS Hero aplica personalizaciones por separado a tus estilos de tema originales mediante la generación de una hoja de estilos CSS adicional. Esta es una gran noticia si deseas editar tu tema de WordPress sin tocar ningún código en tus archivos de tema. Después de todo, meterse con el código del que no sabes nada puede llevar a la temida pantalla blanca de la muerte de WordPress. En otras palabras, podría bloquear tu sitio, arruinar la experiencia del usuario para los visitantes del sitio y perder mucho trabajo duro.

En su lugar, el nuevo código reemplaza al antiguo, pero lo deja intacto y disponible si deseas volver a tu código predeterminado más adelante.

Además, gracias a su amplia compatibilidad con muchos de los temas de WordPress más populares, no debes esperar encontrarte con ningún conflicto.

CSS Hero juega bien con temas como Twenty Nineteen, todos los temas de Genesis y Divi. Aquí hay una lista completa de temas compatibles.

Las características clave incluyen:

  • Personalizar fuentes con fuentes web de Google
  • Selector de color para elegir la paleta de colores perfecta
  • Los controles deslizantes cambian los márgenes, las alturas de texto y los anchos de columna
  • Efectos especiales como degradados, transiciones y sombras
  • Salida CSS limpia y minimizada
  • Historial completo de cambios para deshacer fácilmente
  • Modos de vista previa con capacidad de respuesta para una amplia gama de tamaños de pantalla
  • Confirmar ediciones en dispositivos específicos
  • Estilo de página de inicio de sesión de WordPress
  • Personalizaciones del sitio como «usuario no vinculado»
  • Guarda puntos de control, o instantáneas,de ediciones y envía tus favoritos en vivo
  • Opción de restablecimiento para volver a poner todo en modo predeterminado

Hay tanto potencial en este plugin que estoy seguro de que hay mucho más que puedes descubrir a través del uso y la experimentación.

¿Cuánto cuesta CSS Hero?

En términos de precios, CSS Hero no es tan caro. Hay cuatro planes de precios disponibles, todos los cuales se adaptan a diferentes necesidades y requisitos.

Sin embargo, una cosa a tener en cuenta antes de comprar este complemento es que todos los paquetes incluyen solo un año de actualizaciones y soporte. Esto significa que si deseas tener acceso continuo a las actualizaciones y el beneficio adicional de usar el equipo de soporte, deberás renovar tu licencia al final de cada año.

Aquí hay un desglose rápido de los precios de CSS Hero:

  • Plan de inicio (29 $/año): para uso en 1 sitio.
  • Plan personal (59 $/año): para 2-5 sitios y excelente para editores con múltiples sitios web.
  • Plan Pro (199 $/año): hasta 999 sitios y perfecto para aquellos que dirigen agencias web y administran una tonelada de sitios web.
  • Lifetime Pro (599 $ pago único): hasta 999 sitios, actualizaciones y soporte de productos de por vida, y WordPress Multisite

Entonces, dependiendo de cuántos sitios de WordPress tengas, CSS Hero tiene un plan para ti.

Pero, ¿qué pasa con el uso real del complemento? Veamos cómo nos fue cuando lo probé en uno de mis propios sitios web.

Revisión de CSS Hero

Comenzar con CSS Hero es simple. Lo primero que deberás hacer es comprar y descargar el complemento CSS Hero y luego cargarlo en tu sitio de WordPress como lo harías con cualquier otro complemento.

A continuación, deberás activar el complemento siguiendo las indicaciones en pantalla. Esto implica hacer clic en el botón Obtener mi clave ahora en tu panel de WordPress, iniciar sesión en tu cuenta de CSS Hero y conectar tu sitio de WordPress al complemento.

Cuando tu licencia esté activada y lista para comenzar, verás tu sitio en la lista del panel de CSS Hero en Tus licencias activas.

Cuando estés listo para usar CSS hero para personalizar tu sitio web, comienza por obtener una vista previa de tu página, publicación o sitio web. Para este ejemplo, voy a obtener una vista previa de una publicación de blog.

En la parte superior de la pantalla de vista previa, verás un icono de lápiz con la etiqueta Personalizar con CSS Hero. Haz clic en él para iniciar CSS Hero y comenzar a personalizar los elementos de tu sitio web de WordPress.

Para el propósito de esta revisión, estoy usando el tema WordPress Twenty Sixteen. Este es un gran tema para probar el complemento, ya que está en la lista de temas compatibles.

Cómo hacer personalizaciones de CSS Hero

Para mostrarte cómo funciona CSS Hero, voy a comenzar personalizando el fondo de mi publicación de blog.

Lo haré haciendo clic en el área de mi publicación de blog que quiero cambiar. Esto abrirá una barra lateral de opciones donde puedes realizar los cambios que desees.

Para personalizar el color de fondo de mi publicación de blog, haré clic en el elemento de menú etiquetado Como fondo. Hacer esto abre otras opciones de personalización de configuración que puedo usar para realizar los cambios deseados.

Cuando hago clic en la opción Color, se me presenta un selector de color. Todo lo que tengo que hacer es elegir el color que quiero. Inmediatamente, el color de fondo de mi publicación de blog cambia. Si me gusta el cambio, haré clic en Aceptar. Esto hará un cambio en tiempo real a mi publicación de blog ya publicada.

Recuerda, el fondo es solo una sección que puedo personalizar. También puedo hacer cambios en:

  • Tipografía
  • Fronteras
  • Bordes-radio
  • Espaciamientos
  • Transformar
  • Filtros
  • Listas

También hay un lugar donde puedes crear personalizaciones que se pueden usar una y otra vez en todo tu sitio. Por ejemplo, crea un estilo de botón global o cambia los fondos, los efectos de desplazamiento y más.

Y si deseas ser realmente creativo, incluso puedes personalizar los efectos de desplazamiento que ven los visitantes de tu sitio a medida que interactúan con tu contenido utilizando la sección Animaciones. Define cosas como el efecto de revelación, la flexibilización, el retraso y la duración de la animación y aplícalo fácilmente a tu sitio web en cuestión de segundos.

Y hagas lo que hagas, no te preocupes por hacer un desastre en tu sitio web. Como te mostraré un poco más adelante, todo se puede deshacer y restaurar a tu configuración predeterminada, por lo que no hay razón para evitar un poco de experimentación.

Todo está en los detalles

Una personalización popular que a la gente le encanta hacer en su sitio web es cambiar el color de los hipervínculos dentro de una publicación de blog. Ahora, esto puede parecer una simple solicitud para las personas familiarizadas con la edición de CSS, sin embargo, si no tienes conocimiento de ello, puede ser bastante intimidante, especialmente sin CSS Hero.

Con CSS Hero puedes profundizar en los elementos más pequeños de una página (como enlaces) y personalizarlos como quieras. Sin codificación, sin reescritura de hojas de estilo. Simplemente apunta, haz clic y guarda.

¿Quieres saber cómo hacer esto?

Comienza haciendo clic en la sección de la pantalla que contiene tu hipervínculo. A continuación, coloca el mouse directamente sobre el hipervínculo que deseas personalizar y haz clic derecho en él.

Verás aparecer un pequeño cuadro. Haz clic en la opción Sólo este elemento. Esto le dice a CSS Hero que cambie solo este elemento.

A continuación, haz clic en la sección Tipografía en la barra lateral y elige el color que deseas que sea tu hipervínculo desde el selector de color.

Si deseas cambiar todos los hipervínculos de la publicación al mismo color, en lugar de elegir Solo este elemento cuando hagas clic derecho en un enlace, haz clic en el enlace de entrada-contenido. Luego, haz clic en Tipografía y elige el color del enlace en el selector de color.

Como puedes ver, cambiar los elementos de tu sitio con CSS Hero realmente solo implica hacer clic, cambiar y guardar.

¿Estás interesado en agregar código real a la hoja de estilos CSS que CSS Hero crea?

Haz clic en la pestaña Inspector cerca de la esquina superior izquierda del editor CSS Hero y agrega tus fragmentos de código directamente a la sección inspector.

Restauración al código predeterminado

Puede llegar un momento en que desees restaurar un sitio personalizado a tu configuración predeterminada. Pero tal vez desees exportar tus cambios a otro sitio web primero porque es un sitio cliente y estás listo para comenzar.

Con CSS Hero puedes hacer precisamente eso usando un proceso muy sencillo.

CSS Hero minifica cualquier cambio que realices en tu sitio y crea una nueva hoja de estilo para mantenerlos. Esto da la libertad de exportar fácilmente esos cambios a cualquier lugar que desees.

Para hacer esto, comienza cambiando las pestañas en el editor CSS Hero. En la esquina superior izquierda, haz clic en la pestaña Inspector.

Desde allí, haz clic en CSS o CSS minificado (lo que prefieras) cerca de la parte inferior del editor en la sección Exportar, y observa cómo se agrega automáticamente a tu portapapeles. A partir de ahí, puedes pegar tu nueva hoja de estilo en cualquier lugar que desees, como el sitio web de un cliente.

Una vez que hayas exportado los cambios de forma segura, puedes restablecer todo para devolver el tema a su estado original.

Para hacer esto, haz clic en Herramientas y restablecer ediciones de temas en la esquina superior derecha del editor CSS Hero.

Aparecerá una casilla de confirmación para verificar que esté 100% seguro de que deseas restablecerlo. Haz clic en Aceptar y tu pantalla se actualizará para mostrar tu sitio web tal como estaba antes de comenzar a personalizar.

Soporte y documentación

Mirando el lado del soporte, me complace decir que estoy impresionado con el esfuerzo realizado para proporcionar tanta ayuda e información como sea posible. La documentación es fácilmente accesible desde el sitio web de CSS Hero y contiene una gran cantidad de tutoriales para usar cada una de las configuraciones del complemento.

Para obtener soporte personal con el complemento, se recomienda que utilices una serie de métodos de comunicación para obtener ayuda y resolver tus problemas. Puedes enviar un correo electrónico al equipo para obtener asistencia utilizando el formulario de contacto público, enviar un ticket de soporte en tu cuenta de CSS Hero o atrapar al equipo en Facebook y Twitter.

Como mencioné anteriormente, las actualizaciones y el soporte para CSS Hero solo están disponibles durante un año después de la compra. Puedes continuar usando el complemento en sitios donde ya lo has instalado y activado, sin embargo, no te beneficiarás de las actualizaciones clave de los archivos de complementos y el soporte disponible del equipo de CSS Hero a menos que continúes pagando la tarifa de renovación anual.

Reflexiones finales

He usado CSS Hero antes en algunos de mis otros sitios web. Sin embargo, esto fue poco después de su lanzamiento inicial. Desde entonces, he visto muchas mejoras que me han permitido seguir disfrutando de este plugin.

Parece ser mucho más rápido de lo que recuerdo anteriormente, la interfaz de usuario se ve mejor y es más fácil de navegar, y por supuesto, es compatible con muchos más complementos y temas de WordPress. Sin mencionar que exportar mi trabajo (¡incluso el tipo que hago en código real!) a otros lugares es súper simple ahora gracias a la funcionalidad de exportación con un solo clic.

Una cosa que vigilaría es el sitio web de CSS Hero. A menudo hay grandes descuentos en sus diferentes planes de precios, que puedes aprovechar para ahorrar algo de dinero.

En general, CSS Hero es liviano, fácil de usar y elimina el dolor de personalizar tu tema de WordPress. Si ya tienes algunas habilidades en diseño, este complemento hará que el proceso sea mucho más rápido, mientras que los usuarios con cero experiencia finalmente pueden personalizar sus sitios sin pagar una fortuna en tarifas de diseño web.

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

15 complementos de Real Estate Plugins imprescindibles para sitios de WordPress

Cómo cambiar de Wix a WordPress (Guía paso a paso)