Style WordPress pages visually

YellowPencil Pro is a visual CSS editor for WordPress. Select an element on a page, adjust its appearance in the editing interface, and review the generated CSS alongside a live preview. You can customize pages and elements, including the WordPress login screen, and work with pages built using Gutenberg, Elementor, or another page builder. The add-on is described as compatible with WordPress themes and plugins.

Typography, color, layout, and motion

The Pro edition adds premium properties and design resources for more detailed styling, including font families, font and background colors, background pictures, dimensions, and animations.

• Typography: More than 900 Google fonts, font family and weight, color, text shadow, size, line height, style, alignment, text transform, letter and word spacing, text decoration, text indent, and word wrapping.
• Backgrounds and color: Background color and images, 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, borders and 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 and generator, plus more than 50 animations.

Editing and change management

Tools include flexible and single-element inspectors, responsive controls, element search, a measuring tool, wireframe view, and design information. Drag-and-drop controls, margin and padding editing, and automatic CSS selectors help apply adjustments. Undo and redo history lets you review changes, and stylesheet export is available.

YellowPencil Pro generates CSS in the background and loads it dynamically without modifying theme or extension documents. You can manage adjustments in the editor, then disable or delete them when they are no longer needed.

Where it can help

Use the editor to adjust typography, spacing, colors, backgrounds, dimensions, responsive presentation, or motion in an existing WordPress design. It can also help refine page-builder layouts or customize the login screen while leaving theme and plugin files unchanged.

Installation and first edits

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

Documentation and tutorials are available. Support on WordPress plugin forums is limited, and a YellowPencil Pro license is recommended for timely support.