Visual styling without coding
YellowPencil Pro is a visual CSS style editor for WordPress. It lets you select an element on a page and adjust its appearance through an editing interface rather than writing CSS manually. The editor provides live CSS and a live preview while you work, so design changes can be reviewed as they are made.
You can customize any page and element, including the WordPress login page. The plugin works with pages created using the Gutenberg block editor, Elementor, or another page builder, and is described as compatible with WordPress themes and plugins.
Paid styling capabilities
The Pro edition adds premium properties and design resources for more detailed visual work. These include font families using Google fonts, font color, background color, background images, width, height, and animations.
- Typography: more than 900 Google fonts, font family, font weight, color, text shadow, font size, line height, font style, alignment, text transform, letter spacing, word spacing, text decoration, text indent, and word wrap.
- Backgrounds and color: background color, background image, background clip, background blend mode, background position, background size, background repeat, background attachment, gradient generation, 300 or more background patterns, Unsplash background stock images, and material and flat color palettes.
- Layout and appearance: margin, padding, border, border radius, position, width, height, lists, flexbox, box shadow, transition, filter, transform, opacity, display, cursor, float, clear, visibility, pointer events, and overflow.
- Motion: an animation manager, animation generator, and more than 50 animations.
Tools for practical editing
YellowPencil Pro includes a flexible element inspector, a single-element inspector, responsive tools, an element search tool, a measuring tool, wireframe view, and a design information tool. These features support a workflow that moves from selecting the correct element to checking its layout and applying visual adjustments.
Visual drag-and-drop controls, margin and padding editing, automatic CSS selectors, undo and redo history, and stylesheet export help manage the work. The plugin generates CSS in the background and loads it dynamically instead of modifying theme or plugin files. Changes can therefore be managed through the editor and can be disabled or deleted when no longer wanted.
Typical use cases
Use the editor to refine typography, spacing, colors, backgrounds, dimensions, responsive presentation, and motion across an existing WordPress design. It can also help adjust pages made with a builder or redesign the WordPress login page without changing the underlying theme or plugin files.
Installation and first edits
Install YellowPencil Pro through the WordPress plugin installation workflow. In the WordPress Dashboard, open Appearance > YellowPencil Editor, select the target page, and start customizing. Select an element, apply the required properties, review the live preview, and use the change-management tools to undo, redo, or remove adjustments.
Documentation and tutorials are available for guidance. The source information also notes that support on the WordPress.org forums is limited and recommends a YellowPencil Pro license for timely support.
