Microthemer Pro Visual CSS Editor

Boost your WordPress CSS editing capability
The live CSS editor for learners and Pros
Microthemer Pro Visual CSS Editor is a point-and-click CSS editor plugin for WordPress that helps site builders of any level design like a pro.

Live CSS editing
Your style edits appear on screen instantly, whether you use the visual styling options, the code editor, or a combination of the two. And to help ensure you always select the right element, Microthemer’s HTML inspector displays the underlying HTML code for the elements you select. This feature makes Microthemer the best live CSS editor for real world projects, and the perfect tool to take your understanding of HTML and CSS to the next level.

Customize anything
Style any part of any WordPress page, from header to footer. This includes Gutenberg (or classic editor) post and page content, custom posts, hard-coded theme or plugin content, page builder content – you name it. Microthemer Pro Visual CSS Editor works seamlessly with your favourite WordPress tools to give you developer-level design control in a few clicks.

150+ CSS styling options
Enjoy the largest set of CSS styling options provided by any WordPress CSS editor (150+). Choose from modern styles like animations, transitions, transforms, filters, flexbox, and CSS grid to web design essentials like typography, position, spacing, sizing, and backgrounds. The style fields will speed up your workflow significantly without sacrificing any control; you can switch back and forth between the style fields and the code editor as you please.

Drag and drop CSS grid
CSS grid solves age old web design problems with columns that don’t vertically align, adapt to different screen sizes easily, or space apart without unwanted peripheral space. The only downside is the steep learning curve. But Microthemer’s visual drag and drop controls bring the power of CSS grid to the masses. You can create beautiful web layouts using CSS grid in seconds. It’s so much easier than the old way it almost feels like cheating.

Easy Google fonts
Save time and effort by visually browsing Google fonts without leaving the Microthemer interface. You can then insert the font you want with a single click. This dramatically simplifies experimenting with different Google fonts and ensures your site only loads the minimum fonts and variations needed for your design – no unnecessary font files.

Responsive design
Microthemer Pro Visual CSS Editor takes the pain out of responsive design. Some common breakpoints are provided to help you get started, but are entirely customizable. Use the responsive tabs or drag the top ruler to check how your site looks on different screen sizes, and then fix any issues. This feature is super useful for creating pixel perfect layouts on mobile – no need to settle for cropped/bunched up text or strangely large spacing and heading typography.

Integrates with builders
Microthemer Pro Visual CSS Editor has “deep” integration with Elementor, Beaver Builder and Oxygen. You add content with your page builder, then style it with Microthemer – at the same time, using a single browser tab.

And for Divi, Bricks, Brizy, Zion, and WP Page Builder, Microthemer has “shallow” integration. This means CSS and content changes auto-update when using two or more browser tabs.

Note – Microthemer Pro Visual CSS Editor is a standalone WordPress CSS editor, it doesn’t rely on any builders to work.

And More!

Get Now Microthemer Pro Visual CSS Editor!