Revisión de YellowPencil: un editor visual de CSS para principiantes para WordPress

Revisión de YellowPencil: un editor visual de CSS para principiantes para WordPress

¿Alguna vez ha deseado poder ir más allá de la configuración de estilo y el estilo de su tema? cada poquito ¿Tu sitio de WordPress? Podrías arreglarlo el complemento se ve extraño con tu tema … o podrías cambiar cómo ese widget se parece a para que funcione mejor …

CSS es un lenguaje de marcado que puede usar para hacer precisamente eso. Es súper poderoso para personalizar su sitio de WordPress, pero …hay una trampa.

A menos que sea un desarrollador, o al menos esté familiarizado con los conceptos básicos de HTML, es casi imposible usar CSS para diseñar su propio sitio web. Básicamente, los usuarios ocasionales no pueden beneficiarse de CSS porque la curva de aprendizaje es demasiado grande.

Lapiz amarillo es un complemento de WordPress freemium que cambia eso.

Esto le permite realizar cambios de estilo CSS en ninguna Elemento en su sitio de WordPress con un Interfaz visual amigable para principiantes.

Ya sea que sea un usuario ocasional y desee tener más control sobre su sitio web, o un desarrollador que solo quiera acelerar su flujo de trabajo cuando trabaja con CSS, creo que YellowPencil tiene algo que ofrecer.

Siga leyendo mi revisión de YellowPencil para ver cómo funciona, así como mis pensamientos sobre el complemento.

Revisión de YellowPencil: la lista completa de funciones

Con YellowPencil obtienes uno nuevo Editar con YellowPencil Botón accesible desde la barra de herramientas de WordPress.

Una vez que abra la interfaz de usuario de YellowPencil, puede:

  • Haga clic en cualquier elemento de su página para seleccionarlo.
  • Diseñe elementos mediante una interfaz gráfica con menús desplegables, opciones de color, etc.

Esa es la función principal de todo el complemento; se las mostraré en una sección práctica.

Además, YellowPencil también ofrece:

  • Controles de diseño de arrastrar y soltar. Simplemente puede arrastrar y soltar elementos en la vista previa en vivo para cambiar su posición.
  • Cambiar el tamaño arrastrando y soltando. También puede arrastrar y soltar el tamaño de ciertos elementos en la vista previa visual.
  • Diseño de respuesta. Puede ver vistas previas receptivas y realizar cambios de estilo que solo se aplican a este dispositivo.
  • Modo de estructura alámbrica. Este modo útil facilita la personalización de diseños al ocultar imágenes y mostrar solo una estructura alámbrica simple.
  • Historial de deshacer / rehacer y revisión. Estos facilitan el avance o retroceso según sea necesario.
  • Editor de CSS directo. Si ya está familiarizado con CSS, también puede realizar cambios directamente en el editor de código.

Y una de las cosas más geniales con las que trabaja YellowPencil es todo. Eso significa que puede usarlo para diseñar su tema de WordPress, así como la salida de todos los complementos que usa.

Práctica con YellowPencil: diseñe una página

Para trabajar prácticamente con YellowPencil, configuré uno nuevo Contáctenos Página con un formulario de contacto de WPForms. Ahora voy a darle estilo, así como al menú de mi tema, para que pueda ver cómo funciona YellowPencil.

Cuando abre la interfaz de usuario de YellowPencil, se ve así:

revisión de yellowpencil - la interfaz

  • 1 – Esta barra lateral le ayuda a acceder a diferentes modos, como el modo de diseño receptivo o el modo de estructura alámbrica.
  • 2 – Esta es una vista previa en vivo de la página que está editando. A medida que realice cambios de estilo, se reflejarán instantáneamente en esta vista previa en vivo.
  • 3 – Una vez que haya seleccionado un elemento, configure el nuevo estilo aquí.

Seleccionar un elemento (2 modos)

YellowPencil le ofrece dos opciones para seleccionar un elemento:

  • Inspector flexible – Si está utilizando el inspector flexible, seleccione Todos ese tipo de artículo. Por ejemplo, si hace clic en un enlace de menú en el Inspector flexible, puede hacer clic en los mismos estilos. utilizar Todos los enlaces del menú.
  • Auditor individual – Si está utilizando el inspector único, elija solo uno específico Elemento. Por ejemplo, si hace clic en un vínculo de menú en el Inspector único, puede aplicar estilos a solo este Atajo.

Aquí hay un ejemplo:

Cuando uso eso Flexible inspector Para seleccionar un enlace de menú y agregar un marco, esto se aplica a todos los elementos del menú:

examinador flexible

Así es como se ven los mismos estilos con eso Auditor individual (nota como solo esos casa El enlace del menú obtiene un marco):

Inspector único

Por lo tanto, esta es una característica bastante útil desde el principio para asegurarse de que siempre pueda seleccionar los elementos exactos que desea.

Los selectores de CSS se vuelven complicados, pero la capacidad de cambiar entre estos dos modos los hace fáciles.

Elementos de estilo con la pared lateral.

Viste esto arriba, pero profundicemos un poco más en cómo funciona el estilo de un elemento.

