Element Inspector

Every element in your website is a layer and Yellow Pencil lets you customize any layer. Click any element that you want to customize and start visual customization! Edit colors, fonts, sizes, positions and a lot more styles. Yellow Pencil has more than 50 properties and also coming with advanced tools as well as unique features about the web technology.

50+ Properties

Yellow Pencil Editor has +50 CSS properties, These properties giving you full control of the web design.


Any WordPress user can use this properties easily! There are descriptions available on every properties for beginners.


Try The Demo

600+ Font Families

Yellow Pencil will be coming with 600+ Google Font Families. Play with a ton fonts and choose the most beautiful font for your design.

300+ Pattern Assents

Upload your custom background images or use 300+ Pattern Assents. Give a new look to your website with the most popular web patterns.

Trend Colors Palettes

Websites need trendy colors to look modern. Yellow Pencil is providing you the trend color palettes. It includes flat, material and a special color palette.

Live CSS Editor

Yellow Pencil developed for both beginners and advanced users. No code knowledge required but there is still an excellent CSS Editor for those who would like to coding! You can code live with CSS editor and interfere the generated CSS rules.

Smart Logic

Yellow Pencil has a super smart logic! It generates codes like a professional web developer. Yellow Pencil filtering classes and tag names with dozens of algorithms and finds the best CSS Selector for the targeted elements.

Live Drag & Drop Any Element

Drag & Drop any element in real-time, move the elements to any position you want.

Visual Animation Generator

Create custom animations with the scenes! Animation generator will be recording your moves as an animation! Add more scenes, more styles and have fun! Provide mobility for your website with your own special animations!

Visual Animation Manager

Manage all Yellow Pencil animations! Use 50+ ready-to-use animations or use your custom own animations. Control animation durations and delays. Animation manager supports multiple animations! Yay! This is a unique feature on web technology, even you can create HTML/CSS based movies with Yellow Pencil.

Resize Elements Live

Edit the element width and height from options or resize any element real-time.

Measuring Tool And Smart Guides

Measuring tool helps you to see the element's sizes and smart guide allows calculating intersection alignment while you are dragging and resizing the elements.

Manage All CSS Styles

You can see all customized pages and generated animations from WordPress Panel and you can also export all CSS codes as ready-to-use.

Customize Any Page

Yellow Pencil lets you customize any page in your website. It is compatible with custom posts types, all themes and plugins.

Work On Wireframe Mode

Wireframe tool clears the colors from the design and helps you to focus on the layout in this way you can easily work on your website.

Learn The Theme's Design Details

Design information tool provides you to learn basic and advanced information such as typography. For instance; used font families, colors, HTML classes, container width, the number of affected elements, element tag name, element DOM code and much more.

Fully Responsive

Yellow Pencil is coming with an advanced responsive tool that lets you to customize your website for any device such as mobile, tablet, desktops and more.


Resize your website width responsive tool to any device size and customize.

I have purchased 600 products from Envato and, if I had to recommend only one, it would be this one. This item over-delivers in so many ways I can't begin to list them. If you want to make your WordPress web development much, much easier, buy this plugin. Webeau

Live Editor