El tema está instalado, el contenido está en su lugar y el sitio se ve... como nada. El personalizador integrado de WordPress cubre escenarios básicos: color de fondo, logotipo, widgets de la barra lateral. Pero en el momento en que usted quiere desplazar un encabezado 10 píxeles a la izquierda, cambiar la fuente de un botón específico o añadir un fondo degradado a un solo bloque, los controles estándar se quedan cortos. Y nadie quiere sumergirse en style.css después de cada pequeño ajuste.

Yellow Pencil resuelve este problema de raíz. Es un editor visual de CSS: usted hace clic en un elemento de la página y cambia inmediatamente fuentes, colores, espaciado, bordes, animación, sin escribir una sola línea de código. El plugin genera CSS limpio sobre la marcha y deja intactos los archivos de su tema.

Al final de esta guía usted estará ajustando diseños más rápido de lo que un desarrollador front-end tarda en abrir el inspector de código, y sin ningún riesgo de romper algo.

💡 Resumen rápido:

• Instale Yellow Pencil desde el directorio de WordPress.org (gratis) o descargue la versión Pro desde el sitio web oficial
• Active el plugin y abra el editor visual usando el botón «Let's Start» en la pantalla de bienvenida
• Elija un tipo de personalización: global (para todo el sitio), página única o plantilla de entradas
• Haga clic en los elementos de la página y ajuste su apariencia a través del panel derecho: fuentes, color, bordes, fondo, animación
• Guarde sus cambios y compruebe la adaptabilidad usando el emulador integrado de tableta y teléfono

Qué es Yellow Pencil y por qué lo necesita

Yellow Pencil es un plugin de edición visual de CSS para WordPress. Una distinción importante de inmediato: esto no es un constructor de páginas como Elementor o Gutenberg. El plugin no añade bloques nuevos; da estilo a los existentes. Aquellos que usted creó con cualquier constructor o los que vienen con su tema.

En su núcleo hay un inspector de elementos: haga clic en un encabezado, botón o imagen, y obtendrá acceso instantáneo a más de 60 propiedades CSS en el panel derecho. Mueva un control deslizante y la página cambia en tiempo real. Se acabaron los ciclos de «editar código → refrescar navegador → no encaja → repetir».

El plugin funciona con cualquier tema de WordPress y no modifica sus archivos. Todas las ediciones se almacenan en una hoja de estilos separada y se cargan dinámicamente. El tema permanece intacto, los cambios se pueden revertir, exportar como CSS listo para usar o eliminar junto con el plugin.

¿Quién necesita esto? Principalmente quienes no escriben CSS a mano pero quieren refinar el diseño visualmente. Sin embargo, los desarrolladores experimentados también apreciarán la velocidad: en lugar de editar archivos fuente y recargar, un clic del ratón ofrece resultados instantáneos. Freelancers y agencias usan Yellow Pencil para personalizar rápidamente sitios de clientes sin arriesgarse a dañar el tema de otra persona.

Características clave de Yellow Pencil

Hay muchas características, pero todas giran en torno a una idea: tomar cualquier elemento de la página y cambiar su apariencia a través de una interfaz visual. A continuación se presentan las características clave de la versión Pro (v7.6.7, vigente a 2026):

• Inspector de elementos: al hacer clic en cualquier bloque, texto o imagen se abre un panel con todas las propiedades CSS disponibles
• Arrastrar y soltar visual: cambie las posiciones de los elementos con el ratón, sin editar código
• Redimensionamiento: arrastre los bordes del marco azul alrededor de un elemento y el tamaño cambia visualmente
• Más de 900 fuentes de Google: conéctelas con un clic desde la biblioteca integrada del plugin
• Más de 300 patrones de fondo: además de degradados, colores sólidos e imágenes personalizadas
• Más de 50 animaciones: animaciones CSS listas para usar con un gestor visual y generador de fotogramas clave personalizados
• Editor de código CSS: para quienes quieran escribir estilos manualmente, con autocompletado y verificación de errores
• Modo adaptable: edición de estilos separada para escritorio, tableta y teléfono

