April 7, 2019

WordPress Design Customization Made Easy

Microthemer Lite

 

 

Description

Microthemer is a feature-rich visual design plugin for responsively customizing the appearance of any WordPress theme or plugin content (e.g. contact forms), down to the smallest detail. Microthemer caters for both coders and non-coders.

MAIN FEATURES (FOR ALL USERS)

  1. Style anything on your web page, including headers, menus, sidebars footers, and plugin content.
  2. Intuitive visual editing.
  3. Over 100 style options at your disposal e.g. Google Web Fonts, background color, font-family, CSS3 gradients, drop shadow etc. Pro-only styles include animation, transition, and flexbox.
  4. Design responsively without the usual headaches. Preview your site at different screen sizes and apply media queries styles without writing code.
  5. Export your designs as a zip file. For sharing with friends, or transferring between domains.
  6. In-program docs so you can learn about CSS, or refresh your memory.
  7. History feature, so you can go back if you make a mistake.
  8. Draft mode, so you can try new designs on a live site without affecting what visitors see until you’re ready to publish.
  9. Apply styles per-page or globally.
  10. Apply :hover states an any other pseudo selector like :nth-child() without having to remember the syntax.
  11. Advanced color picker for sampling colors from your theme and creating custom palettes.
  12. Import CSS media queries, selectors, and styles from any stylesheet into Microthemer’s GUI.
  13. Light-weight. Microthemer generates CSS. It doesn’t try to do much more than that.
  14. Nonce security to help keep things secure.
  15. Supports multi-site.
  16. Supports SSL sites.
  17. Great support provided via our dedicated Microthemer forum.
  18. Free CSS, HTML, and responsive design tutorial.
  19. Event-based animation (e.g. onClick, inView)

MAIN FEATURES FOR DEVELOPERS

  1. Full code editor that lets you write code in the browser while looking at the page.
  2. Hybrid GUI code editor if you want to leverage the power of the GUI but prefer writing CSS properties and values by hand.
  3. SCSS, CSS, and JS supported.
  4. Enqueue JS libraries native to WordPress like jQuery UI for rapid experimentation.
  5. Minify CSS code.
  6. HTML and CSS inspection, similar to browser inspectors.
  7. Keyboard shortcuts for common actions.
  8. Validation of custom selectors with visual feedback as you type.
  9. Hide from clients by uninstalling or deactivating, but still use the CSS Microthemer generates by copying and pasting a few lines of PHP code to your theme’s functions.php file.

FREE VS PREMIUM VERSION

This free version limits you styling 15 things, and doesn’t include flexbox, transition, or animation features. To unlock the full program, you can purchase a Standard ($45) or Developer ($90) license.
Download Microthemer

Integrates with key page builders

Microthemer integrates seamlessly with page builders including Elementor and Beaver Builder, among others. While it shouldn't be confused with a drag and drop page builder, Microthemer’s WordPress theme design functions can be used alongside these key page builders on one screen – a winning combination for user friendly WordPress development and design.

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.

Supports developers to work faster

With Microthemer, developers can work faster and more visually by coding in CSS, SCSS, and JavaScript just above the site preview which will automatically update. There is no need to switch between applications or compulsively refresh the page. Plus, no need to repeat selectors in media queries; selectors are defined in one place to keep things dry.
 
Microthemer - Visual editor for your WordPress site


CSS HERO

If you’re one of the many beginners who want to customize your WordPress site design without touching CSS, then you’re in luck. CSS Hero plugin for WordPress allows you to make design customization without touching a single line of code. In this updated CSS Hero review, we will show you how to use CSS Hero to customize your website, and why we believe it’s one of the plugins every WordPress beginner should try.
CSS Hero review

Our CSS Hero Review

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required).
You have the ability to undo changes which is extremely helpful for beginners. All changes are saved as an additional stylesheet, which means you can upgrade your WordPress theme without worrying about losing the changes.
If you’re a designer or developer, then you will find CSS Hero equally as good. It works well with all popular WordPress themes and frameworks. You can quickly make changes to a child theme, and then export it to be used on a client’s website.
CSS Hero can save you a lot of time and frustration when it comes to making design customizations.
Usually, we’re very skeptical about point-and-click design customization plugins due to their bloated size. However, CSS Hero truly impressed us from the start.
If you were to ask us for an honest CSS Hero review, then we will give it a 5 out of 5 star.

How to Use CSS Hero to Customize Your WordPress Theme

