Explore Editor Interface


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. Margin
  4. Padding
  5. Border
  6. Border Radius
  7. Position
  8. List
  9. Flexbox
  10. Grid
  11. Size
  12. Animation
  13. Box Shadow
  14. Extra

Right Panel – Customization Types

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

What is customization types? Check this article.

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.

Was this article helpful?

Couldn't Find Your Answer?

Get quality customer support with our professional support team.

Create A Support Ticket
Live Editor