El plugin genera CSS dinámicamente y lo carga como una hoja de estilos separada. El rendimiento del sitio no se ve afectado; se añade exactamente una hoja de estilos, nada más.

Instalar Yellow Pencil

La instalación no difiere de la de cualquier otro plugin de WordPress. Primero obtenga el archivo: la versión gratuita está disponible en el directorio de WordPress.org, mientras que la Pro se compra en el sitio web oficial del desarrollador (licencia para un solo sitio, actualizaciones de por vida). Algunos temas premium incluyen Yellow Pencil Pro en el paquete.

Abra el panel de WordPress y vaya a «Plugins» → «Añadir nuevo».

Haga clic en «Subir plugin» → «Elegir archivo».

Seleccione el archivo ZIP descargado waspthemes-yellow-pencil.zip y haga clic en «Instalar ahora».

Tras la instalación, haga clic en «Activar». Para la versión Pro, introduzca su clave de licencia (le llegará por correo electrónico después de la compra). La activación desbloquea las actualizaciones y todas las funciones Pro.

Aparecerá en pantalla la página de bienvenida de Yellow Pencil. La sección «Recursos» contiene documentación, guías y enlaces de soporte.

Haga clic en «Empecemos» e ingresará de inmediato al editor visual en la página actual del sitio.

Interfaz: tres zonas del editor

La interfaz de Yellow Pencil se divide en tres zonas. A la izquierda hay una barra de herramientas estrecha con iconos: inspector de elementos, acciones de deshacer y rehacer, modo de pantalla completa, herramienta de adaptabilidad y regla de medición. El panel es minimalista y no distrae de la página que está editando.

A la derecha se encuentra el panel del editor. Cuando no hay ningún elemento seleccionado, muestra tres tipos de personalización disponibles.

Al hacer clic en un elemento de la página, el panel cambia a las propiedades de estilo: fuentes, colores, espaciado, bordes.

Aparece un marco azul con tiradores de redimensionamiento alrededor del elemento seleccionado. El elemento se puede mover arrastrándolo y redimensionar tirando de los bordes del marco.

La zona central la ocupa la propia página: la ve tal como la verán los visitantes y la edita en tiempo real.

Herramientas principales

El panel izquierdo cuenta con tres herramientas que usará constantemente:

• Inspector de elementos: selecciona cualquier elemento visual de la página para personalizarlo. Haga clic en un encabezado, botón o bloque y todas sus propiedades CSS aparecerán en el panel derecho.
• Deshacer y rehacer: ¿está experimentando con colores y fuentes? Pulse «Deshacer» si se ha pasado. El historial de edición se conserva hasta que salga del editor.
• Modo de pantalla completa: oculta el panel de administración de WordPress, dejando solo la página y los paneles del editor. Resulta útil para un posicionamiento preciso.

En el panel derecho, en la parte superior, se encuentran tres botones fundamentales:

• Vista previa: muestra la página sin la interfaz del editor. Esto le permite ver el resultado con los ojos de un visitante.
• Restablecer cambios: revierte todas las ediciones no guardadas. Resulta útil cuando se ha excedido y ha perdido el hilo.
• Guardar: aplica los cambios. Tras guardar, las ediciones son visibles para todos los visitantes del sitio.

Tres modos de personalización: cuándo usar cada uno

Antes de comenzar a editar, Yellow Pencil le pide que elija el alcance de sus cambios. El panel del editor (sin nada seleccionado) muestra tres opciones:

• Personalización global: los cambios se aplican a todas las páginas del sitio. Cambie el color de todos los encabezados H2 y estos cambiarán en todas partes (página de inicio, blog, página de contacto).
• Personalización de página única: las ediciones se aplican solo a la página que está editando. Ideal para páginas de aterrizaje y secciones únicas.
• Personalización de plantilla: los cambios se aplican a todas las publicaciones del mismo tipo. ¿Quiere que todas las páginas de producto tengan el mismo aspecto? Este modo es para usted.

El modo actual se muestra en la parte superior del panel del editor. Verifique siempre que está editando el tipo correcto antes de guardar: es fácil confundir la personalización global con la de página, y las consecuencias aparecen de inmediato en todo el sitio.

