YellowPencil Pro turns element selections into visual WordPress styles

Select an element on a page and adjust its appearance in the editor instead of writing CSS by hand. YellowPencil Pro shows the CSS and a live preview as you work, so you can review each change.

Customize pages and elements, including the WordPress login page. The editor works with pages made in Gutenberg, Elementor, or another page builder, and is described as compatible with WordPress themes and add-ons.

Styling controls

The Pro edition includes premium properties and design resources for detailed visual edits, covering 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 spacing, word spacing, text decoration, text indent, and word wrap.
• 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 for backgrounds; 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.

Selection and layout tools

Use the flexible element inspector or single-element inspector to target content. Responsive tools, element search, a measuring tool, wireframe view, and design information help check the page and its layout. Drag-and-drop controls support visual adjustments, while automatic CSS selectors, undo and redo history, and stylesheet export help manage edits.

The add-on generates CSS in the background and loads it dynamically without modifying theme or plugin documents. You can manage changes through the editor, then disable or delete them when they are no longer needed.

Installation and editing steps

Install YellowPencil Pro through the WordPress plugin installation workflow. In the Dashboard, open Appearance > YellowPencil Editor and choose a page. Choose an element, apply the properties you need, and review the live preview. Use the editor's history to undo or redo changes, or remove adjustments when needed.

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