In this article, you will learn how to easily modify CSS on a WordPress site with the help of free tools. For WordPress, you have 2 paid plugins with the help of which you can modify CSS, namely Yellow Pencil and CSS Hero, however, we will not focus on them in this text.
The tool we will use is CanvasFlip Visual Inspector. We do not install it on the site, because it is not a plugin, but a Google extension and works only on Chrome. You can use it very easily and simply, unlike the 2 plugins mentioned above, which are more complex. CanvasFlip is free and just install it on your browser as an extension and you can start editing.
As for CanvasFlip, there is also a paid version, within which you have more options. You can save multiple projects at the same time on their cloud, you can immediately see what changes you have made on the site, in this way several people can change one site at the same time, which is very useful for web design agencies and for some projects where several people work.
One of the downsides of this extension is that there is no option to edit the responsive versions for mobile phones and tablets, but it is quite useful for making changes to the desktop version of the site. The first thing to do is to find the extension on Google and install it. After you have done that you need to click on it in your browser and it will appear as in the image below.
When the button is clicked Inspect and start moving your mouse around the page, you'll notice how you can select different sections and change them live on the site. When you click on a section, you have the option to change its size, margins, spacing, color, font and many other things. Of course, you can change all of this within Elementor and the theme you used to build the site, but some things you may not be able to change, such as header spacing, or you simply want to see the change live on the site right away. Then it is easier for you to use this extension.
You can change everything mentioned above in Elementor, but there are things you can't, which we will write about in the rest of the text. If you click on a specific article in the recent articles section of the page, you will see that you can also change the shading of the element, which is not the case in Elementor. You can change anything you want live on the site and then you can download the file with the CSS changes. To do this, you need to click on the Info option and then click on the button Export Changes as in the image below and you will download the file with the changes.
When you clicked on that button, you received a zipped file containing a css file. Open it in a text editor and copy the css code you need to insert on the site. To do this, you need to click on the option in the control panel of your site Customize. Then when you have done that, you need to open the option Custom CSS/JS and within it to paste the copied css code and click on the button Publish. In this way, you have saved the changes to your site within the site control panel. You can see for yourself that it is quite quick and easy to make changes to the site in this way.
Source: youtube
