Introduction

Start the editor from WordPress Dashboard > Appearance > YellowPencil Editor. The editor has a simple interface, designed in a way that everyone can use.

The Right Panel

You have to use the right panel to edit for the selected element.

Right Panel – Before Select The Element:

1. Live Preview
2. Review the changes
3. Switch the page in the editor
4. Manage customization types

Right Panel – After Select The Element:

As you can see, when an element is selected, all available CSS properties appear there.

1. Text
2. Background
3. Spacings (Padding)
4. Spacings (Margin)
5. Borders
6. Border Radius
7. Positioning
8. Measures
9. List
10. Transforms
11. Shadow
12. Filters
13. Motion (Animation)
14. Motion (Transition)
15. Extra
16. Extra (Flexbox)
17. Extra (Grid)

Right Panel – Customization Types

You can change the current customization type, manage and, reset by using this tool.

Right Panel – Switch The Page In The Editor

Click on the current customization type, to change the page, use visitor view and use custom URL to open in the editor.

The Selected Element

Click on an element to selecting an element, the element will be covered with a solid blue border.

The Left Bar

The left bar includes useful tools and extra features.

Left Bar – Tools & Features

All the features and tools in the left bar are listed below with a brief description.

1. Element Inspector
2. Element Search Tool
3. CSS Editor
4. Responsive Tool
5. Measuring Tool
6. Wireframe Tool
7. Design Information
8. Animation Manager
9. Undo
10. Redo

Left Bar – Options

Some settings for the live editor, the plugin options are in the WordPress Dashboard > YellowPencil page.

Last updated on June 14, 2021