Style your WordPress site visually. Discover the most popular front-end design plugin! Try live demo.

YellowPencil

<p><strong>Style your WordPress site visually.</strong> Discover the most popular front-end design plugin! <a href="http://yellowpencil.waspthemes.com/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Try live demo</a>.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/TDOgAf6R1Ik?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>Visual CSS Editor</h3>
<p>The plugin allows you to <strong>customize any page and theme without coding</strong>. Click on an element and start visual editing. Adjust <strong>colors</strong>, <strong>fonts</strong>, <strong>sizes</strong>, <strong>positions</strong> and a lot more. Take full control over your website’s design with more than 60 style properties.</p>
<h3>Key Features</h3>
<ul>
<li>Customize any page, any element</li>
<li>Customize WordPress login page</li>
<li>Automatic CSS selectors</li>
<li>60+ CSS properties</li>
<li>Visual Drag & Drop</li>
<li>Visual Margin & Padding editing</li>
<li>Live CSS editor</li>
<li>Live preview</li>
<li>Manage the changes</li>
<li>Undo / Redo history</li>
<li>Export stylesheet file</li>
</ul>
<h3>Design Tools</h3>
<p>The plugin provides you advanced tools and ready-to-use libraries for styling your website effortlessly.</p>
<ul>
<li>Flexible element inspector</li>
<li>Single element inspector</li>
<li>Responsive tool</li>
<li>Element search tool</li>
<li>Measuring tool</li>
<li>Wireframe view</li>
<li>Design information tool</li>
<li>Gradient generator <em>(pro version)</em></li>
<li>Animation manager <em>(pro version)</em></li>
<li>Animation generator <em>(pro version)</em></li>
</ul>
<h3>Design Assets</h3>
<p>Reach many design assets with one click. Customize your website’s design to fit your needs!</p>
<ul>
<li>900+ Google fonts <em>(pro version)</em></li>
<li>300+ Background patterns <em>(pro version)</em></li>
<li>Unsplash background stock images <em>(pro version)</em></li>
<li>Material and flat color palettes <em>(pro version)</em></li>
<li>50+ Animations <em>(pro version)</em></li>
</ul>
<h3>CSS Properties: Text</h3>
<ul>
<li>Font Family <em>(pro version)</em></li>
<li>Font Weight</li>
<li>Color <em>(pro version)</em></li>
<li>Text Shadow</li>
<li>Font Size</li>
<li>Line Height</li>
<li>Font Style</li>
<li>Text Align</li>
<li>Text Transform</li>
<li>Letter Spacing</li>
<li>Word Spacing</li>
<li>Text Decoration</li>
<li>Text Indent</li>
<li>Word Wrap</li>
</ul>
<h3>CSS Properties: Background</h3>
<ul>
<li>Background Color <em>(pro version)</em></li>
<li>Background Image <em>(pro version)</em></li>
<li>Background Clip</li>
<li>Background Blend Mode</li>
<li>Background Position</li>
<li>Background Size</li>
<li>Background Repeat</li>
<li>Background Attachment</li>
</ul>
<h3>Other CSS Properties</h3>
<ul>
<li>Margin</li>
<li>Padding</li>
<li>Border</li>
<li>Border Radius</li>
<li>Position</li>
<li>Width <em>(pro version)</em></li>
<li>Height <em>(pro version)</em></li>
<li>Lists</li>
<li>Flexbox</li>
<li>Animation</li>
<li>Box Shadow</li>
<li>Transition</li>
<li>Filter</li>
<li>Transform</li>
<li>Opacity</li>
<li>Display</li>
<li>Cursor</li>
<li>Float</li>
<li>Clear</li>
<li>Visibility</li>
<li>Pointer Events</li>
<li>Overflow</li>
</ul>
<h3>Compatible with any theme & plugin</h3>
<p>This works seamlessly with almost any WordPress theme and plugin. You can use it for editing the pages that you created with the page builders.</p>
<h3>Compatible with All Page Builders</h3>
<p>The plugin allows you to customize the pages created with Gutenberg block editor, Elementor, or another page builder. Re-design your website today.</p>
<h3>How does this work?</h3>
<p>The plugin generates CSS codes like a professional web developer in the background while you are editing the web page visually.</p>
<p>The plugin doesn’t modify any theme file, instead of it loads the generated CSS codes to the website in a dynamic way so that you can manage the changes anytime.</p>
<h3>Premium features</h3>
<p>The following properties are available only in paid version;</p>
<ul>
<li>Font Families (Google fonts)</li>
<li>Font Color</li>
<li>Background Color</li>
<li>Background Image</li>
<li>Width & Height</li>
<li>Animations</li>
</ul>
<p><a href="http://waspthemes.com/yellow-pencil/buy/" rel="nofollow ugc">Purchase pro version</a> now to unlock all features.</p>
<h3>Documentation and Support</h3>
<ul>
<li>For documentation and tutorials go to our <a href="https://yellowpencil.waspthemes.com/documentation/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Documentation</a>.</li>
<li>We provide very limited support on the <a href="https://wordpress.org/support/plugin/yellow-pencil-visual-theme-customizer/" rel="ugc">WordPress.org forums</a>. Please feel free to post questions or bug reports, but for timely support, we recommend purchasing a YellowPencil Pro license.</li>
<li>For more information, check out our website at <a href="https://yellowpencil.waspthemes.com/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">YellowPencil Visual CSS Style Editor</a>.</li>
</ul>
<h3>Community</h3>
<ul>
<li>Join our <a href="https://www.facebook.com/groups/YellowPencils/" rel="nofollow ugc">Facebook Group</a>.</li>
<li>Rate us on <a href="https://wordpress.org/support/plugin/yellow-pencil-visual-theme-customizer/reviews/#new-post" rel="ugc">WordPress</a>.</li>
</ul>


Alternatives to Visual CSS Style Editor

Top alternatives