So you are a beginner at WordPress? Aha..And you do not know CSS or haven’t even heard of it yet?
The knowledge of CSS (Cascading Style Sheet) is useful especially for the aesthetic look of a website. The layout, fonts, font-size, font-weight, colour, margins, background and many other aspects of a website can be designed using CSS.
You may be wondering “Oh! I thought I just need to be good at writing to be a great blogger”. Well, you are right but not fully. While it is a fact that the content plays a major role in attracting a major traffic to your site but you may also wish to provide a great user experience to your visitors, won’t you?
If you are thinking that this article is going to be too technical and beyond your understanding, then let me assure you that you are in for a delightful surprise.
While designing, I wanted a clean look and basic customisation so as to provide a distinctive signature to my site. Most of the themes available in the market offer you some options out of the box wherein you can choose a certain look for your site. Nevertheless, then this choice is limited and this is when I started exploring various options to help me overcome my struggle with CSS. This is when I stumbled-upon CSS Hero.
Now, I do not have to jump-in to the complex world of CSS for making small (or big) changes on my site. CSS Hero works right out of the box and is the best CSS visual editor I have seen.
I know you are excited to explore CSS Hero, so let’s dive in.
As seen above, CSS Hero stays on the top right corner (once you are logged in to your WordPress account and click on “visit site”) and shows a list of the following options upon clicking:
- The Portrait and Landscape mode shows how the design changes will look on a smart phone, tablet and a desktop in Portrait and Landscape orientation.
- The “history” icon populates the entire history of the design changes made by you and allows you to go back in time and select the desired setting chosen by you at a given point of time.
- If you have saved any setting as a “Preset”, then you can import the same and use the exact same layout by clicking on the “Preset” icon.
- The “Tools” icon enables you to clear undo history, reset settings to theme default and also shows the generated CSS as normal CSS and minified CSS.
Almost everything you do with the CSS Hero begins with the list of icons shown on the top right of the screen. For example, when I make adjustments to the look of a particular portion, I simply click on the CSS Hero icon and then select an item, in this case “Header Title”. Upon clicking on the “Header Title”, the following options can be seen:
Clicking on any of the attributes, further enables you to choose your desired style. I find the plugin most effective and easy to use because of the following reasons:
- Does not slow down your site as it uses resources only while using the “live” CSS editor.
- There is no “lock-in” period to keep your CSS changes alive. You can also export and decide to keep the generated CSS even if you don’t renew your account.
- Intelligent Colour Picking makes it super easy to point and click a colour.
- More than 600 fonts to choose from.
- Point and click interface.
- No learning curve. Start designing virtually instantly.
- Compatible with heaps of plugins. Click here to view the list.
- Compatible with tons of themes including Divi, Extra, Avada, X theme and more. Yes, I heard you. It also supports the Genesis Framework. View the full-list of compatible themes.
CSS Hero plugin price starts at $19 which include 1-year basic support and upgrades for 1 website. Other plans available should you want to install it on multiple websites.
Do not worry about signing-up as each plan comes with a 30-day money back guarantee. Visit this link to sign-up now.
Do tell me your experience with CSS Hero or similar plugins. Do you agree that CSS Hero is the best? What do you think?