Para cada elemento, YellowPencil proporciona pestañas para:

  • texto
  • antecedentes
  • borde
  • tapicería
  • dobladillo
  • Radio de borde
  • posición
  • Talla
  • animación
  • Sombra de la caja
  • Extra (otras funciones orientadas al desarrollador como opacidad, posición deslizante, cursor, etc.)

Por ejemplo, para agregar una sombra de cuadro al campo del formulario de entrada, simplemente vaya al Sombra de la caja Tab y realice sus cambios usando los controles simples de la interfaz de usuario:

Forma de estilo

Sin embargo, esta es mi característica favorita.

Si desea cambiar el tamaño de un elemento, puede utilizar el mismo campo lateral. O simplemente puede arrastrar y soltar así:

Cambiar el tamaño del formulario

También puede mover algunos elementos usando arrastrar y soltar (No funcionará para todos los elementos, pero puede mover la mayoría de las cosas.).

Por ejemplo, es fácil mover el título de la página:

Organizar el diseño

La funcionalidad de arrastrar y soltar no solo es exclusiva de un complemento de editor visual de CSS, sino que también es muy útil para cambiar el aspecto de sus páginas.

Y aquí es exactamente donde reside el núcleo de cómo funciona YellowPencil. Ahora déjame mostrarte algunos de los otros modos que puedes obtener.

Explore los otros modos de YellowPencil

Puede usar la barra lateral de la izquierda para acceder a algunos de los otros modos en YellowPencil.

Modo de reacción

En Modo de reacción, obtendrá una nueva regla en la parte superior de su pantalla con todos los diferentes puntos de interrupción de respuesta para su sitio web, así como un mensaje que le indicará qué versión está editando actualmente:

diseño de respuesta

Para editar otro dispositivo, simplemente haga clic en uno de los puntos de interrupción de arriba. Esto le dará una vista previa en vivo del tamaño de este dispositivo.

Pero más que eso: cualquier cambio de estilo que realice en este modo solo se aplicará a ese dispositivo:

estilo receptivo

En general, me gusta la forma en que YellowPencil ha implementado sus controles de respuesta. Es muy conveniente poder ver visualmente los puntos de interrupción en la regla de arriba.

Modo de estructura alámbrica

El modo Wireframe le ayuda a diseñar el diseño básico de su contenido. Esencialmente, atenúa todo su estilo para que pueda concentrarse únicamente en el posicionamiento. También muestra información detallada sobre el tamaño cuando pasa el mouse sobre él. conducir un elemento:

Modo de estructura alámbrica

De nuevo, bastante útil. Probablemente no utilice este modo con frecuencia, especialmente si es un usuario ocasional. Pero es bueno tenerlo.

Editor de código

Si alguna vez desea trabajar directamente con el código, puede abrir el editor de código completo para editar estilos para:

  • La publicación específica que estás editando
  • La plantilla específica que está editando
  • Todo su sitio web (Global)

Editor de código

Gerente de animación

Si está usando animación en su página, puede usar el Gerente de animación Modo para ver una línea de tiempo de todos los eventos de animación en esta página. También puede arrastrar y soltar la duración de un evento de animación, lo cual es útil:

Editor de animaciones

Explore las otras configuraciones de YellowPencil

Finalmente, YellowPencil ofrece algunos otros controles útiles en el área de configuración.

en el Ajustes En la pestaña puede ver cualquier CSS personalizado que haya agregado. Y también puede exportar todo su CSS con un solo clic:

Exportar codigo

Esto significa que nunca está bloqueado y puede dejar de usar YellowPencil en cualquier momento.

Y más allá de eso ajustes La pestaña le permite elegir si desea guardar su CSS personalizado como un CSS dinámico en línea o un Archivo CSS externo estático:

Método CSS

¿Cuánto cuesta YellowPencil?

La versión premium de YellowPencil que revisé está disponible en CodeCanyon, donde solo cuesta $ 26 y uno Calificación de 4.77 estrellas en más de 10,000 ventas.

También hay una versión lite disponible de forma gratuita en WordPress.org si quieres probarla. Tiene muchas de las características básicas que vio anteriormente, pero no tantas opciones.

Aún así, esta versión gratuita es una excelente manera de jugar con el complemento y ver si te gusta. Entonces, si decide convertirse en profesional, $ 26 no es exactamente la cuenta bancaria.

Reflexiones finales sobre YellowPencil

YellowPencil es el mejor complemento de personalización visual de CSS que he usado desde el punto de vista de los no desarrolladores. Si es un desarrollador, es posible que desee Echa un vistazo a CSS Hero ya que tiene algunas características agradables orientadas al desarrollador en su última versión.

Pero para un usuario normal, prefiero YellowPencil porque:

  • El posicionamiento y cambio de tamaño de arrastrar y soltar es muy conveniente.
  • El modo de diseño receptivo está bien hecho. Y es mucho más fácil para un usuario ocasional comprender cómo funcionan los puntos de interrupción en YellowPencil también.
  • Obtienes muchos controles de diseño para cada elemento.

Si está interesado, visite WordPress.org para jugar con la versión gratuita. Y si te gusta, deberías comprar la versión Pro.

Obtenga YellowPencil Pro

Y si desea aprender algo de CSS usted mismo, consulte nuestra guía para principiantes para aprender CSS para WordPress.

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad