Most modern browsers have helpful and powerful tools like inspect element to figure out common problems. The inspect element tool can be opened with your right click or using the buttons control, shift, and I together. In this article we will show you the basics of inspect element and how to use it with your site.
Text version of this tutorial:
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
Check us out on Facebook:
Follow us on Twitter:
Join our circle on Google+:
Checkout our website for more WordPress Tutorials
Summary of this tutorial:
Start by either right clicking and selecting inspect or using the keys Control, Shift, and I to pull up the inspect element tool.
This will cause a lower window to appear on your browser that allows you to see the page’s source code.
The developer tool window has a second window on the side, the window on the left is for the HTML code of your site while the right hand side is for the CSS rules.
As you hover over each piece of code, part of your site will become highlighted for you to know which part you are editing.
You will be able to double click on any element in the CSS pane to edit it or click on the + icon to add new CSS.
Any changes you make in inspect element are not permanent and any changes will be removed when you refresh the page.
Should you want to make permanent changes to your theme we would recommend using a child theme: