We’re going to show you how you can make serious visual changes to your WordPress websites with absolutely no prior experience of CSS. But first, let’s take a minute for a little WordPress appreciation.
Remember this? This is what WordPress looked like when we first fell in love with it. Eleven years later and we’re still in love with it but (thankfully) it’s changed so much it’s barely recognizable.
From a simple blogging platform to the world’s most popular content management system, WordPress is now the foundation of hundreds of thousands of popular websites with an army of developers working on the platform, and a whole other army of developers building so many themes and plugins for it, that selling them is a full time job for a lot of people. Themeforest is probably the most famous theme shop online, and they boast nearly 20,000 themes, of which a large majority are for WordPress. To put that into perspective, you could have a completely different website every day for 54 years!
You’d be hard pressed to find a comparable product, paid or free, that makes it so easy for non-coders to go from zero to a fully functioning website as easily.
In recent years we’ve seen customization to WordPress made even easier, thanks to the growing list of page builders that help users pull together their own designs with ease. Combine these powerful architecture tools with the growing list of security, sharing and commenting plugins, it’s super simple to build the site you’ve always wanted.
Everything mentioned above will get you 90% of the way; all the content you need, on a platform you trust; looking almost perfect thanks to the hard work of the developers building great themes and plugins.
But even with the best themes you’re always going to want to make small changes. Little visual edits to make a theme yours, different from anything else. Whether it’s rounding off corners or thickening borders or changing the shadow around an object, it’s these changes that make a great theme perfect.
All the changes mentioned above come down to customizing CSS. Easy enough if you’re a designer or a developer, but like trying to read the matrix if you’re not.
Making CSS changes used to mean using tools designed for developers, tools like Browser Inspectors to find the relevant CSS selectors and manipulating them manually. You’d then have to copy that CSS as text, paste it into a text editor to make sure it only had the information you needed and hadn’t picked up browser options like check boxes or the names of style sheets. You’d then either create a child theme for your WordPress site and copy it in there, or use the custom CSS boxes that now come with so many themes. That’s a very long process. With so many steps your exposure to making mistakes is greatly increased and troubleshooting can be a time hog.
Introducing CSS Hero
Just as page builders made changing the structure of a WordPress site easier, CSS Hero makes visual editing possible. As a non-designer you may look at a corner and think “make it curved, it can’t be that hard”, but then you inspect the code needed to make that change and it’s daunting;
Using CSS Hero feels more like using Photoshop or a similar product. Sliders allow you to adjust things like padding, margins, the sharpness of corners and font sizes, while colour palettes let you adjust the default look to better match your brand theme and style.
Even veteran designers and CSS gurus appreciate the user-friendly real-time interface. It just makes things smoother, quicker and easier to adjust.
How easy? As easy as installing a plugin.
CSS Hero doesn’t ship with a long instruction manual because you won’t need it. We’re going to show you how you can customize your site in a couple of minutes.
Get Started
Every customization starts with the click of a blue lightning bolt. This opens up the CSS Hero menu of customizations right on the frontend of your web site, no messing around in the dashboard, making changes and then going back out front to see what they look like. Watch the changes happen as you make them.
What you do with the CSS is up to you, leave it in CSS Hero and it’ll work like a charm with no further action needed. You can also copy it into a child theme or your custom CSS panel. Your CSS, your rules. Let’s jump straight into edits!
Hover, Target, Change
For this demonstration we’re using the Divi theme by Elegant Themes. This is one of dozens of Hero-Ready themes (which means we’ve added all the selectors you need to make it work right out of the box). If you’re not using a Hero-Ready theme, you can still add your own classes and ID’s straight into CSS Hero, or use Rocket Mode, but we’ll come on to that later.
With the exception of adding a couple of pages and a blog post, we’ve started with Divi pretty much ‘as is’. We want to show you what CSS Hero does to a fresh theme. We’re using a blog post as an example because it is perhaps by default, the plainest part of Divi. It’s the only section where you can’t use the built-in page builder, so it’s here you’ll most definitely want to add your own personal touches.
Change the Header Design.
First off we want to change that header–it’s very flat–save for a thin grey line underneath it there is very little going on. We’re going to use CSS Hero to add a drop shadow underneath it and raise it off the page. CSS Hero comes with a bunch of options for adding different types of drop shadows, all of which can be tweaked to help you get the desired effect.
Next we’re going to change the colour very slightly to off white. You can use the in-built color selector to make these changes, or if you’re working off of a color scheme you can just input the RGBA or HEX values. Both are supported and are simple to input.
Next we’re going to target the body section of the blog, by clicking on it so CSS Hero can show us the available options. From here we’re going to change the background colour into a darker grey. Now our header stands out and once we make the additional changes, so will our content and sidebar.
By changing the left area background to white it really sits off the page, but the color dilutes a little at the edge so we’ve given it a darker border just 1 pixel thick. A little adjustment to the border radius gives the section a nice curve and adjusting the padding makes a nice edge around the content.
We’ve changed the title fonts to Helvetica. One of over 100 Google fonts shown in the fonts drop down menu in CSS Hero, but if you want to add one of the other 550+ Google fonts it’s easy to do.
Change the Featured image size
By default, Divi adds the featured image from a blog post underneath the title at full width. This takes up a lot of room above the fold and pushes the text out of view. We’ve used CSS Hero to change the width to 50% and float the image right. By setting the new height of the image to auto it has kept its aspect ratio and the image looks perfect on all devices. We’ve also added a little bit of padding to the image so the text doesn’t sit right next to it. Adding slightly curved corners to the image using the border radius slider in CSS Hero was all that was needed to make this image look perfect.
A few other small edits using CSS Hero including capitalising the meta text, changing the colour and border of the ‘submit comment’ button and we’re pretty happy with how the left section looks. If we compare it to how it looked before, you can see a vast improvement has been made in a matter of minutes.
The Sidebar
We then moved on to the sidebar which again, by default, is pretty plain. By utilizing the same techniques used for editing our left hand section, we were able to quickly apply a curved edge and dark background that help this section jump off the page. We changed the title fonts to match our current customisations and gave them a pale colour to help stand out on the dark background.
We changed the link colors to make them lighter and targeted them specifically for when the user hovers and set a different color. We got rid of the standard electric blue and went with something a little more in keeping with the theme. If you wanted to, you could also set a different colour for active links and links that had been visited in the past using CSS Hero.
What Have We Just Done?
Through the CSS Hero export utility we are able to see what we have just created on our site, on the code-side.
This can be useful for those who want to start understanding CSS, as well for devs who just want to export the generated code and copy and paste wherever they want.
The CSS Hero Inspector
You can even use our new inspector tool to scrutinize the CSS that you’ve created and get familiar with how these changes are made. You can use inspector to make small changes to your CSS too, like adjusting the font size, the curve or thickness of a border, or anything else. The comfier you get with CSS, the more useful the inspector tool becomes.
All in all, these customizations took just over five minutes. Five minutes to completely change almost every element of the blog post.
Hero Ready, Configuring and Rocket Mode
Hero ready themes are good to go out of the box as discussed earlier. Most of the popular WordPress themes are hero ready, including Generatepress, Enfold, Genesis framework, Pagelines DMS, WooCommerce plugin and LayersWP.
This means no configuration is necessary, but if it is, that’s easy too. There are two ways to go about it.
Rocket Mode
A relatively new feature and one that we’re quite fond of, Rocket mode, will automatically search your theme’s style sheet for valid selectors. Once found, it will add them to CSS Hero and allow your non-hero ready theme to work extremely well with no further configuration. If for any reason your theme shows to be incompatible with Rocket Mode, you can add your selectors with the in-built configuration tool.
Adding classes and ID’s to CSS Hero
If you know the classes and ID’s that your theme uses, you can manually add them to CSS Hero and target them just like you would any other element in a hero ready theme. Need help finding them? Try the inspect element tool in most browsers or searching your theme’s style sheet for anything with a dot (.) in front of it or a hashtag (#). Alternatively, most high end themes will include documentation, either within the theme itself or on their website with the relevant selectors you need.
Page Builders, Plugins and CSS Hero
We mentioned earlier about the structural benefits of using a page builder to speed up/make easier the process of building pages in WordPress. But you’ll still want to control how they look, right? The same can be said for plugins that build forms, add tables etc.
That’s one of the reasons we’ve looked beyond just themes when building CSS Hero. You’ll be able to use it straight away, just as shown when editing the blog page, with a bunch of cool WordPress resources. Beaver Builder, a very popular page builder is fully compatible with CSS Hero, as is Visual Composer and Contact Form 7. Check to see if the plugins you’re using are compatible here.
So that’s it! Without ever knowing CSS (or any other programming language for that matter) you can build a fully responsive, highly customized WordPress website. If you do, or have built anything using CSS Hero, be sure to let us know in the comments. We’d love to see it!