¿Qué tal personalizar Live WordPress Theme en tiempo real? Bueno, CSSHero es un complemento para realizar cambios de manera fácil

Publicado: 2016-04-07

Personalice fácilmente los temas de WordPress en vivo por CCSHero

WordPress 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 y done

CSSHero en colaboración con Crunchify, regalando 10 free Licenses a los lectores de Crunchify. Llenar este formulario de google para 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 un 34% off en los planes Starter, Personal y 40% off en el plan Pro.

Registre su licencia y descargue la última versión del CSSHero plugin desde su tablero: http://www.csshero.org/

Descargar el complemento CSSHero para WordPress

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.

Obtener la página de licencia de CSS Hero

Punto-1) Comencemos con la funcionalidad

  • Ahora vaya a la home page de su blog y verá el botón animado CSSHero en la esquina top 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 :

Panel de opciones CSSHero

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.

IU de cambio de propiedad HTML de Checkout CSSHero

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.

Ver diferentes diseños móviles

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.

Historial de cambios de pago

Punto-5) Opciones de configuración y herramientas

Preset Settings y Tools Options .

Cargue todos sus cambios desde Cuenta o cambios locales

Restablecer todas las configuraciones Opción

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.

CSSHero Habilitar RocketMode

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.

Muy buenos documentos y soportes para CSSHero.

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:

CSSHero 40% de descuento código de cupón - CRUNCHIFY

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

Agregue el código CRUNCHIFY para obtener hasta un 40 % de descuento en CSSHero

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

CSSHero Theme Editor plugin y Crunchify Exclusive Deal code-CRUNCHIFY

Lista de todas las ofertas: https://crunchify.com/deals/