Qué puede hacer con Yellow Pencil: recorrido práctico

A continuación, un desglose de las capacidades clave con ejemplos reales. Cada operación se realiza haciendo clic en un elemento y seleccionando la sección correspondiente en el panel derecho.

Tipografía

El texto es lo primero que la gente aborda tras instalar el plugin. Haga clic en cualquier bloque de texto y seleccione «Text» en el panel del editor. Todas las propiedades básicas están disponibles: cambio de fuente (más de 900 opciones de Google Fonts en la versión Pro), tamaño, interlineado, espaciado entre letras y entre palabras. El color del texto se elige entre paletas integradas (material y flat) o se define con un cuentagotas.

La principal ventaja es la vista previa en vivo. Usted mueve el control deslizante del tamaño de fuente y ve inmediatamente cómo se reajusta la maquetación. Esto es mucho más rápido que el ciclo «editar CSS → refrescar página → no encaja → repetir».

Bordes

Un borde alrededor de un bloque es una forma sencilla de destacar una tarjeta, una cita o un formulario de suscripción. Seleccione el elemento y vaya a la pestaña «Border» en el panel del editor. Hay cuatro estilos disponibles: sólido, discontinuo, punteado y oculto.

Una funcionalidad de la que carecen la mayoría de los competidores: cada uno de los cuatro lados del borde se puede configurar por separado. Borde superior rojo discontinuo, izquierdo azul sólido, derecho verde, inferior ausente. El ancho, el color y el estilo de cada lado se definen de forma independiente, lo que le da libertad de diseño sin una sola línea de código.

Fondo

El fondo del elemento se configura en la pestaña «Background». Hay tres opciones disponibles: color sólido (cuentagotas o paleta), uno de los más de 300 patrones integrados y un degradado CSS (lineal o radial). Puede subir una imagen personalizada y configurar su posicionamiento, comportamiento de repetición y comportamiento de desplazamiento.

Los patrones de fondo son un detalle agradable que ahorra tiempo. En lugar de buscar texturas en sitios de stock, usted elige un patrón de la biblioteca, cambia su color y opacidad, y obtiene un fondo de bloque cuidado en un par de clics.

Animación

La pestaña «Animation» da acceso a más de 50 animaciones CSS listas para usar: desvanecimiento de entrada, desvanecimiento de salida, rebote, rotación, pulso y otras. Usted selecciona un efecto en el gestor visual, define la duración y el retardo, e inmediatamente ve cómo el elemento cobra vida.

Para escenarios personalizados existe un generador de animaciones (Pro): usted define los fotogramas clave en el editor visual y el plugin genera el CSS @keyframes. Se pueden ejecutar múltiples animaciones simultáneamente para lograr un comportamiento complejo del elemento.

Tamaño y posición

Cambiar el tamaño de un elemento es literalmente arrastrar los bordes. Al hacer clic en un elemento aparece un marco azul con tiradores en las esquinas y los lados. Tire de un tirador y el tamaño cambia.

Cambiar la posición es aún más simple: tome el elemento con el ratón y arrástrelo donde lo necesite.

Una advertencia: arrastrar puede romper la adaptabilidad. Después de mover elementos, compruebe siempre cómo se ve la página en tableta y teléfono. El panel izquierdo tiene un emulador de adaptabilidad que cambia el área de vista previa entre escritorio, tableta y teléfono inteligente. Si algo se ha desplazado, se pueden definir estilos separados para cada resolución.

Gratis vs Pro: qué elegir

Las capacidades de las versiones gratuita y Pro difieren significativamente. La versión gratuita proporciona un conjunto básico de propiedades CSS: fuentes (sin Google Fonts), color de texto, espaciado, bordes, sombras, posicionamiento. Esto es suficiente para una personalización mínima del tema (mover un encabezado, cambiar el color de un botón, añadir un borde).

