¿Qué tal personalizar Live WordPress Theme en tiempo real? Bueno, CSSHero es un complemento para realizar cambios de manera fácil
Publicado: 2016-04-07WordPress es un marco de CMS, lleno de personalización y proporciona un montón de API y ganchos que cualquier desarrollador podría usar para modificar temas y complementos. Esa es la razón por la que actualmente tenemos la opción de elegir complementos entre miles de complementos disponibles en el repositorio oficial de WordPress.
En esta publicación, discutiremos el nuevo complemento CSSHero
con todos los detalles. Pero antes de comenzar, concentrémonos en these questions
.
- ¿Cómo
make live changes
en su sitio de WordPress? - ¿Cambios de tema en tiempo real?
- ¿Hay alguna manera fácil de saber el número de propiedades CSS para el tema de WordPress?
- Edite su blog de WordPress con vistas previas en tiempo real
- Personalización de temas de WordPress antes de que estén en vivo
Si tiene alguna de las preguntas anteriores, entonces está en el lugar correcto.
Si desea realizar cambios en vivo por sí mismo without any help
del complemento, debe conocer casi ~300 of CSS properties
. Es casi imposible modificarlos para ver cambios reales en el modo de tema en vivo. El customizer
de WordPress le permite modificar algunas de las propiedades, pero no todas, y ese es el verdadero problema que tenemos.
Diría que tenemos DOS opciones:
Opción-1) Realizar cambios de CSS manualmente
- Abre tu blog en Chrome / Mozilla
- Haga clic derecho en los elementos CSS, como encabezado, publicación, imagen, etc.
- Haga clic en
Inspect
para ver las propiedades de CSS - Haz cambios para ver el efecto
- Una vez que esté bien, vaya al archivo
style.css
del tema y guarde los cambios - Repite el proceso varias veces
Opción-2) Usar complemento con funcionalidad integrada, en nuestro caso es CSSHero
- Realizar cambios en el
live site
con el editor - Ver resultado en vivo
- Haga clic en
Save button
ydone
CSSHero en colaboración con Crunchify, regalando
10 free Licenses
a los lectores de Crunchify. Llenareste formulario de googlepara obtener su nombre en la lista. – Sorteo FINALIZADO
Instalemos CSSHero y realicemos cambios de tema de WordPress en vivo
NOTE
: Consulte el video completo al final de esta publicación.
Paso 1
¿Por qué CSSHero? CSSHero es un complemento premium
de WordPress. La licencia básica comienza con $29/site
. Yo diría que si eres un principiante o un profesional, vale la pena intentarlo. Viene con 30 days
de garantía de devolución de dinero.
Usa el código
CRUNCHIFY
para obtener un34% off
en los planes Starter, Personal y40% off
en el plan Pro.
Registre su licencia y descargue la última versión del CSSHero plugin
desde su tablero: http://www.csshero.org/
Paso 2
- Instálalo desde tu panel de administración de WordPress y actívalo
- En la activación le pedirá
Key
- ¡Simplemente haga clic en
Get my Key Now!
botón y se abrirá una página con la clave de licencia - Haga clic en
Get License
y ya está todo listo.
Punto-1) Comencemos con la funcionalidad
- Ahora vaya a la
home page
de su blog y verá el botón animado CSSHero en la esquinatop right
. - Haga clic en eso y el complemento cargará
control panel
que funciona con su tema
Eche un vistazo al siguiente gif con todas CSSHero options
:
Punto-2) Opción Editor de temas CSSHero
La idea para el theme editor
es cambiar todo theme's style
con un editor visual simple. Con la ayuda del editor de temas CSSHero puedes cambiar
- Texto de cabecera
- fuente
- frontera
- estilos, etc
Lo mismo se aplica a
- contenido del cuerpo
- puesto de entrada
- valores meta
- valores de encabezado
- pie de página
- barra lateral, etc. Echa un vistazo al siguiente GIF.
Point-3) Opciones de diseño de dispositivo práctico con un solo clic
Como puede ver en la imagen a continuación, el editor de temas nos brinda la opción de verificar la cantidad de Layouts
diferentes para dispositivos móviles, iPhone y iPad de su tema con solo pasar el mouse y hacer un solo clic.

Punto 4) ¿Cómo deshacer los cambios recientes?
El usuario tiene la opción de deshacer todos los cambios recientes utilizando un módulo de Change history
de cambios simple. Apuesto a que ninguno de los desarrolladores hace las cosas bien en el primer intento, al menos yo no :). Esto es muy útil para mí.
CSSHero también proporciona un módulo muy útil que muestra all of your save changes
. Puede retroceder en la línea de timeline
y volver a la versión anterior. ¿No es una herramienta útil? He usado esta herramienta hasta ahora varias veces y me encanta.
Punto-5) Opciones de configuración y herramientas
Preset Settings
y Tools Options
.
Eche un vistazo al video detallado que hemos capturado que muestra todas las funciones del CSSHero
WordPress Custom CSS Editor.
Vídeo detallado de Youtube:
Ahora que ha visto toda la funcionalidad, es hora de hacer las siguientes preguntas :).
Punto 6) ¿Funciona este complemento con mi tema?
Según la información del sitio oficial de CSSHero, el complemento funciona con todos los marcos de temas de WordPress.
- Marco de Génesis
- GenerarPrensa
- CapasWP
- Tema del ultimátum
- Total
- En la delantera
- WP Bootstrap
- Temático
- Requerido+Base
- Omega
- Líneas de página DMS
Si su tema isn't compatible
con CSSHero, no worries
. Le mostrará una opción para habilitar Rocket mode
.
Message
: el soporte nativo para este tema no está presente. ¿Quieres probar la detección automática del modo cohete? Simplemente enable it
e intente modificar CSS again
y debería ver las mismas opciones que vio en el video anterior.

Punto-7) ¿Qué tal el soporte y la documentación de los complementos?
Algunos de los complementos populares de WordPress, como Gravity Forms, WooCommerce, Contact Form7, WP Pools y más, son compatibles con el marco CSSHero.
Eso significa que CSSHero no solo funciona con theme customization
, sino que también funciona con la plugin layout customization
.
Por último, pero no menos importante, en el sitio oficial, hay varios artículos detallados de tips and tricks
disponibles para que los lea.
Only Cons
que se me ocurre es familiarizarme con todas las funciones. Puede tomar algún tiempo para que usted comience y se convierta en un profesional. Una vez que esté familiarizado con CSSHero, estoy seguro de que será very handy solution
para todos los bloggers de WordPress.
Póngase en contacto con nosotros si tiene un producto, complemento, tema, etc. que cree que desea promocionar.
Aquí están las ofertas exclusivas de Crunchify para CSSHero:
Hola lectores de Crunchify:
Nos complace anunciar up-to 40% off
en el complemento de personalización del tema CSSHero WordPress.
Por favor, eche un vistazo a los pasos a continuación
Paso 1
- Ir al sitio CSSHero: https://www.csshero.org/
- Haga clic en el enlace
Pricing Plans
Paso 2
- Haga clic en el botón
I have a coupon code
Paso 3
- Ingrese el código de cupón:
CRUNCHIFY
Etapa 4
- Haga clic en el botón Canjear para obtener un
34% off
en el plan inicial y personal - Obtenga
40% off
en el plan Pro
Lista de todas las ofertas: https://crunchify.com/deals/