CSS Hero para WordPress: aliado o enemigo para su sitio ?

CSS Hero - Plugin WordPress
He querido probar durante mucho tiempo CSS Hero para WordPress !

Ya sabes, ese complemento premium que te permite modificar cualquier elemento en tu página web sobre la marcha desde la parte frontal de su sitioBueno, ya está hecho desde que Fabrice me dio esta oportunidad. En este artículo, lo descubriremos juntos ….

Descripción general del complemento CSS Hero

Primero, tendrá que comprar una licencia El sitio web oficial de CSS Hero, luego puede descargar las carpetas de complementos para enviarlas a su servidor a través de FTP o directamente desde la carga de extensión disponible en la administración de su sitio. Finalmente, deberá activar el complemento usando su clave personal. Ahora, cuando vaya al lado frontal de su sitio, verá aparecer un nuevo botón azul, con un icono de “relámpago”, en la esquina superior derecha de su pantalla.

CSS Hero - Front End

Al hacer clic en él, activará CSS Hero y aparecerá un menú vertical. Es a partir de esto que puede comenzar sus personalizaciones … Este menú está compuesto por 9 pestañas que volaremos juntas :

1). El editor principal

Inspector CSS Hero - 1
Cuando selecciona esta herramienta, puede volar sobre su página y cada elemento modificable resaltará. Como resultado, puede comenzar fácilmente su personalización. Tenga en cuenta que hay muchas opciones y deberá colocar sus cambios en el lugar correcto.

2). El inspector profesional

Inspector CSS Hero - 2
Al seleccionar esta herramienta, aparecerá una ventana en la parte inferior de su pantalla y le dará la oportunidad de escribir su CSS usted mismoEs a partir de aquí que administrará las “Consultas de medios”, las reglas CSS inherentes a cada tipo de pantalla. Además, puede exportar su código de forma básica o minimizada. Esta herramienta es, con mucho, la más efectiva y eficiente que ofrece CSS Hero, sin embargo, solo está disponible en la versión “personal” a $ 59 ht / año.

3). Modo “Dispositivo”

Inspector CSS Hero - 3
Esta herramienta también le permitirá administrar sus diferentes tipos de pantalla, pero a diferencia del “inspector profesional” visto anteriormente, aquí no podrá escribir el código manualmente. Luego pasará por la herramienta “editor principal” para seleccionar su elemento y modificarlo a través de las opciones ofrecidas.

4). La historia de los cambios

Inspector CSS Hero - 4
Esta herramienta enumera el historial de los cambios que ha realizado. Puede encontrar fácilmente sus diferentes versiones según la fecha y la hora de sus copias de seguridad. Ciertamente puede ayudarte.

5). Los preajustes

Inspector CSS Hero - 5
Con esta herramienta, podrá guardar configuraciones, estilos “prefactos” para usarlos más adelante, en otras páginas, por ejemplo, permitiéndole mantener una homogeneidad del diseño y ahorrar tiempo.

6). Las herramientas

Inspector CSS Hero - 6
La pestaña “Herramientas” le ofrecerá 3 opciones:

  • el primero es recuperar los estilos predeterminados de su tema (en caso de que no esté satisfecho con el resultado obtenido),
  • el segundo te permitirá borrar tu historial
  • el tercero le dará la oportunidad de ver el código CSS generado de forma básica o minimizada y posiblemente exportarlo (copiar y pegar).

7). La pestaña de uso compartido, modo de pantalla completa y cierre del complemento.

Inspector CSS Hero - 7/8/9
Estas últimas tres pestañas le permitirán promocionar CSS Hero en sus redes sociales, cambiar al modo de pantalla completa y salir del modo CSS Hero para volver al modo normal.

Si quieres saber más sobre CSS Hero, mira este video :

Los beneficios de usar CSS Hero

Por supuesto, hay ventajas en usar CSS Hero !

Especialmente si no sabe nada sobre CSS y HTML y no desea profundizar el tema, sino también lograr cambiar ciertos elementos que dificultan la tarea al intentar modificarlos de la manera tradicional …