Pro desbloquea todo lo demás: más de 900 fuentes de Google, color e imágenes de fondo, animaciones con gestor visual, degradados, patrones de fondo, control de ancho y alto, un editor CSS con autocompletado, personalización de la página de inicio de sesión de WordPress y el generador de animaciones.

Para un proyecto puntual de cliente, la licencia Pro se amortiza al instante, ahorrándole horas de codificación manual. Para un blog personal, la versión gratuita suele ser suficiente.

Precio

Yellow Pencil Pro se distribuye bajo una licencia de pago desde el sitio web oficial del desarrollador. El precio incluye actualizaciones del plugin de por vida y un período de soporte. La licencia es válida para un sitio; se deben adquirir claves separadas para múltiples proyectos.

La versión gratuita está disponible en la página del plugin en WordPress.org. La instalación es estándar, directamente desde el administrador mediante «Plugins» → «Añadir nuevo» → buscar «Yellow Pencil».

Un video detallado de la interfaz y las técnicas clave para trabajar con el plugin (en inglés, visual y al grano).

⁉️🤔 Preguntas frecuentes

¿Yellow Pencil romperá mi tema?

No. El plugin no modifica los archivos del tema ni toca otros plugins. Todos los cambios se almacenan por separado y se cargan dinámicamente. Si algo sale mal, revierta las ediciones usando el botón «Reset changes» o elimine el plugin, y el tema volverá a su estado original.

¿Necesito saber CSS para trabajar con Yellow Pencil?

No, ese es precisamente el objetivo del plugin. Usted hace clic en un elemento y cambia sus propiedades visualmente: color, fuente, espaciado, bordes, animación. El CSS se genera automáticamente. Si usted sabe CSS, hay un editor de código integrado con autocompletado y resaltado, y puede escribir estilos manualmente además de las ediciones visuales.

¿Funciona el plugin con Gutenberg y Elementor?

Sí, Yellow Pencil es compatible con todos los maquetadores visuales populares: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. El plugin da estilo a los bloques ya creados que usted genera en el maquetador y no entra en conflicto con su marcado.

¿Puedo personalizar la página de inicio de sesión de WordPress?

Sí, en la versión Pro. Vaya a «Apariencia» → «YellowPencil Editor», seleccione «WordPress login page» como destino y haga clic en «Customize». Usted edita el logotipo, el fondo, los botones y los campos del formulario igual que una página normal.

¿Qué sucede después de eliminar el plugin?

Todos los estilos aplicados desaparecerán y el sitio volverá al diseño predeterminado del tema. Antes de eliminar, puede exportar el CSS mediante la función integrada «Export stylesheet» y conectarlo manualmente como un tema hijo, para que los estilos se conserven incluso sin el plugin.

¿Existen alternativas?

Entre los análogos directos con editor visual de CSS se incluyen Microthemer (inspector de elementos similar) y CSS Hero (un poco más simple, menos propiedades). Ambos son de pago. Entre las opciones gratuitas, solo existe el personalizador integrado de WordPress, pero este da acceso solo a una pequeña fracción de las propiedades CSS que ofrece Yellow Pencil.

¿Vale la pena adquirir Yellow Pencil para personalizar temas?

Si usted no escribe CSS a mano y no quiere pasar horas editando archivos de tema, Yellow Pencil es una de las mejores herramientas del mercado. No reemplaza a un maquetador visual, pero aborda exactamente la molestia que enfrenta todo dueño de un sitio: «Quiero ajustar las cosas solo un poco, cambiar un color y una fuente, pero sin código».

Para freelancers y agencias pequeñas, esto significa tiempo ahorrado en ediciones rutinarias de sitios de clientes. Para dueños de blogs, es una forma de ordenar la parte visual sin llamar a un desarrollador front-end. Para desarrolladores, ofrece prototipado rápido de estilos antes de transferirlos a un tema hijo.

La regla principal al trabajar con Yellow Pencil: verifique la adaptabilidad después de cada lote de ediciones. El emulador integrado de tableta y teléfono muestra una imagen honesta, y los estilos separados para cada resolución le permiten arreglar cualquier cosa que se haya desplazado. Con este hábito, el plugin se paga solo desde el primer día de uso.