Revisión de YellowPencil: un editor de CSS visual amigo de WordPress

¿Alguna vez ha querido poder ir más allá de la configuración de estilo de su base y el estilo de cada uno de sus sitios de WordPress? Podría arreglar ese complemento que parece extraño con su tema … o podría cambiar la forma en que un solo widget parece hacer que funcione mejor … bueno, CSS es un lenguaje de marcado que le permite hacer exactamente esto. Es muy fuerte para personalizar su sitio de WordPress, pero … hay una trampa. A menos que sea un desarrollador o al menos familiarizado con los elementos básicos del HTML, es casi imposible usar CSS para estilizar su propio sitio. Básicamente, los usuarios ocasionales no pueden beneficiarse de CSS, porque la curva de aprendizaje es demasiado alta.
Yellowpencil es un complemento de WordPress Freemium que cambia esto. Le permite realizar cambios en el estilo CSS a cualquier elemento en su sitio de WordPress utilizando una interfaz visual amigable. Ya sea que sea un usuario habitual y desee más control sobre su sitio, o sea un desarrollador que solo busca acelerar su flujo de trabajo mientras trabaja con CSS, creo que YellowPencil tiene algo que ofrecer. Continúe leyendo mi revisión de YellowPencil para ver práctica cómo funciona, así como mis pensamientos sobre el complemento.
Revisión de YellowPencil: lista completa de funciones con YellowPencil, obtendrá una nueva edición con el botón Yellowpencil a la que puede acceder desde la barra de herramientas de WordPress. Después de abrir la interfaz YellowPencil, puede:
Haga clic en cualquier artículo en su página para seleccionarlo.
Elementos de estilo utilizando una interfaz gráfica con menús de caída, selectores de color, etc. Esta es la función básica de todo el complemento: le mostraré manualmente en una sección. Más allá de eso, Yellowpencil también ofrece:
Licheitud y apariencia de colocación. Puede simplemente deslizar y arreglar elementos en la vista previa en vivo para cambiar su posición.
Deslice y arregle el cambio de tamaño. Del mismo modo, puede usar, deslizar y arreglar para cambiar el tamaño de ciertos elementos de la vista previa visual.
Diseño receptivo. Puede ver vistas previas receptivas y realizar cambios de estilo que se aplican solo al dispositivo.
Modo de estructura alámbrica. Esta forma útil facilita el ajuste de aspectos ocultando elementos visuales y mostrando una estructura de alambre simple.
Cancelar / restaurar el historial de revisiones. Facilitan hacia atrás o hacia adelante caminando según sea necesario.
Editor directo de CSS. Si ya está familiarizado con CSS, también puede hacer cambios directos en el editor de códigos.
Y una de las cosas más populares es que Yellowpencil funciona con cualquier cosa. Es decir, puede usarlo para evitar el tema de WordPress y salir de cualquier complemento que use.
Básicamente con Yellowpencil: el peinado de una página para ponerse en práctica con Yellowpencil, creamos una nueva página contáctenos con un formulario de contacto WPFORMS. Ahora, lo diseñaré, así como el menú de mi tema, para que pueda ver cómo funciona Yellowpencil. Cuando abres la interfaz YellowPencil, se ve así:
1 – Esta barra lateral le ayuda a acceder a diferentes formas, 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 edita. A medida que realiza cambios de estilo, los verá instantáneamente reflejados en esta vista previa en vivo.3 – Después de seleccionar un elemento, aquí configurará el nuevo estilo.
Seleccionar un (s) elemento (s) Yellowpencil le brinda dos formas de seleccionar un elemento:
Inspector flexible: cuando use el inspector flexible, seleccionará todo ese tipo de elemento. Por ejemplo, si hace clic en un enlace de menú con el inspector flexible, podrá aplicar los mismos estilos a todos los enlaces de menú.
Inspector único: al usar el inspector único, solo seleccionará ese elemento específico. Por ejemplo, si hace clic en un enlace de menú con el inspector único, solo podrá aplicar estilos a ese enlace.
Aquí hay un ejemplo: si uso el inspector flexible para seleccionar un enlace de menú y agregar un borde, lo aplicará para todos los elementos del menú:
Ahora, así es como se ven los mismos estilos con el inspector único (observe cómo solo recibe el enlace del menú que recibe la casa):
Entonces, desde la cabeza, esta es una característica suficiente para asegurarse de que siempre puede seleccionar los elementos exactos que desea. Los selectores CSS se vuelven difíciles, pero la posibilidad de cambiar entre estos dos modos los simplifica. Elementos de estilo con el panel lateral que vio esto arriba, pero vamos un poco en profundidad con la forma en que funciona el estilo de un elemento. Para cada artículo, YellowPencil le da pestañas para:

