Revisión de YellowPencil: personalización de CSS ligero con edición visual

Si desea superar las limitaciones de los temas y las opciones de complementos para personalizar realmente cómo se ve cada elemento en su sitio de WordPress, CSS es cómo hacerlo. Pero, como escribí aquí, el gran problema con CSS es que, aunque es poderoso, requiere un conocimiento especial para dejarlo fuera de los principiantes. Entonces, tiene este lenguaje de estilo fuerte, pero solo los usuarios avanzados pueden beneficiarse de él. Qué hacer…? Entra, Pencil Yellowpencil. YellowPencil es un complemento que hace que la edición de CSS sea más accesible para principiantes y usuarios avanzados, que ofrece una interfaz visual para ayudarlo a relajar cada elemento en su sitio, incluido el contenido del tema y el complemento.
Con YellowPencil, podrá personalizar fácilmente su tema y el resultado del complemento usando apuntar y hacer clic, arrastrar por salto y una interfaz gráfica. Y en mi revisión de Yelowpencil, te mostraré cómo funciona y compartiré algunos de mis propios pensamientos. Revise YellowPencil: aquí hay todo lo que hace detalles esenciales sobre cómo YellowPencil realmente hace que CSS sea accesible para todos los usuarios de WordPress … Primero, YellowPencil le permite editar CSS de dos maneras diferentes:
Interfaz gráfica: esto es lo que la mayoría de los usuarios elegirán. Simplemente haga clic en el elemento que desea editar y use menús simples, selectores de color y otras opciones para hacer cambios.
Editor de código: si está familiarizado con CSS, puede agregar su propio código directamente. Esto sigue siendo conveniente, porque la herramienta de inspección simplifica el selector adecuado. Puede aplicar estilos CSS a ciertas consultas de medios para un sitio más receptivo. Y también puede editar la forma en que funcionan las consultas de los medios, si lo desea (si no está familiarizado, una consulta de medios le permite dirigir las opciones de estilo a ciertos dispositivos, como un teléfono inteligente o una tableta).
Otras características útiles incluyen:
El artículo continúa a continuación

Visual Resiaming: puede cambiar el tamaño de los elementos tal como cambia el tamaño de una imagen en Microsoft Word.
Pull and Place: puede dibujar y colocar elementos individuales en su página.
Modo de estructura alámbrica: esto facilita la disposición de los modelos sin los elementos estéticos.
Herramienta de animación: aplique animaciones a elementos seleccionados
Cancelar/recuperar: si comete un error.
Básicamente con YellowPencil: editando mi página ahora que sabes lo que hace Yellowpencil, tomemos esto un poco más práctico.
Creamos una página de prueba construida con el tema Elementor y Astra, que debería proporcionar un buen ejemplo de cómo funciona Yellowpencil con temas y la salida del complemento. Un vistazo rápido a la interfaz YellowPencil puede iniciar la interfaz YellowPencil, ya sea desde el editor de WordPress ordinario o a través de la barra de herramientas de WordPress. Una vez que esté en la interfaz, verá una vista previa en vivo de su sitio, así como la interfaz YellowPencil, tanto a la izquierda como a la derecha: 1, puede cambiar los selectores, cambiar el modo receptivo, acceder al editor. Código fuente. y más.
2 – Una vez que seleccione un artículo, aquí aplicará estilos.

El uso de la herramienta YellowPencil Inspector Yellowpencil le brinda tres opciones diferentes para controlar lo que sucede al hacer clic en un elemento. Esto prácticamente le permite controlar lo que desea editar:
Cursor-It le permite interactuar con su sitio web como si fuera un visitante habitual. Por ejemplo, puede hacer clic en un enlace para cargar una nueva página para editar.
Inspector flexible: selecciona todos los elementos de una clase. Por ejemplo, si hace clic en un enlace en el menú de navegación, podrá atacar todos los enlaces en el menú de navegación.
Inspector único: selecciona solo el elemento específico en el que hace clic. Por ejemplo, le permitirá atar un solo enlace específico en el menú de navegación, en lugar de todos los enlaces del menú de navegación.
Elementos de estilo con Pencil Yellowpencil está bien, ahora vamos a elegir algunos artículos. Esto también me dará la oportunidad de mostrarle la diferencia entre inspectores flexibles y únicos. Supongamos que usa el inspector flexible para hacer clic en un enlace de menú de navegación. Ahora tiene muchas opciones en el lado derecho donde puede aplicar nuevos estilos: el elemento continúa a continuación
Si desea, por ejemplo, agregar un borde, solo usará opciones de estilo fronterizo. Y aun así, cada enlace de menú tiene un nuevo borde:

Si solo desea agregar un borde al enlace de mi cuenta, puede optar por usar un solo inspector. Me vería bien así:


En total, YellowPencil le ofrece más de 50 opciones CSS para agregar a sus modelos, distribuidos en:


Texto

antecedentes

margen
Recubrimiento
Frontera
Rayo fronterizo
Posición
Talla
Animación
Sombra de la caja
Las opciones de posición y tamaño son particularmente interesantes. Si elige la posición, no solo obtendrá controles simples para administrar la posición del elemento, sino que puede tirarla y colocarla en la pantalla:
Del mismo modo, la elección del tamaño le permite cambiar el tamaño de un elemento deslizándose y la colocación, también:
¡Es lo suficientemente grandioso, para ser honesto!
El artículo continúa a continuación

Si ajusta el tamaño y el posicionamiento, incluso puede activar un modo de estructura de alambre especial para facilitar el posicionamiento y la alineación de diferentes elementos:

Uno por uno, creo que obtienes mucha profundidad aquí, especialmente en comparación con algunas de las otras herramientas en el mercado. Primavera en el diseño receptivo y la consulta de medios Si desea editar el diseño receptivo de su sitio, todo lo que tiene que hacer es activar el modo receptivo y podrá ver todos los puntos de interrupción de su base, así como una notificación que indica Usted qué dispositivo (s) está editando actualmente. : Al hacer clic en las opciones en la parte superior, podrá editar ciertos aspectos receptivos. Cuando se trabaja en esta interfaz, sus cambios solo se aplican a interrogación de medios específicos.

Hacer cambios directos en el código Si ya está familiarizado con CSS, puede continuar haciendo cambios de código directo cuando sea necesario. Todo lo que tiene que hacer es activar el editor de código en la barra lateral izquierda y verá un editor de código en vivo, dividido en tres pestañas:

Puede cambiar su CSS existente o agregar su propio CSS aquí. Explorando la configuración de YellowPencil y el código de exportación más allá de las opciones de interfaz que he mostrado anteriormente, también puede configurar si se debe incluir el código CSS como CSS externo estático o dinámico en línea (YellowPencil agrega el código solo a las páginas relevantes):::

También puede descargar un archivo CSS con todas sus ediciones si desea exportar el código. Esto le permitiría eliminar el complemento una vez que termine de usar:

Siempre es agradable cuando un complemento le brinda flexibilidad en lugar de tratar de bloquearlo. ¿Cuánto cuesta YellowPencil? Yellowpencil está disponible por $ 26 en Codecanyon, que creo que es bastante asequible para lo que obtienes. También hay una versión limitada gratuita en wordpress.org. Como referencia, revisé la versión Pro. Pensamientos finales sobre Yellowpencil Me gustó mi revisión de Yellowpencil y creo que es una gran opción, especialmente para principiantes. Si usted es un desarrollador, puede perder algunas herramientas CSS avanzadas, como fragmentos y variables, que otros editores tienen CSS. Pero YellowPencil también tiene su propia volcadora única, como posicionar y cambiar el tamaño de la colocación y la colocación, lo que lo hace maravilloso para usuarios ocasionales. Si alguna vez ha querido tener más control sobre cómo lo intentan el tema y los complementos de su WordPress, pruebe YellowPencil. Incluso si nunca ha oído hablar de CSS, debería poder tomarlo rápidamente y comenzar a hacer cambios significativos en su sitio de WordPress. Tomar pencillo amarillo