First you need to install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.
It is a premium WordPress plugin with pricing starting from $29 for a single site (totally worth the investment considering the time and hassle it will save you).
Use the CSS Hero coupon code: WPBeginner to get a special discount of 34% Off. If you are buying the PRO plan, then the same code will get you a whopping 40% discount.
Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.
The goal of CSS Hero is to provide you a WYSIWG (what you see is what you get) interface for editing your theme. Simply visit your website while logged in, and you will notice the CSS Hero button in the WordPress admin bar.
CSS Hero button
Clicking on the button will convert your site into the live preview. You will now be able to see the CSS Hero toolbar.
CSS Hero live editor
Next, simply click on any element on your website, and CSS Hero will show you the CSS properties used by your theme for that particular element.
Element properties
These will include common CSS properties for the selected element like the background, typography, borders, spacing, and more. You can click on any item to expand it and then edit the CSS properties using a simple user interface.
Editing properties
As you make changes, you will notice the custom CSS magically appear below. If you are learning CSS, then you will find it useful to see how different CSS changes are applied with the result in live preview.
Editing styles for different elements using CSS Hero
Having trouble finding royalty free images for your website? CSS Hero comes with built-in Unsplash integration which allows you to browse, search, and use beautiful photographs in your website’s design.
Using royalty free images in your website's design
CSS Hero also comes with some ready-made snippets that you can apply to different elements on your website. Simply switch to the Snippets tab in the left column.
CSS hero ready-made snippets
As you make changes to your website, CSS Hero will autosave those changes but not publish them. To apply these changes to your live website, you need to click on the Save and Publish button.
Save and publish your changes

How to Undo Changes in CSS Hero

One of the best features of CSS Hero is the ability to undo any changes you make at any time. CSS Hero keeps a history of all the changes you make to your theme. Simply click on the history button in the CSS Hero toolbar to see the list of changes.
CSS Hero history
You can click on a date and time to see what your site looked at that point. If you want to revert back to that state, then simply save or resume editing from that point.
This doesn’t mean that changes you made after that point would disappear. They would still be stored, and you can revert back to that time as well. It does not get any simpler than that.
But what if you only wanted to revert changes you made to a particular item?
In that case, you don’t need to use the history tool. Simply click on the element that you want to revert and then click on the reset button.
Reset a single element
This will change the item back to the default settings defined by your WordPress theme.

Customizing Your Site for Mobile Devices in CSS Hero

The most challenging aspect of web design is device compatibility. You need to make sure that your site looks equally dazzling on all devices and screen sizes. Web designers use a variety of tools to test for browser and device compatibility. Lucky for you, CSS Hero comes with a built-in preview tool.
Simply click on the desktop icon in the CSS Hero toolbar and then click on a device type. You can choose from mobile, tablet, and desktop devices. The Preview area will change into your selected device.
Editing in different device modes
You can now edit your site while previewing it for mobile devices. This tool is particularly useful to tweak your theme’s design for mobile and tablets.

CSS Hero Theme Compatibility

The official CSS Hero website has an ever growing list of compatible themes. This list includes many of the best free WordPress themes. It also has the most popular premium themes from shops like CSSIgniterThemifyStudioPress, and more.

What About Themes not on Theme Compatibility List?

CSS Hero comes with a feature called Rocket Mode Auto-detection. If you are using a theme not included in theme compatibility list, then CSS Hero will automatically start using rocket mode.
Rocket Mode tries to guess the CSS selectors from your theme on its own. This works out perfectly most of the time. If your theme follows WordPress coding standards, then you would be able to edit almost everything.
You may also want to contact your theme developer and ask them to provide compatibility with CSS Hero.

Which Plugins Are Compatible with CSS Hero?

CSS Hero is regularly tested with top WordPress plugins for compatibility. This includes contact form pluginspopular page buildersWooCommerce, and others.
If you are using a WordPress plugin which generates an output not editable by CSS Hero, then you can request the plugin author to fix that. They really don’t need to do much to provide compatibility with CSS Hero.
We hope that you found our CSS Hero review useful. You may also want to see our ultimate guide on improving WordPress speed and performance for beginners.


How To Re-Design Your WordPress Site With YellowPencil


If you are planning to create a website and you do know how to use WordPress, then you don’t need to hire any developer for completing your website design. You can easily create a perfect design of your own. There are various WordPress themes, free and premium that you can use for your new website. If you have selected an ideal WordPress theme and you are thinking of making design tweaks, then you require a perfect tool to work with. Finding the best way to edit and create a unique website design is no longer difficult.
You will find plenty of options to make changes to the web elements, but you won’t find a tool to make complete design changes. You don’t need to worry about that specific problem anymore because we bring you the most powerful editor of all time. You can easily alter the design and make changes according to your requirements. Here, we will be explaining how you can use this specific plugin and how you can create a unique web design for your new website. Let’s have a look at some of the key features of this plugin before going into the detailed review.

Key Features of YellowPencil Visual Style Editor

Let’s throw a light on the key features this plugin can provide you. With the help of this YellowPencil plugin, you can customize any theme and plugin. When we say customize your theme, we meant literally you can change anything. You will be able to get more than 50 CSS properties and features with lifetime license and free updates.
It provides you a visual Drag & Drop editor that will help you build your website, and you can do live element resizing. You can use a gradient generator, animation generator, and animation manager. You can use all the responsive tools that will help you build an excellent website.

Overview Of YellowPencil Plugin

When you have downloaded this plugin and activated it, you can visit a specific page and start editing. The editing is very simple, and you won’t face any problems while editing your website. It gives you an excellent interface and if you have been using WordPress, then using this plugin is not at all difficult for you.
First of all, you will see 2 panels that you can use. You will see multiple editing options on the left and right side of the screen. On your right, you will see a panel where you can easily select the page that you wish to customize.

