Blog

WEBFI-WordPress-Basics of Inspect Element With Your WordPress Site



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:
http://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:
http://twitter.com/wpbeginner

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

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:

http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

source

20 Comments

  • Deadly God on August 25, 2016

    for the css part.why r they lines through some of them? it looks like they r crossed out , if so then why r they there?
    thanks and awesome vid

  • Kundan Acharya on August 25, 2016

    press F12 button For inspect element

  • S Wright on August 26, 2016

    Interested to know what the strike-through means in the Inspect element css side. Really helpful. Thank you.

  • Robin Roelofsen on August 26, 2016

    For the commenters who asked questions about the strike-through CSS lines:

    The CSS lines that have strike-through are overwritten by a later rule.

    Say you specify that the default font on the site is Open Sans, and later on in the CSS file you specify that headings are Helvetica, you will see the line specifying Helvetica high(er) in the list and Open Sans with a strike-through further down the list.

    Hope my explanation makes sense.

  • DOC JAY on September 7, 2016

    very good video … you explained it simply and clearly … thanks

  • Radvis Stankunas on January 27, 2017

    I have a container on my button, because it expands toward the right of the page. I changed its max width on inspector element and it helped. But how do i change for good on wordpress?

  • Vyashya Raj on July 27, 2017

    Thanks guys.This video made my day..
    I'd always have to go to my WordPress Theme Editor and look for anything I want to change but this just gave me super easy way to do my theme changing…

  • Science on September 6, 2017

    hi , i have a question , how can i find where is my element with inspect ? you know i have 2 text in my site want to translate it but i can't find the source , can u help me?

  • infected Mushrooms on March 30, 2018

    Thank u very mush 🙂

  • Random on May 13, 2018

    How do you save changes though ?

  • diL ki bateY on August 2, 2018

    how to save inspect ?

  • Cookiez Smoothie X on October 17, 2018

    THANKS
    btw love this vid-ISUBBED

  • Asim Asad on February 25, 2019

    how we can locate the file, to edit the html code showing on left side, in WordPress installed on localhost .Thanks

  • Javier on April 29, 2019

    Hey, thanks for the tutorial, but how can I access to the HTML I see in the inspector on my WordPress? I need to change some HTML code but I can't find the source code! 🙁 Thanks

  • Health Glows on January 17, 2020

    Thank you for this video. Would you just please tell me how to select the name of the specific element that I want to change in my CSS editor. Thank you in advance!

  • Raúl on February 21, 2020

    Question now, i know css and html, but im having a really hard time to find where is the code in all the may files that a WP website has

  • bignedu on May 15, 2020

    Nice. I found it helpful. Thank you very much.

  • sayandeep bakshi on June 16, 2020

    my inspect element panel comes from the side ..i want to pop it from bottom..how can i do so??

  • Abdulla Shafi on November 17, 2020

    sometimes when i inspect element , i find some html class that are not working on css actually in wordrpess ! I dont know why this is happening ? and sometime css media queries are not working with a specific class ,{but when i try it in inspector area it works but not working after change it permanently !} can you help me please ?

  • voyarismus on November 23, 2021

    Thanks but how about finding the right document for an image source <div class="pic-container"> ? Thanks.

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

error: WEBFINET SECURITY IS ON