Divi: The best WordPress theme of all time!
With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.
How to customize the CSS of your WordPress website? Find out in this article.
No matter what WordPress theme you choose for your website, there will be other websites that will use it. And even despite the many customization options that many WordPress themes offer these days, you can make your website even more unique.
For really to touch the visual aspect of your WordPress theme, you must go beyond the standard customization offered by the options or settings of a WordPress theme. CSS customization of your WordPress blog will allow you to modify the look of your website to make it truly unique.
This tutorial will look at the variety of methods available for customizing your website with CSS, creating and customizing child themes, using WordPress customizer plugins and CSS WordPress plugins.
Then find out together our list.
CSS: The basics and how WordPress uses them
First of all: CSS stands for Cascading Style Sheets, which is not clearer than the acronym. So, let's break it down.
A style sheet is a document describing styles (Such as font, colors, etc..) to be used for the presentation of another document. In our case, we are dealing with a style of the web pages.
The part "cascadingOf the name is part of what makes it truly powerful. Web pages can be designed with multiple style sheets, like a cascading waterfall, with the bottom sheet adding or replacing styles from a higher level. This is important because the way you add your styles will overwrite the original changes.
As simple as it sounds, CSS can be used to change just about anything on a web page (including layout, colors, fonts, and even animations).
Learn how to manage your notifications by discovering How to manage email notifications on WordPress
Most WordPress themes use CSS code available in a file called style.css. If you open this file, you will see a complete list of style rules for your WordPress theme. Whatever you do, do not modify this file! The updates will overwrite your changes.
There are several ways to add a custom CSS code to your WordPress theme so that your changes survive an update of the WordPress theme.
How to customize your WordPress website with CSS
Now that you have a better understanding of what CSS is and how WordPress themes use them, we're going to take a look at the options you can use to customize your WordPress blog, and we'll discuss the pros and cons of each method.
At the end of our work, you will be able to determine which method corresponds to your WordPress theme.
Option # 1: Customize CSS using a child theme
If you use un Child theme in order to customize your CSS code, updates to the themes we talked about before will no longer be a problem. An update of a WordPress theme will affect the theme "parent», Leaving the changes to your child theme intact. Many WordPress theme developers understand the utility of a child theme.
Creating a child theme is pretty straightforward. It consists of creating a folder on your web hosting which includes a file style.css which lists the parent theme as a template, and imports file style.css of the parent theme (do you remember the meaning of 'cascading' style sheets?).
WordPress Codex has more information on creating child themes.
Once you've created your child theme and properly activated it, you can start customizing your WordPress theme. The fastest way will be to edit your file style.css, which can be accessed in two ways.
Easily create your website with Elementor
Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.
The first is to use the editor included in the WordPress dashboard, by clicking on Appearance> Editor. THE'editor displays a list of files on the right available in the theme (Only popular files are displayed). Your file style.css will be at the very bottom of the list, and clicking on the option Style Sheet your file style.css will charge.
You can add your changes to this location and save the change.
The other way to access your file style.css (The one we recommend) is to browse the files in your web hosting via a FTP client or a file manager. The child theme folder you created will be in the " wp-content> themes« . You will be able to use a text editor to edit the file style.css.
Option n ° 2: Customize the CSS from the Customizer
As of WordPress 4.7, users can add custom CSS directly from the WordPress admin area. It's super easy, and you would be able to see your changes with real-time preview.
First, you need to head to the page Themes »Customize.
This will launch the WordPress theme customization interface.
You will see the real-time preview of your website on the right with a bunch of options on the left pane. Click on the tab Additional CSS on the left pane.
The tab will slide out to show you a simple area where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on the realtime preview pane of your website.
You can continue to add custom CSS code, until you are happy with how it looks on your website. Don't forget to click on the " Save and Publish At the top when you are done.
Note: Any custom CSS that you add using the Customizer is only available with that particular WordPress theme. If you want to use it with other themes then you will need to copy and paste into your new theme using the same method.
Option # 3: Customize CSS using a plugin
The advantage of using a plugin for CSS customization is that you keep the plugin even if you make a WordPress theme change. This has its trade-offs, as styles cannot display well on all WordPress themes.
Here are some plugins:
1. Custom CSS in Jetpack (Free)
Do you want to sell your products on the internet?
Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.
The WordPress plugin jetpack is installed on over a million WordPress websites, and probably yours as well. It brings features available on WordPress.com for self-hosted websites, and also offers a Module for CSS customization.
Once the module is activated in the Jetpack dashboard, a custom CSS editor will be available, allowing you to customize your WordPress theme without creating a child theme. You access the editor by following this path " Appearance> Edit CSS« .
2. Simple Custom CSS (Free)
If you want a stand-alone option, Simple Custom CSS is a good choice. This free plugin, used on more than 200.000 websites with a rating of 4,9 stars, will definitely help you personalize your CSS WordPress blog.
This plugin does not require any configuration, you just need to install and activate the plugin. To modify your CSS code, go to " Appearance> Custom CSS« in the WordPress dashboard. Apply your CSS changes in the text box and once it's done save your settings.
3. CSS Hero (from $ 14 per year)
The final WordPress plugin option we're looking at today is a premium WordPress plugin called CSS Hero. From 14 $ per year for one website, this plugin allows you to customize your WordPress theme using an intuitive interface.
Designed to work best with dozens of compatible WordPress themes , CSS Hero gives you total control over all the elements of your WordPress theme. For themes that are not on their list, you can use the Rocket mode to enable CSS Hero customization.
CSS Hero removes the need to understand CSS syntax by simplifying interaction with code through an interface, and this goes for animations and transitions. You can also preview your changes in real time, and revert to a previous version.
If you want to completely change the CSS of your WordPress blog, but don't want to learn CSS, CSS Hero is a great option for customizing your website, especially if you are using one of their WordPress themes.
While you know content is important, however, you will want your website to stand out from the crowd, even if you are using a popular WordPress theme. With CSS, you can customize the design of your website so that it is completely unique.
Go further by discovering How to allow users to edit certain pages
So there are several ways to customize the CSS of your WordPress theme:
- a child theme.
- The Customizer.
- A CSS plugin.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Adning Advertising
WP PRO Advertising System is a WordPress advertising management plugin, which offers 18 strategic locations to help you display advertisements on your website. It also has a detailed statistics section from which you will see the performance of each ad.
This feature is crucial because it will help you improve your campaign and maximize your profits. This WordPress Adsense plugin also comes with a unique feature called background ads. It allows you to display ads as the background of your content.
2. WP Media File Manager
WP Media File Manager is a WordPress plugin that makes it easy to organize media library in a form of hierarchy, using the Drag and Drop functionality. It is one of the most powerful WordPress file manager plugins on CodeCanyon. You won't even need to create folders manually.
This WordPress plugin allows you to upload thousands of files from your PC's file manager to the website by automatically copying the hierarchy of the source folder. If you want to have the same file in different folders, know that you now have a real media library that provides this functionality.
Say goodbye to problems downloading specific file types, now you just have to install this WordPress plugin and let it help you manage your files.
3. Menu Hero
Hero Menu is a mega menu WordPress plugin. And while it doesn't do much heroic, it does have all the necessary features for just $ 19. A bit like Mega Main Menu, it's a plugin that also features products featured on CodeCanyon and it has nearly 4500 sales to its credit at the moment.
In the features section, you will quickly realize that it is quite easy to create a megamenu. The process only takes a few steps. But in addition, you will notice that the plugin is compatible with WooCommerce, offers a responsive design and a "drag and drop" interface to create the menus.
The menu builder improves the use of the plugin, and greatly simplifies the buyer's job. UI integration is also a great job and the UI behaves perfectly with other plugins.
Find out about other recommended resources to help you build and manage your website.
- How to password protect a form in WordPress
- How to create beautiful transitions of pages on WordPress
- How to use the WordPress REST API
- How to associate your WordPress website with Telegram
- How to clean WordPress in a few steps
Here! That's it for this tutorial. We hope this tutorial has shown you how to customize the CSS of your WordPress website. Do not hesitate to share with your friends on your favorite social networks.
If you have suggestions or remarks, leave them in our section Comments.