6 Inspect Element Tips You Can Use While Designing WordPress Websites

Posted on September 24, 2016 by in Tips & Tricks | 27 comments

6 Inspect Element Tips You Can Use While Designing WordPress Websites

Imagine if you had a tool that allowed you to change any aspect of a website without leaving your browser. Sounds powerful, right? Well, get ready for the reveal. If you use Google Chrome, you already have that tool sitting right inside of your browser. It’s a part of Google Developer Tools called “inspect element.”

That’s what this post is all about – helping you streamline your website design process by getting the most out of the inspect element tool. You’ll be editing text, changing colors, and swapping out images in no time! Let’s get started…

Why You Should Care About Inspect Element

I’ve already briefly mentioned inspect element in my post about Chrome Developer Tools. But this awesome tool deserves much more than a brief mention. It lets you rapidly test changes to your site so you can find your perfect design in less time.

Instead of needing to go into the WordPress Customizer, digging around your page builder, or even editing your theme’s source code, you can use inspect element to preview changes in real-time. Changing text, colors, and more literally only takes a few seconds. No saving or page refreshing needed. It doesn’t get much faster than that!

How to Use Inspect Element

Before jumping into how you can manipulate your site with inspect element, it will be helpful to go over how to actually select specific elements to edit. Then, when I show you each trick, you’ll already know how to open up the element you want to edit.

For these purposes, “element” is essentially defined as anything you could click or highlight on a website. So…an image is an element. Text is an element. Buttons are elements. You get the picture!

When you want to inspect a single element, all you need to do is “right click” on that element and choose the “Inspect” option.

For example, to inspect an image, you just right click on the actual image:

how-to-inspect-1

To inspect a specific block of text, it’s helpful to highlight the exact text you want to look at before right clicking:

how-to-inspect-2

The same idea holds for buttons – just right click on the actual button:

how-to-inspect-3

I think you’ve got the idea by now! Just right click on whatever is the object of your desire and Chrome will let you inspect it.

Once you click “Inspect,” it will open up the Developer Tools menu and automatically highlight the element you right clicked on like this:

how-to-inspect-4

The highlighted code on the right is what you can manipulate to quickly change the appearance of your site. In the next section, I’ll show you how this manipulation can make your life easier.

Using Inspect Element While Working on Your Own Site

If you’ve ever used the Divi Builder or the WordPress Customizer, you know how helpful it is to be able to preview any changes on your site in real-time. With inspect element, you can bring that same power to literally any aspect of your site. Quickly change fonts, alignments, images, and lots more.

Using inspect element will save you incalculable time on your projects – I promise! Here are some of the best tips and tricks for getting the most out of inspect element.

Change Any Text on Your Website

Getting just the right length of text is an art form all to itself. I think we all know the struggle of trying to write a one line headline only to have it wrap over to a second line by one word! Or maybe you just want to edit some text to see how the page “feels.”

Whatever your reasoning, it’s easy to do with the inspect element tool.

First, you need to highlight the text you want to edit, then right click and choose “Inspect”. On the right, you’ll see the relevant code highlighted:

edit-text1

All you need to do is right click on that code and choose Edit Text:

edit-text2

Type in your new text and hit enter. You’ll instantly see the changes reflected on the page:

edit-text3

Change Colors in a Jiffy

Picking the right colors for your website is an important choice. It’s also a choice where you might want to test several options to see which looks the best. Once you pick your choices, you can quickly test them all by using inspect element.

Let’s take an example. Say you want to change the background color of the date circle on Elegant Themes:

change-colors1

All you need to do is right click on it to inspect. Once the Developer Tools window opens, you need to find the section for CSS styles. It’s just called “Styles”:

change-colors2

Then find the CSS style for the date circle color. It’s fine if you don’t know a lot of code – most of the time you can just look for the color itself. You don’t need to “read” the code. Once you find that color, click the box to open the color picker and choose whatever color you want! For example, if you want to make it blue, here’s all you need to do:

change-colors3

Simple! Once you get the hang of quickly finding the CSS style you need to edit, you can change colors in only a few seconds.

Test Different Image Sizes

Say you want to test how changing the max width of images in your posts would look. How would you do it? Change the setting in WordPress and keep refreshing the page? That sounds tedious!

A much simpler way is to use inspect element to quickly change the size of images. You can use it to see how all your potential image sizes look. Then you just need to change the setting once in WordPress!

Let’s look at another real life example. Say you want to change the dimensions of the featured image on Elegant Themes. You’d just right click on the image and click “Inspect”. And then you’d go to this handy visual box which depicts the image’s dimensions:

change-image-size

As you can see, the current featured image’s width is 600 px. To change it, just double click on the current width to open an edit box:

change-image-size2

If you change the new width to 400 px, the height of the image will automatically scale to keep the same ratio between the dimensions:

change-image-size3

And when you check out the post, you’ll see the new, smaller featured images. You’ll also see how changing image sizes can have unintended side effects like text wrapping:

change-image-size4

Change or Remove Images

If changing image dimensions isn’t enough, you can always change to a completely new image or totally remove the image.

As usual, you just need to right click the image and choose “Inspect.”

Then, if you want to change the image, you just need to double click on the image link in Developer Tools. Remember, this link will be highlighted by default, so you don’t need to do any searching. After that, just paste in the link to the new image you want to test and hit enter to see the new image:

change-remove-image1

It’s also easy to completely delete the image. All you need to do is right click on the highlighted part in Developer Tools and choose “Delete element”:

change-remove-image2

Change Link States

Ever noticed how most links change color if you click on them? These are called “link states” and are a pretty popular design element. Normally, there are four options:

  • Link – a link that hasn’t been clicked on
  • Active – how the link looks at the exact moment it’s clicked on
  • Visited – a link that’s already been clicked on
  • Hover – how the link looks when a user hovers their mouse over it

If you’re in the process of designing your site, you’ll definitely encounter a time when you want to mimic these different states so you can test how they look.

That’s easy to do with inspect element. Just find the link you want to edit, right click, and choose “Inspect”. Then, in the Developer Tools window you just need to click on the “Toggle Element State” button. Note – the button only sales “Toggle Element State” when you hover your mouse over it:

change-element-state1

Just click the checkmark next to the state you want to mimic. For example, if you select “Hover”, the link will always appear as if a user was hovering their mouse over it. It’s a small change, but you’ll see the link is now underlined because that’s Elegant Themes’ hover style:

change-element-state2

Change Text Alignment

I’m sure you’re familiar with the text-align options in Microsoft Word. You typically have options for left, center, and right. Well, the same applies to the text on your website. For example, by changing one word you could automatically center all the text in your posts.

If you want a quick way to see how it would look, you can quickly move things around with inspect element. Just highlight the text you want to align differently, right click, and click “Inspect”. In the “Styles” tab, you’ll need to scroll until you find the “text-align” option:

change-text-alignment1

Just double click where it says “left” and enter your desired alignment. For example, if you change it to “center”, all the text in your post will instantly be centered:

change-text-alignment2

Wrapping Up

Inspect element gives you immense power to quickly preview changes. When you’re designing a site, you need to be able to test different ideas. And with inspect element, that’s not only possible, it’s also easy to do.

Despite the code contained in Developer Tools, you don’t need to know much–if any–code to take advantage of inspect element. As long as you’re capable of finding the right color or style name, you can make all the changes you need.

And once you get the hang of inspect element, you can apply it to other areas of your life, like giving your friend a heart attack when they leave their Facebook page open!

Now it’s your turn. Are you an inspect element addict? What’s your favorite use?

Article thumbnail image by Le_Mon / shutterstock.com

Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Posted on May 7, 2019 by in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post

