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:
To inspect a specific block of text, it’s helpful to highlight the exact text you want to look at before right clicking:
The same idea holds for buttons – just right click on the actual button:
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:
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:
All you need to do is right click on that code and choose Edit Text:
Type in your new text and hit enter. You’ll instantly see the changes reflected on the page:
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:
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”:
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:
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:
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:
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:
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 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:
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 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:
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 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:
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:
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