After selecting a specific page, you will also be able to see the customizing type. If you need to customize a single page or you want to make global changes, you can select the type from three different options. It will allow you to choose the right type of customization that you want to do.

Once you have selected the page that you want to edit, you can move to your left panel. There, you will be able to see multiple options including choosing an inspector. If you’re going to edit a single element, you can use the single inspector so you can make the changes to a single element.
Below the inspector, you will be able to see search icon that will help you find an element you are looking for. You can also open CSS editor that will help you write CSS codes and implement them immediately. You can also go into the responsive mode to make the changes in the responsive mode. If you want to go into the details and you want to create a proper design, then it will allow you to work on the layout without any hassle. You can use a wireframe to customize the complete design easily. By selecting a specific element, you can click on design information to get all the information you need for typography and size of the images. You can use the animation manager as well that will help you create animation for different elements.
Moreover, you can check the breadcrumbs on the lower part of the page, it will give you a clear idea of the element that you are editing and you can check out all the classes and sections.

Whichever element you are selecting with the inspector, you will get all the editing details on your right side. You can change text, background, margin and all the other properties that you wish to change.

How To Design Your Website Using YellowPencil

With the help of YellowPencil, you can easily create a unique design for your website. If you need to edit every single element and you want to create a perfectly designed website, then it will provide you all the great options. You can follow a few basic steps and get started with this plugin. Let’s have a look at how you can easily edit your web pages using YellowPencil plugin.

Selecting The Best Theme

First of all, you should always consider the perfect theme for your website. If you like a specific design, then you should consider using it for your website. Once you have selected a perfect theme for your website, you will be able to move on and choose the best option for yourself. Make sure that you are selecting a design which is according to your requirements. After installing the theme, you can go on and install YellowPencil plugin as well.

Installing YellowPencil Plugin

Installing plugin is easy. All you have to do is to purchase and download YellowPencil plugin from CodeCanyon. After downloading, you can install the plugin using the WordPress interface. Go to the plugins and add a new plugin. There, you will be able to install the plugin. You can also use FTP for installing the plugin. Once you have installed and activated the plugin, you will be able to edit all the pages that you have created on your website.

Editing Pages

Now you can easily start editing pages using YellowPencil. First, you will have to create a page and start editing elements using multiple features of the plugin. If you are editing headings and text, you will have multiple options to do so. You can inspect the element using the inspector and then add background colors, change text styles, add animation effects and much more. This way, you can edit the complete page using multiple elements and styles.

Editing Single Elements

If you need to edit a single element, then you can easily customize it according to your requirements. Whether you need to change the size of a single element or you want to change the position of an element, you can easily do so. You can move the cursor to any single element, and you will have multiple editing options. You can easily adjust the length, height, and width of a single element using this plugin.

Using Wireframe

Using Wireframe tool will allow you to get rid of all the clutter and let you focus on your work.

Using Animation Manager

Animation manager is a great way to give a beautiful look to your web pages. You can select any element that you want to animate and then you can apply your favorite animations. If you need to edit a single image and you want to add animation effects, then you can have multiple animation effects. You can add bouncing effect, flash, spin, shake and much more effects.

Checking Responsiveness

One of the most important things that you will have to take care of when editing your website is responsiveness. Make sure that you are using the responsive mode so you can check the pages. If you are not testing the responsiveness of your site, then you are making a huge mistake. Always check the responsive mode when editing your website so you can easily get a clear idea of how your website is going to behave on different devices.


 
 
Microthemer - Visual editor for your WordPress site

Overall Conclusion

Personal speaking the better of these plugins is Microthemer because it utilises the ribbon toolbar like many other well known applications and is docked in a familiar place on the screen. This is not only the reason why this is a better method of toolbar docking, when using different sized screens for editing WordPress, a ribbon based toolbar does not reduce the screen width. You are still able to see the entire screen width without a side docking toolbar inflicting itself upon you. We came to the conclusion they hinder editing because they are always in the way. Using larger format screens this is less of an issue and less noticeable. When choosing applications or plugins its also good to keep in mind how large they are, content size, lightweight plugins impact your website loading speeds less. Page loading speeds a vital aspect of any website these days and we personally favour lighter weight plugins.

Please Register or Login to post comments

Register | Lost your password?

4 comments on “WordPress Design Customization Made Easy”

  1. Wow, superb weblog layout! How lengthy have you been blogging for?
    youu made running a blog look easy. The whole glance of your website is wonderful, let alone the content!

  2. Woah! I'm reaⅼly digging tһe template/theme օf tһiѕ website.
    It'ѕ simple, yet effective. A lot of tіmes іt's tough tо ցet tһat "perfect balance" bеtween usability ɑnd appearance.
    I mսst say tһat yߋu've done a awesome job with
    this. Іn аddition, the blog loads very quick foг me on Opera.
    Exceptional Blog!

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram