YellowPencil Pro for Visual WordPress Styling

Select an element and review its style

YellowPencil Pro is a visual CSS editor for WordPress. Select an element on a page and adjust its appearance in the editing interface. The editor shows generated CSS and a live preview as you work, so you can review each change without writing CSS rules manually.

Pages and builders

You can personalize pages and elements, including the WordPress login page. YellowPencil Pro works with pages built using Gutenberg, Elementor, or another page builder. It is described as compatible with WordPress themes and add-ons.

Pro styling controls

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

• Typography: More than 900 Google fonts, font family and weight, font color, text shadow, font size, line height, font style, alignment, text transform, letter and 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; more than 300 background patterns; Unsplash background images; and material and flat color palettes.
• Layout and appearance: Margin, padding, borders and border radius, position, width, height, lists, flexbox, box shadow, transitions, filters, transforms, opacity, show, cursor, float, clear, visibility, pointer events, and overflow.
• Motion: An animation manager, an animation generator, and more than 50 animations.

Inspect and manage changes

Editing tools include a flexible element inspector, a single-element inspector, responsive tools, element search, a measuring tool, wireframe view, and design information. Drag-and-drop controls, margin and padding editing, automatic CSS selectors, and undo and redo history support the styling process. You can also export stylesheets.

YellowPencil Pro generates CSS in the background and loads it dynamically. It does not modify theme or add-on documents; you can manage changes in the editor, then disable or delete them when they are no longer needed.

Installation and first edit

Install YellowPencil Pro through the WordPress plugin installation workflow. In the WordPress Dashboard, open Appearance > YellowPencil Editor and choose a page. Choose an element, apply the properties you need, review the live preview, and use the change-management tools to undo, redo, or remove adjustments.

Documentation and tutorials are available. Forum support is limited, and a YellowPencil Pro license is recommended for timely support.