27 Comments

  1. I love Chrome’s Dev tools / Inspect

  2. That sounds almost as good as Divi 3 (errrr….3.08 I guess at this point) – except not as good.

    Same but different?

    This would have made a great blog post on ET a year ago. Now – not so much.

    🙂

    • Ron this is different than using a builder like Divi. Not really a way to build your own designs and layouts like how Divi does.. Also you could inspect on any website and begin changing the elements on the site in your browser. Then save that code, it can be a fun way to practice HTML and CSS skills.

      This blog post is very relevant and I will be sharing it with some folks I have been trying to explain this to.

      Thanks!

    • I would have mentioned that FireFox “inspect element” works better. I use Chrome most of the time. But I often have to shift there to get a straight answer on some elements.

      • I’m in FireFox and I find that the IE works differently, so I would have liked to see this compared.

        I did, however, see recently that Chrome has 71% of market share and FF only 17%. I guess we’re in the forgotten minority.

    • Hi Ron,
      It is fantastic how quickly the ET addresses issues and releases new updates to us! Very impressed with their dedication and help.
      What’s great about inspect is you can use this on a live site without effecting the “real” site as you test and explore options. Also great to use on a site that you don’t “own” to see how new techniques might work. And last this provides the perfect tool to discover underlying CSS to make your Divi site (or other sites) more customized.

      • I don’t think the fact that it takes 8 (so far) releases to fix something that took 100+ days and was BETA TESTED is a good thing personally.

        I guess that shows the quality of the BETA testers wasn’t so good.

        I suspect most of the “beta testers” just looked at it and went, “WOW. Look at all the pretty new features. I’m soooooooooo excited!” That’s NOT Beta testing….

        • I guess I see things differently… I really appreciate the effort that ET puts forth to keep bugs from impacting our workflow when using Divi. I guess I have a lot of sympathy and understanding since my clients sometimes have issue with items I deliver (and that is after they sign off as having “tested” or “reviewed” what I gave them).

          I’ve never looked for perfection from life — just how one handles imperfections when revealed. (and I think ET really shines in how they handle the inevitable problems).

          Take care….

  3. Very useful for those that use Divi or other WP themes. As a novice, this post shines a lot of light on how to use the element inspector. As Ron says, seems to function similarly to Divi 3’s Visual Editor.

    • Hey Rodrigo, I’d like to clear up what might be a misunderstanding with this post. The Inspect Element Tool is not an actual editor for WordPress or anything else. It’s simply a way to get a glimpse at the code that is working “behind the scenes” of a design. You can make a tweak here or there to see what happens, but those changes will not remain after you refresh your browser tab. That does not mean that Inspect Element is not incredibly useful. It’s great for taking a peak at how someone else did something you can’t figure out. Or to identify a CSS selector. And many other things.

  4. Nice review of using inspect… As Bob mentioned knowing the CSS for an element is super handy and helps us not bug ET support all the time. and not sure what Ron’s comment mean but good article that is always needed.

  5. I like using inspect, the only problem I am faced with is trying to get it into the actual site.

    I usually copy the whole item and paste it on the child theme, and sometimes that works, sometimes that does not.

    I did enjoy the article though…it is informative, perhaps the next one, is how to implement it on the site.

    In Divi, of course, there are the advance options, but when I copy it there as well, I do not see the changes, I know it’s something I am doing wrong.

    • That’s true!
      The inspector is a really helpful tool to proof changes without making a mess on the web page. However, when you find the point, sometimes, as Carlos suggest, it’s quite complex to get it into the website.
      There would be any possibility to explain carefully the steps that the users should perform to get a perfect implementation?
      It doesn’t matter if it’s in the same “Custom CSS” inside the element or in the theme options CSS. The problem is still there. A problem with the selectors perhaps?
      It would be great a post about it with several examples!
      Thank you very much. 😉

      • Thanks for that great suggestion Daniel, I think we can create a post like that 🙂

        • Thank you! It’s much more than I expected.
          I’m completely sure that it will be really helpful to many others like me!
          I’m eager to read it. 🙂

  6. Forgive my naïveté but before I start playing around with this great tool (thanks for sharing this ) I need to understand 2 things.

    1. Does this work when you’re developing your site on a local server using MAMP (on my Mac). I’m using WP with a theme (I have Divi but am not using it in this instance). I’m using Creativo for this site.

    2. You didn’t mention how to APPLY the changes you’re happy with. I’m presuming you simply click “save” somewhere in Inspector after you’ve finished ALL revisions? Ie; not after EACH revision?

    Thanks again for explaining how Inspector works and what you can do with it. I’ve often wondered.

    Cheers
    Lyn
    SYDNEY AU

    • Lyn,

      1.If you are working in Chrome Browser using MAMP it will work.

      2. The site will change in front of your eyes when you are done editing the css. If it is properly done. To apply it, you would need to copy all the CSS and enter it to the Divi modules that you used them on…or on your themes style sheet and paste the css there.

      hope that helps.

    • Hi Lyn,

      In answer to your questions:
      1. As long as you’re viewing a site in a browser, the inspect element feature works, so your MAMP installation will work.

      2. When you’re editing a site hosted on a machine that isn’t the one you’re using, there isn’t a save feature. However, for a locally hosted site, you can make changes, and then use the save hotkey. CTL + S or CMD + S. It will ask you if you actually want to make changes to files on your computer, and you just say yes. At least that is what my experience has been.

      Hope this is helpful!

  7. Here’s the one I use every day — “Computed”. Inspect an element, then click the “Computed” tab. It lists out the actual CSS attributes acting on that element, including margins, padding, fonts, alignment, and more. Often saves combing through CSS classes and files, trying to guess how the cascading affects the element.

  8. Nice one Brenda, I enjoyed your post tremendously!

    I use both Chrome’s Inspect Element and Firefox but in Firefox I use Firebug which I’m so used to now its a hard habit to break.
    And I use them all the time, even with Divi 3… as headers and footers are not yet editable with the front-end editor

    Some of the other tools (for Firefox) I use to inspect sites that I work on are:
    1. Measureit – its quite old now but still works great
    2. Web Developer toolbar
    3. Sometimes I use Firefox’s Developer Edition Browser – its Beta but I haven’t had any bugs with it yet and it has its own Web Developer Tools build it.

    One of the things I use Chrome Developer tools for is to Toggle The Device Toolbar – very handy for seeing what your site may look like in a variety of different devices and then fiddling around with Inspect Element to adjust any things that may look out of place for mobile devices.

  9. Brenda,

    Great post. I do not do much work in Chrome, but after this article I may reconsider. I do a large majority of my work in Firefox, so I’m typically using Tools->Web Developer-> Inspector. As previously mentioned, Firebug is a great add-on to give you a little more versatility with inspecting elements. It’s a whole lot easier than the right-click (hold “control”+click for Mac Users) and selecting “View Page Source”. Although, I do still use “View Page Source” in conjunction with CTRL+f (macro to perform a find/search function) if I’m quickly looking for a specific piece of HTML code that I can’t seem to find with the inspector.

  10. A very big THANKS to the writer for sharing the information. Very useful for new users like me..

  11. Inspect is the best thing ever! I use it to edit styles as described in the article, but my favorite thing to use it for is password recovery. If your password for a website is stored by Google Chrome and auto populates in the password box, but you wan to recover the password itself, right click in the password box, inspect, then change “type=’password'” to “type=’text'” and viola, your password is visible in clear text. Use this responsibly, however; dont use it on other’s computers while they are in the bathroom! ?

  12. Inspect Element helps us a lot while designing our website so we should usually have more focus over this.I m currently using Google chrome for the inspect element because it has maximum share in the field of Browsers market after it when it comes to the second one i.e Firefox.

  13. This explains live preview changes, but doesn’t address how to actually implement those changes and save them in WP.

  14. I love Huntington Beach!

    Was on holiday last Christmas there and did not want to come back! thanks for you post!

  15. I love Chrome’s Dev tools / Inspect
    wow thanks for sharing The post is perfect !

Join To Download Today

Pin It on Pinterest