¿Está planeando utilizar CSS Hero en su sitio de WordPress? En nuestra revisión práctica de CSS Hero, echaremos un vistazo a la última versión de CSS Hero, la versión 5, y le ayudaremos a decidir si es una buena opción para su sitio.
Si desea tener la capacidad de personalizar completamente el diseño de su tema o complementos de WordPress, debe usar CSS personalizado. Pero si no es un desarrollador, probablemente no tenga los conocimientos avanzados de CSS necesarios para realizar los cambios deseados.
CSS Hero resuelve este problema al ofrecerle un visual, sin códigos interfaz donde puede cambiar el estilo de cualquier elemento de su sitio, ya sea que provenga de su tema o complementos.
Básicamente, CSS Hero te da acceso a todo el poder de CSS personalizado, pero a través de una interfaz no técnica que lo hace accesible incluso si no puedes codificar CSS desde cero.
O, incluso si tu Hacer Sepa cómo CSS, CSS Hero puede ayudarlo a trabajar de manera más eficiente.
¿Quieres verlo con más detalle? Sigue leyendo nuestra práctica revisión de CSS Hero y te mostraré exactamente cómo es usar CSS Hero 5. Aquí está todo lo que cubriré:
Revisión de CSS Hero: una introducción rápida
En resumen, CSS Hero le permite personalizar completamente el diseño / apariencia de su sitio utilizando los cambios de CSS realizados a través de la interfaz visual para principiantes de CSS Hero.
Como se mencionó anteriormente, esta es la propuesta de venta clave:
Obtenga flexibilidad CSS personalizada, pero con la simplicidad de un editor visual.
En la última versión, CSS Hero 5, el equipo de CSS Hero reconstruyó el complemento desde cero utilizando un nuevo motor basado en React. El resultado de este nuevo enfoque de React es que la interfaz de backend será aún más rápida, lo que te ayuda a crear tus proyectos de manera más eficiente.
Para realizar cambios, todo lo que necesita hacer es hacer clic en el elemento que desea cambiar y puede usar comandos simples para realizar los cambios.
Si es un usuario ocasional que busca realizar algunos cambios simples en el diseño de su tema o complementos, esto podría estar muy lejos.
Pero para usuarios más avanzados, también puede aprovechar funciones como:
- Cambios receptivos
- Inspector de CSS y editor de código
- Variable CSS
- Editor de JavaScript
- Preguntas de los medios
Básicamente con CSS Hero 5: cómo usar el complemento
Ahora que sabe lo que CSS Hero tiene para ofrecer, comencemos con CSS Hero v. 5 y te mostraré cómo funciona.
Comenzaré por brindarle una descripción general de cómo funciona la interfaz y luego profundizaré en algunas características específicas.
Una mirada básica a la interfaz
CSS Hero no tiene un área de configuración separada, por lo que hará todo desde la interfaz. Puede iniciar la interfaz haciendo clic en Yo era CSS la opción en la barra de herramientas de WordPress.
La mayor parte de la interfaz es una vista previa en vivo de su sitio. Además, tendrá una barra lateral, una barra superior y una barra inferior, donde podrá acceder a la configuración de CSS Hero:
Si desea cambiar el diseño de cualquier elemento de su sitio, todo lo que necesita hacer es colocar el cursor sobre él en la vista previa en vivo. Aparecerá el selector, que puede usar para elegir el elemento correcto.
Una vez que haya seleccionado un elemento, verá muchas opciones en la barra lateral para personalizar el CSS para ese elemento:
Para tener más control sobre el elemento seleccionado, puede hacer clic con el botón derecho en lugar de hacer clic con el botón izquierdo.
Esto abre algunas opciones nuevas donde puede ver el árbol DOM o alternativas. Por ejemplo, en lugar de seleccionar el botón en sí, es posible que desee seleccionar div que el botón está adentro. Si hace clic con el botón derecho y arrastra la vista de árbol hacia arriba, puede seleccionar rápidamente la correcta div:
Opciones de personalización
Cuando selecciona un elemento personalizado, las opciones de CSS se dividen en doce categorías principales:
- antecedentes
- PRENSA
- fronteras
- Carrera fronteriza
- espaciado
- Para conmutar
- Filtros
- Lista de estilos
- Pantalla
- Adicional
- para medir
- Posición
Por ejemplo, si desea cambiar el color de fondo del botón, amplíelo antecedentes ajustes. Luego, puede usar un selector de color para cambiar el color.
Cuando seleccione diferentes colores, verá inmediatamente el cambio reflejado en la vista previa en vivo:
Si tiene problemas para encontrar la configuración correcta, también puede usar el cuadro de búsqueda. Por ejemplo, si busca «color», puede ver todas las diferentes propiedades CSS relacionadas con el color para cambiar el fondo, el color del texto, el borde, etc.
Para usuarios más avanzados, también puede realizar cambios directos a través del editor de código que aparece en la barra lateral. O, si no se siente cómodo trabajando con código, puede reducir el editor de código para tener más espacio en la barra lateral.
También hay una opción para elegir entre los estados «Activo» y «Hover». Si cambia a «Hover», recibirá las mismas opciones de CSS; estas solo se aplicarán si el visitante se desplaza sobre el elemento que está editando.
Vistas previas receptivas y cambios específicos del dispositivo
Hoy en día, es posible que desee utilizar diferentes opciones de diseño, según el dispositivo que esté navegando una persona. Es decir, dependiendo de si un visitante usa una computadora de escritorio, tableta o dispositivo móvil.
Para ayudar con el diseño receptivo, CSS Hero viene con algunas características diferentes.
Primero, puede usar la opción anterior para elegir rápidamente entre cinco modos de edición / vista previa receptivos:
- Todo (escritorio)
- El paisaje de la tableta
- Retrato en la tableta
- Panorama móvil
- Retrato móvil
Si realiza un cambio mientras se encuentra en uno de los modos de edición receptiva, ese cambio solo se aplicará a esa vista previa. y todos los tamaños de pantalla más pequeños que esa vista previa. Estos cambios serán No se aplica a cualquier tamaño de pantalla mayor que la vista previa.
Por ejemplo, si realiza un cambio en la vista previa «Todos», se aplicará a todos los dispositivos. Por otro lado, si realiza un cambio mientras obtiene una vista previa de su tableta, solo se aplicará a tabletas y dispositivos móviles (porque los dispositivos móviles son más pequeños que las tabletas). Y si realiza un cambio en la vista previa móvil, solo se aplicará a los dispositivos móviles.
Los cambios más específicos siempre tendrán prioridad. Por ejemplo, si realiza un cambio en ambos vistas previas para tabletas y dispositivos móviles, los dispositivos móviles utilizarán la configuración en la vista previa para dispositivos móviles, ya que esto es más específico.
Otra característica de vista previa de diseño verdaderamente receptiva es el nuevo código QR de vista previa móvil. Con esta función, puede ver un código QR que puede escanear en su teléfono. Después de escanear el código QR, podrá ver una vista previa en tiempo real de sus cambios en su dispositivo móvil real (antes de publicar esos cambios en su sitio en vivo).
Es una característica pequeña, pero creo que es bastante útil porque te permite ver cómo funcionarán los cambios en un teléfono inteligente o tableta real.
La herramienta Inspector
La herramienta Inspector es otra opción útil para usuarios más avanzados. Esencialmente, le da acceso al código CSS básico completo para su página, en lugar de tener que pasar por la interfaz CSS Hero.
Para usarlo, todo lo que tiene que hacer es cambiar a Inspector línea. Luego puede hacer clic en el elemento que desea cambiar para completar instantáneamente su selector de CSS en el editor de código, donde puede hacer adiciones directas a su código:
Apoyo para Variables CSS
Esta es otra característica avanzada. Pero si desea hacer muchos ajustes, le gustará que CSS Hero admita variables CSS.
Si no está familiarizado con las variables CSS, le ayudarán a crear plantillas coherentes y a aplicar ciertos cambios fácilmente. Por ejemplo, suponga que desea que todos los botones principales de su sitio tengan este código de color hexadecimal: # 123456.
En lugar de aplicar ese color manualmente, solo puede definir una variable CSS de «Botón principal» como ese color. Por lo tanto, cuando edite un botón, establezca su color igual al de la variable «CSS principal» en lugar de codificarlo en código hexadecimal.
La ventaja de hacer las cosas de esta manera es que si desea cambiar el color del botón principal en el futuro, todo lo que tiene que hacer es cambiar la variable y ese cambio se aplicará inmediatamente donde se refiera a esa variable.
Puede definir sus propias variables desde Proyecto menú:
Para insertar una variable, simplemente haga clic en @ símbolo en la barra lateral junto a un ajuste. También puede guardar una configuración existente como una nueva variable:
Deshacer / Rehacer, Diferencial de código e Historial de revisiones
Para ayudarlo a corregir sus errores, CSS Hero incluye botones Deshacer / Rehacer y un historial de revisión completo:
También hay un navegador de edición que le permite ver rápidamente una lista de todos los cambios que ha realizado, desglosados por consulta de medios:
Y si realmente desea profundizar en las cosas, puede ver una vista de código diferencial que le permite ver exactamente qué ha cambiado.
Editor de JavaScript e inspector de páginas
A partir de CSS Hero 5, se ha ido solamente para CSS. CSS Hero ahora incluye su propio editor de JavaScript. Además de permitirle agregar su propio código, el editor de JavaScript también puede ayudarlo a integrar bibliotecas populares:
Además del editor de JavaScript, también puede activar Inspector de página, que le permite ver el HTML básico de su página (incluso si no puede editar el HTML).
Integraciones Unsplash y Coverr
La última característica específica en la que quiero entrar son las integraciones multimedia de CSS Hero.
Si necesita insertar contenido multimedia en su diseño, CSS Hero tiene dos integraciones útiles:
- Unsplash para obtener imágenes gratis.
- Coverr para fondos de video gratis.
Así es como es fácil insertar un fondo de video Coverr:
Esta es una característica más de nicho, pero creo que es una gran adición a CSS Hero 5.
Rendimiento del héroe CSS
Después de ver todo lo que CSS Hero puede hacer, es posible que se pregunte si CSS Hero ralentizará su sitio con todas estas nuevas opciones de diseño.
La respuesta es no. La huella de CSS Hero es mínima. Simplemente agrega un solo archivo CSS estático a la interfaz de su sitio, que solo está allí porque necesita ese archivo para agregar realmente sus personalizaciones de CSS.
Pero aquí está lo genial:
Si todavía le preocupa el rendimiento de CSS Hero, de hecho, puede deshabilitar el complemento una vez que haya terminado de usarlo manteniendo todos los cambios.
¿Como funciona?
Bueno, CSS Hero te permite exportar todas tus personalizaciones de CSS como código sin formato. Entonces significa que puedes:
- Utilice la interfaz visual de CSS Hero para personalizar su sitio tanto como desee.
- Exportar código CSS (una vez que hayas terminado).
- Desactive el complemento CSS Hero.
- Agregue CSS a su sitio utilizando su método preferido, como la hoja de estilo CSS de su hijo, la CSS adicional pestaña en el Personalizador de WordPress, complemento CSS simple, etcétera.
Creo que este flujo de trabajo es especialmente útil si eres un diseñador que crea sitios web para clientes. ¿Por qué? Porque puede usar CSS Hero para acelerar su flujo de trabajo al crear sitios de clientes, pero luego puede entregar el sitio de su cliente sin ningún rastro de que CSS Hero estuvo allí.
Preguntas frecuentes CSS Hero
Al final de nuestra revisión de CSS Hero, repasemos algunas preguntas frecuentes que puede tener …
¿CSS Hero funciona con un tema de WordPress?
¡Sí! CSS Hero debería funcionar con todos los temas de WordPress. Tambien es ha sido especialmente probado para funcionar con temas populares como Astra, OceanWP, GeneratePress, Divi, Avada y otros.
¿CSS Hero funciona con complementos de generación de páginas como Elementor?
¡Sí! CSS Hero debería funcionar con la mayoría de los complementos de generación de páginas. El desarrollador también tiene específico Lo he probado para que funcione con Elementor, Visual Composer y Beaver Builder.
¿CSS Hero funciona con WooCommerce?
¡Sí! CSS Hero ha sido probado especialmente con WooCommerce y funciona muy bien. Puede personalizar fácilmente sus productos individuales, las páginas de la tienda y el carrito de la compra / pago.
¿CSS Hero ralentiza tu sitio?
¡No! CSS Hero solo agrega un único archivo CSS estático a la interfaz de su sitio, lo que significa que no ralentizará su sitio.
¿Puedes desactivar CSS Hero después de personalizar tu sitio?
¡Sí! Una de las cosas interesantes de CSS Hero es que te permite exportar todas tus personalizaciones de CSS. Entonces, si desea deshabilitar el complemento una vez que haya terminado, todo lo que necesita hacer es exportar el CSS y agregarlo manualmente a su sitio.
¿CSS Hero realmente cambia el tema?
¡No! Rostro del héroe CSS No Realice cualquier cambio en los archivos de tema de WordPress reales (o archivos de complemento). En su lugar, agregue uno uno nuevo archivo CSS estático que contiene todos los cambios realizados.
Si deshabilita CSS Hero, su sitio volverá exactamente como estaba antes de usar CSS Hero (a menos que exporte el código y lo agregue manualmente, como se mencionó anteriormente).
¿CSS Hero es gratis?
No, CSS Hero solo está disponible en una versión premium (pero sigue siendo bastante asequible).
¿Existen buenas alternativas a CSS Hero?
Hay alternativas de CSS Hero, pero no tantas. En cuanto a un editor visual de estilo CSS como CSS Hero, una de las alternativas más populares es Lapiz amarillo (nuestra revisión), que cuesta $ 26 (y también tiene una versión gratuita limitada). Sin embargo, personalmente, prefiero CSS Hero 5 en lugar de YellowPencil. SiteOrigin CSS también es una alternativa gratuita popular, aunque carece de algunas funciones avanzadas y la interfaz no es tan agradable.
Precios de CSS Hero
CSS Hero solo está disponible en una versión premium, pero es bastante asequible, especialmente si solo lo necesita en un sitio.
Por un año de soporte / actualizaciones, pagará lo siguiente:
- 1 sitio – 29 USD
- 5 sitios – 59 USD
- 999 sitios – 199 USD
También hay un plan de pago único que ofrece soporte y actualizaciones de por vida y use hasta 999 sitios por $ 599.
Para ahorrar dinero, puede utilizar nuestro exclusivo código de descuento CSS Hero con un 40% de descuento.
Reflexiones finales sobre CSS Hero
En general, me siento bastante seguro cuando digo que CSS Hero es el mejor editor visual de CSS para WordPress … al menos el mejor que he usado (y probé las opciones populares).
Tiene las mejores características, la mejor interfaz y todavía tiene un precio competitivo (aunque no tiene una versión gratuita como algunas alternativas).
Entonces, en términos de la respuesta a «¿Css Hero es bueno?» Cuando se le preguntó en nuestra revisión de CSS Hero, creo que la respuesta es sí.
Sin embargo, la segunda pregunta importante es «¿Debería utilizar CSS Hero?».
Creo que hay dos tipos principales de personas que pueden beneficiarse de CSS Hero:
- Usuarios ocasionales que desean realizar algunos cambios básicos en sus temas o complementos, pero no están familiarizados con CSS.
- Desarrolladores / diseñadores que construyen sus propios Sitios de WordPress para ganarse la vida y saber cómo funciona CSS, pero buscan una herramienta para acelerar sus flujos de trabajo.
Creo que CSS Hero maneja muy bien ambas situaciones. Los usuarios ocasionales solo pueden permanecer en la interfaz visual, mientras que los usuarios más avanzados pueden beneficiarse de las variables CSS, el inspector, el editor de JavaScript, etc.
Además, no hay problemas de rendimiento de los que preocuparse, ya que siempre puede exportar su código y deshabilitar CSS Hero cuando haya terminado.
En general, recomiendo encarecidamente CSS Hero si está buscando un editor visual de CSS para WordPress.
Si decide comprar, asegúrese de utilizar nuestro cupón CSS Hero para ahorrar dinero.
Obtén CSS Hero ahora
¿Tiene alguna pregunta sobre CSS Hero o nuestra revisión de CSS Hero? ¡Dinos en los comentarios!
Fuente: wpkube
Comentarios recientes