Texto

antecedentes
margen
Recubrimiento
Frontera
Rayo fronterizo
Posición
Talla
Animación
Sombra de la caja
Extra (más características orientadas a los desarrolladores, como opacidad, posición flotante, cursor, etc.), por ejemplo, para agregar una caja de cuadro al campo de la forma de entrada, solo tiene que ir a la sombra de la caja y hacer Cambios usando comandos de interfaz simple:
Aquí, sin embargo, mi característica favorita. Si desea cambiar el tamaño de un elemento, puede usar el mismo panel lateral. O solo puede deslizarse y colocar de la siguiente manera:
Del mismo modo, también puede usar arrastrar y soltar para mover algunos elementos (no funcionará para cada elemento, pero puede mover la mayoría de las cosas). Por ejemplo, es fácil mover el título de la página:
No solo esa funcionalidad de arrastrar y soltar es única para un complemento visual del editor CSS, sino que también es bastante útil para cambiar la apariencia de las páginas. E incluso está el núcleo de la forma en que funciona Yellowpencil. Ahora déjame mostrarte algunas de las otras formas en que obtienes.


Explorando otros modos de píldito amarillo Puede usar la barra lateral izquierda para acceder a algunos de los otros modos de píldito amarillo. Modo receptivo en modo receptivo, obtendrá una nueva regla en la parte superior de la pantalla, con todos los diferentes puntos de respuesta para su sitio, así como un mensaje que le dice qué versión está editando actualmente:

Para editar otro dispositivo, simplemente haga clic en uno de los puntos de interrupción en la parte superior. Esto le dará una vista previa en vivo del tamaño del dispositivo. Además, cualquier cambio de estilo que realice de esta manera solo se aplicará al dispositivo:

Uno por uno, me gusta la forma en que YellowPencil ha implementado sus comandos receptivos. Ver visualmente los puntos de interrupción en la parte superior de la parte superior es bastante útil. Modo de estructura de alambre El alambre de alambre lo ayuda a crear el aspecto básico de su contenido. Y también muestra información de dimensionamiento detallado cada vez que pasa con el mouse sobre un elemento:
De nuevo, lo suficiente para mano. Probablemente no usará de esta manera una tonelada, especialmente si es un usuario habitual. 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 edita

Plantilla específica que edita
Todo su sitio (global)
Manager de animación Si usa animaciones en su página, puede usar el módulo de animación Administrador para ver una cronología de todos los eventos de animación en esa página. También puede usar arrastrar y soltar para cambiar la duración de un evento de animación, lo cual es conveniente:
Explorando la otra configuración de Pencil Yellowpencil Finalmente, YellowPencil le brinda algunas otras verificaciones útiles en el área de configuración.
En la pestaña Personalización, puede ver todos los CS personalizados que ha agregado. Y puede exportar su CSS completo a través de un clic en un botón:

Esto significa que nunca está bloqueado y puede dejar de usar YellowPencil cuando lo desee. Y más allá de eso, la pestaña Configuración le permite elegir si desea incluir CSS personalizado como CSS en línea dinámico o un archivo CSS estático: ¿Cuánto cuesta Yellowpencil? La versión premium de YellowPencil que analicé está disponible en Codecanyon, donde cuesta solo US $ 26 y tiene una calificación de 4.77 estrellas para más de 10,000 ventas. También hay una versión Lite disponible de forma gratuita en WordPress.org si desea probarla. Incluye muchas de las características básicas que ha visto anteriormente, pero no tiene tantas opciones. Sin embargo, esa versión gratuita es una buena manera de jugar con el complemento y ver si le gusta. Entonces, si decide ir a Pro, $ 26 no son solo un banco. Los últimos pensamientos sobre Yellowpencil Yellowpencil es el mejor complemento de personalización CSS visual desde una perspectiva no desarrollada. Si eres un desarrollador, le recomendamos verificar CSS Hero, porque tiene algunas características cuidadosas para los desarrolladores, en la versión más reciente. Pero para un usuario regular, prefiero Yellowpencil porque:

El posicionamiento y el cambio de tamaño por disparo y colocación son muy convenientes.
El modo de diseño receptivo está bien hecho. Y también es mucho más fácil para un usuario común comprender cómo funcionan los puntos de interrupción en YellowPencil.

Recibirá muchos controles de diseño para cada artículo.