Level up your WordPress site building capabilities
Achieve developer-level design control in seconds with Microthemer - the point-and-click live CSS editor for WordPress site builders.
Easily create CSS grid layouts, design responsively, integrate with your favourite page builder, use Sass, and get expert CSS help from the author of the plugin.
Love it, or get your money back.
No questions asked.
& Sass support
CSS grid layouts
Live CSS editing with HTML inspection
Your style edits appear on screen instantly with Microthemer, so you can make design changes in seconds. 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 unique 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 you can see on the page
With Microthemer's point-and-click to edit feature, you can restyle absolutely 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 works seamlessly with your favourite WordPress tools to give you developer-level design control in a few clicks.
The biggest selection of 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 controls
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. So 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.
Quick and easy access to 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.
Watch video demo
Responsive design for mobile and tablet
Microthemer 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 key page builders
Microthemer integrates seamlessly with page builders such as 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.
Some people handle the styling exclusively with Microthemer, while others use it for the final 20%. Needless to say, if you've never found your page builder's styling options to be limiting or repetitive, Microthemer probably isn't for you.
Safe editing with draft mode
Try out a new WordPress design on your live site without worrying about site visitors seeing your work in progress. Draft mode changes will only be visible to you. Publish your style changes only when you are 100% happy with them. This is great if you're still testing out the various styling options. Draft mode provides a safe environment for applying bold new changes to your site, worry free.
Help and support whenever needed
We understand that you may need help making CSS changes from time to time. This is nothing to feel shy about. We want you to get the best possible results out of Microthemer and have fun using it. So please head over to our friendly and supportive forum if you get stuck with anything. You will receive help from Sebastian - the author of the plugin, and an expert on all things CSS and Microthemer related.
Supports developers to work faster
Your code changes render on screen instantly - no need to switch between desktop applications, wait for Sass to compile, or compulsively refresh the browser. Plus, CSS selectors and media queries are defined in only one place to keep responsive development dry.
Supports beginners to become professionals
If you are new to building WordPress sites, do you always want to feel like a beginner? There is actually a risk of that with development tools that strive to completely shield you from the technicalities of site building. Microthemer is different. Microthemer shows you what it's doing, and invites you to understand CSS, and how it relates to HTML, in your own time. Because that's how you will achieve full design control, for real. That's how you will move from beginner to Pro, which is a very advantageous place to be.
Inspect and edit in one place with computed CSS reportingMicrothemer reveals your theme's default styling so you can anchor style edits to this. For example, if a heading has a bottom margin of 12px you’ll know that setting this to 24px will double that space.
Autosave and undo are there to help if you make a mistakeMicrothemer includes a revision restore feature. The past 50-300 actions that alter your workspace are remembered. So, if you make a few mistakes you can easily roll back to a previous point.
Clean, optimized code that won't slow your site downSurprisingly light-weight for such a powerful plugin. Unlike many other plugins, 95% of Microthemer's code does not run outside of the Microthemer interface so it won't slow down your site.
Deactivate or uninstall before handing over to the clientIf you don't want your clients to make changes with Microthemer, or you just like to minimise clutter, you can uninstall it and still keep the CSS changes you made with it.