También podemos usar ciertos estilos prefactivos, es una opción bastante agradable … Sin olvidar que es muy fácil de revertir si la representación final no nos conviene gracias a la pestaña dedicada a “versión” (historial de cambios) o al botón “descanso”.

Finalmente, con CSS Hero, es realmente fácil definir las reglas CSS asociadas con cada tipo de pantalla, la escritura de la parte responsable administrada por Las consultas de los medios entonces se convierte en una brisa …

Las desventajas traídas por CSS Hero

El primero de los inconvenientes es sin duda el precio ! De hecho, será necesario suscribirse a una licencia anual de 29 $ ht para poder usar CSS Hero en 1 sitio individual, “el inspector profesional” por otro lado llega a los sitios de fórmula 5 por 59 $ ht por año.

No es realmente excesivo, pero lo que me molesta es el hecho de que los estilos CSS generados se almacenan en el complemento … Significa que si desactiva el complemento en el sitio y … SORPRESA ! Su personalización desaparece como la nieve al sol ! Esto implica que deberá renovar su suscripción cada año a menos que exporte el CSS generado para almacenarlo dentro de sus archivos temáticos.

Luego nos hacemos la pregunta “existencial” del peso generado por el complemento … Así que hice una pequeña prueba de Pingdom. Aunque tampoco soy especialista en el tema, el resultado es inequívoco: en una página simple, donde realicé menos de una docena de acciones usando CSS Hero, el tiempo de carga casi se duplicó de 498 ms a 916 ms y se agregaron 4 solicitudes, la prueba a continuación :

Prueba de herramientas de pingdom

Finalmente, tenga en cuenta que CSS Hero puede estar en conflicto con su sitio ! Así que piensa en revisar compatibilidad con tu tema y tus complementos antes de comprarlo.

Y si no … Cómo modificar el CSS sin CSS Hero ?

Inspector Firefox

Sin embargo, tendrá el método anterior correcto ! Si es nuevo en la web y especialmente en WordPress, sepa que puede lograr el mismo resultado obtenido con CSS Hero en solo 5 pasos:

  1. En el lado frontal, haga clic derecho en el elemento que desea modificar y elegir “Examinar el elemento” (bajo Firefox) o “Inspecto” (bajo Chrome). Se abrirá un letrero.
  2. Seleccione el pequeño símbolo del inspector, colocado en la parte superior izquierda del panel.
  3. Vuela sobre tu página hasta que resaltes el elemento que deseas modificar. Haz clic en él.
  4. A la derecha del panel, puede realizar sus cambios para obtener un resultado en tiempo real. No tenga miedo de cometer errores, el inspector no actúa en su sitio, solo realiza cambios en el navegador …
  5. Luego puede informar estos resultados a la pestaña Apariencia> Personalizar> CSS adicional en la administración de su sitio de WordPress.

No me estoy ocultando de ti que necesitarás tener algún conocimiento … Puedes dar un paseo en este sitio que explica muy bien el mecanismo del lenguaje CSS o, por supuesto este que es una referencia en el asunto …

Como beneficio adicional: CSS Hero Animator

CSS HERO Animator

Mientras navegaba por el sitio CSS Hero, descubrí la existencia de un complemento gratuito que facilita la adición de cualquier animación CSS a cualquier elemento de la página. Me recordó una nota que escribí hace un tiempo sobre cómo integrar animaciones usando Animate CSS. Habiendo probado ambos, creo CSS Hero Animator muy efectivo ya que hace que la integración sea ultra fácil y le ahorrará tiempo !

En conclusión

Siempre hay dos escuelas: a favor / en contra, y esto, para cualquier área ! Sin embargo, CSS Hero planteó algunas ideas :

  • Si se utiliza la versión “1 sitio”, ¿será suficiente ya que el inspector profesional no está incluido en la oferta? ?
  • si se suscribe a la versión de “5 sitios” o incluso a la versión de “999 sitios”, se supone que es un “profesional”, ¿verdad? ? Entonces, ¿realmente necesitaremos este complemento en este caso? ?

De hecho, lo ideal sería que el inspector profesional esté disponible por separado de CSS Hero …
Y tú, ¿qué te parece? ?

Te puede interesar:  Sitios web de hoteles: los mejores recursos de WordPress

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Share This