YellowPencil Pro

Style pages and individual elements visually

YellowPencil Pro lets you adjust the appearance of WordPress pages and elements, including the login page. Select an element, change its styles through the editing interface, and review the generated CSS alongside a live preview. The extension works with pages made in Gutenberg, Elementor, or another page builder, and is described as compatible with WordPress themes and add-ons.

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

Styling controls and design resources

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

• Typography: More than 900 Google fonts, with controls for font family, weight, color, text shadow, size, line height, style, alignment, text transform, letter and word spacing, text decoration, text indent, and word wrap.
• Backgrounds and color: Background color and images, clip, 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, transitions, filters, transforms, opacity, show, cursor, float, clear, visibility, pointer events, and overflow.
• Motion: An animation manager and generator, with more than 50 animations.

Tools and editing process

Element selection and adjustment are supported by a flexible inspector, a single-element inspector, responsive tools, element search, a measuring tool, wireframe view, and design information. Visual drag-and-drop controls, margin and padding editing, and automatic CSS selectors help apply changes to the selected parts of a design.

To begin, 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 needed properties, and review the live preview. Documentation and tutorials are available. Support through the WordPress plugin directory forums is limited; a YellowPencil Pro license is recommended for timely support.