How to add custom CSS to your WordPress Site

Are you struggling with How to add custom CSS to your WordPress Site. Sometimes you need to add Custom CSS to your WordPress site according to your requirements. For most beginners with a non-technical background, using FTP is confusing, but there are other ways to add it to your WordPress Site.

You will learn how to easily add custom CSS to your WordPress site without editing any theme files or any technical knowledge.

We have two easy to follow methods:

  • Using Theme Customizer
  • Using Elementor Pro

Method 1: Using Theme Customizer

So, You can now add custom CSS directly from the WordPress admin area. This is super-easy, fast and you would be able to see your changes with a live preview instantly.

First of All, Login to WordPress Dashboard.

Now click on Appearance >> Customize from the left sidebar.

 

Now A page will appear where you will see the WordPress theme customizer. Then click on the Additional CSS tab from the left pane.

 

 

When you click on Additional CSS then the tab will slide to show you a simple box where you can add your custom CSS. As soon as you will add It, you will be able to see it applied on your site’s live preview pane.

 

you can continue adding custom CSS code until you are satisfied with how it looks on your site, you can see it applied instantly.

And don’t forget to click on the “Save & Publish” button on the top when you are finished otherwise changes will not saved and not displayed on your site.

 

Method 1: Using Elementor Pro

In this method, We will discuss how you can add custom CSS using Elementor Pro, Follow these steps:

  1. First of all, You have to log in to your WordPress Dashboard
  2. Now you have to open your Specific Page where you want to apply Custom CSS (Open With Elementor).

Note: You can add Custom CSS on your whole Page Or You can add Custom CSS on specific Blocks in your Elementor Page, So the choice is yours, We will Discuss both.

1: Adding Custom CSS on the Whole Page

Click On Setting Button at the Bottom Left.

Now Click on Advanced tab and then you can add Custom CSS.

 

 

2: Adding Custom CSS on Specific Block

Click on Specific Block where you want to add custom CSS.

 

Click on Advanced Tab and then You can add Custom CSS by clicking on the Custom CSS button like the picture below.

 

Add your desired CSS here…

We hope this article helped you solve your problem.  You can also check our article on how to install the Astra theme in WordPress.

For Installing the Woccommerce plugin, follow our step-by-step instructions on how to install woocommerce on WordPress.

If you find any problem, tell us in the comment section below, we will answer you ASAP.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *