YellowPencil - Visual CSS Style Editor

Un retoque sin rastro es una deuda con tu yo del año próximo

El tema casi encaja, pero el botón tiene otro tono, el titular se ve enorme en el móvil y el pie no respeta los márgenes. Pedir cada ajuste cuesta tiempo o dinero, y hacerlo a ciegas en una caja de CSS deja reglas sueltas que nadie recuerda meses después.

YellowPencil permite hacer esos cambios sobre la propia página: haces clic en un elemento, ajustas su estilo y ves el resultado. Lo que más vale a largo plazo es lo que ocurre después, porque un diseño se desordena por acumulación de pequeños retoques, y aquí los cambios se pueden revisar, volver a editar, desactivar, restablecer o borrar.

El plugin no modifica los archivos del tema ni de otros plugins. El CSS generado se carga aparte, como una hoja de estilos independiente.

Herramientas para editar sobre la página

• Tipografía y color: edición de fuentes, Google Fonts, selector de color y paletas.
• Tamaño y espacios: ancho, alto, margen y relleno se ajustan de forma visual.
• Posición: mover y redimensionar elementos arrastrando.
• Efectos: generadores de animaciones, degradados, sombras y filtros CSS3, como contraste o brillo.
• Recursos: imágenes de stock, degradados, patrones, paletas y animaciones CSS3.
• Inspección: inspector de elementos, vista de estructura y herramienta de medición.
• Historial: deshacer y rehacer.

Móviles, usuarios conectados y pantalla de acceso

Los estilos pueden ser específicos para teléfonos, tabletas y portátiles, con vista previa adaptable. Así el titular se corrige en el móvil sin tocar el escritorio.

También puedes editar viendo la página como usuario conectado o desconectado, y aplicar estilos a las páginas de acceso y registro de WordPress.

Para quien sabe CSS, hay un editor de código con comprobación de errores, autocompletado y tamaño ajustable. Los selectores se generan solos para el elemento elegido, y la hoja resultante se puede ver, editar y exportar.

Lo que conviene tener claro al comprar un editor de estilos

YellowPencil no es un constructor de páginas: no añade bloques ni secciones nuevas, solo da estilo a lo que ya existe. Si falta contenido o estructura, la solución está en otra herramienta.

Trabajar sobre lo existente tiene una consecuencia práctica. Los estilos apuntan a elementos del tema mediante selectores, de modo que si una actualización cambia esas clases, una regla puede dejar de coincidir. Después de actualizar el tema, conviene repasar las páginas retocadas.

El CSS se carga de forma dinámica desde el plugin. Si piensas retirarlo, exporta primero la hoja de estilos y prueba el resultado en una copia del sitio.

Compatibilidad y primeros cambios

Está planteado para cualquier tema y plugin de WordPress, incluidos los constructores Elementor y Divi. Para el primer cambio:

1. Instala y activa el plugin.
2. Abre el editor en Apariencia, YellowPencil Editor, y elige la página.
3. Haz clic en el elemento y modifica una sola propiedad.
4. Comprueba el cambio en la vista de teléfono y de tableta.
5. Guarda y ábrelo como visitante desconectado.

Si necesitas construir, no solo retocar

Para crear plantillas de cabecera, pie, entradas y archivos, Elementor Pro incluye un creador de temas. Su código y CSS personalizados dependen de la edición.

Si prefieres un sistema en lugar de ajustes puntuales, Automatic.css es un marco de utilidades CSS para Etch, Bricks y Gutenberg, con colores de marca, tipografía fluida y espaciado por escalas desde un panel.

CSS, secciones y pantalla de acceso en YellowPencil

¿Necesito saber CSS?

No para los ajustes visuales. El editor de código queda disponible para quien quiera usarlo.

¿Cambia los archivos de mi tema?

No. No modifica archivos del tema ni de plugins, y los cambios se pueden desactivar o eliminar cuando quieras.

¿Sirve para añadir secciones nuevas?

No. Da estilo a los elementos existentes y no agrega bloques.

¿Qué separa la edición gratuita de la de pago?

En la gratuita de WordPress.org quedan reservadas para la de pago las familias de Google Fonts, el color de fuente y de fondo, las imágenes de fondo, el ancho y alto, y los generadores de degradados y animaciones.

¿Puedo llevarme el CSS a otro lado?

Sí. La hoja de estilos generada se puede exportar.

¿Puedo diseñar la pantalla de acceso?

Sí. Las páginas de acceso y registro de WordPress se pueden editar.