Visual editing for WordPress pages

YellowPencil Pro lets you select a page element and adjust its appearance through a visual editor. Generated CSS and a live preview help you review changes as you work. You can style pages and individual elements, including the WordPress login page, without writing CSS manually.

The plugin works with pages made using Gutenberg, Elementor, or another page builder. It is described as compatible with WordPress themes and plugins, so it can be used to refine existing layouts as well as page content.

Styling properties and styling resources

The Pro edition includes more than 60 properties and resources for typography, backgrounds, layout, and motion.

• Typography: More than 900 Google fonts, plus controls for font family, weight, color, text shadow, size, line height, style, alignment, text transform, letter spacing, word spacing, text decoration, text indent, and word wrap.
• Backgrounds and color: Background color and pictures, clipping, blend mode, position, size, repeat, and attachment; gradient generation; 300 or more background patterns; Unsplash 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, show, cursor, float, clear, visibility, pointer events, and overflow.
• Motion: An animation manager and generator, with more than 50 animations.

Inspection and change management

Tools include flexible and single-element inspectors, responsive controls, element search, measuring, wireframe view, and design information. Drag-and-drop controls, automatic CSS selectors, and margin and padding editing support the process of selecting an element and adjusting its style.

The add-on generates CSS in the background and loads it dynamically without modifying theme or plugin documents. You can review changes, use undo and redo history, export stylesheets, or disable or delete adjustments when they are no longer needed.

Installation and first edits

Install YellowPencil Pro through the WordPress plugin installation workflow. In the Dashboard, open Appearance > YellowPencil Editor and select the target page. Select an element, apply the needed properties, and review the live preview. Use the change-management tools to undo, redo, or remove adjustments.

Documentation and tutorials are available. Support on the WordPress forums is limited; the product information recommends a YellowPencil Pro license for timely support.