Post Contents
Intro To Chrome Developer Tools
Google Chrome Developer tools will quickly become your go-to tool to solve your Elementor Pro problems.
Maybe your live site looks different from your development view?
Possibly you can’t get a particular font, color, padding, or size to work like you’re expecting it?
Inspecting your elements will allow you to diagnose and fix these issues and more.
In the old days, we had to go back to our source code and try to find the issues with a lot of trials, save, view, and error.
Today, the inspector tool gives us power way beyond view source.
Now we can see all of the styles affecting any of our elements.
Also, we have an interface to experiment with and change our CSS.
We can do this in a real-time test environment then copy our CSS back over to our live site.
Accessing Inspector
If you view your live website, you can pull up the inspector by right-clicking anywhere on your website and then clicking inspect.
This will pull up the built-in chrome developer tools panel.
The tools panel can initially look a little overwhelming, don’t worry.
We will only use a few parts of it for now, but this tool is as powerful as it looks, and we’re only scratching the surface.
Along with using the: Right-Click > Inspect functionality, the other way to pull up the developer tools is just to hit F12 after you’ve clicked somewhere on your site so that it is in “focus” as opposed to some other website, window, or application currently running on your computer.
Elements Of The Developer Tools
When you enter the tools panel, you will have several options in the menu bar at the top of the window; Elements, Console, Sources, Network, Performance, Memory, Application, and Security.
For our purposes, we are going to focus on the first option, Elements.
Additionally, there will be 3 main windows, or sections.
The three sections are the DOM Panel, The Styles Panel, and The Console.
If you happened to open Dev Tools with F12, this would default to taking you to the Console Tab.
The console panel is a whole other tutorial entirely, so for now, let’s click back over to Elements.
When you open the panel, you should have three sections showing in 3 windows.
If your page is wide enough, you will likely have two windows on top and a long window underneath them. If your page is narrow you will likely have three stacked panels.
Main Section - The DOM
The first is going to look like all the HTML on your page. This window is not precisely your HTML, but that’s close.
This window is actually what would be called the Document Object Model, or DOM.
The DOM is the final outputted HTML after all the scripts and elements have been rendered.
If you have interactive elements on your page, this window will change on the fly in real-time as it monitors your site.
The Tree of Elements like DIVs and Sections are called nodes, don’t worry though, you won’t need to memorize the terms DOM or Nodes to utilize the inspector, but it’s good to know.
Next Section - Styles
The Styles section is going to be where we will work the most. Like the top section, this has many options; Styles, Computed, Layout, Event Listeners, and a few more.
We’re going to keep it simple and focus on the first two, Styles and Computed.
Final Section - Console
Since we’re not going to cover this in this tutorial, I will tell you this is where you can test and run javascript and more tools right on your site.
We can close this section to give us more room for the other two for our purposes. Click the X in the top right portion of this window to close it.
Positioning The Developer Tools
Everyone’s workspace is different. Depending on what screen or screens your working on, you might want to move this Chrome window to another location.
The good news is you have full control over this. If you click on the three little dots in the dev tools panel (not the three dots that controls your whole browser), you will see four small icons.
These four icons correspond to where your developer tools panel is positioned.
I like to use the first option, which puts the panel in its own window.
If you’re lucky enough to have more than one monitor, this is the route I would recommend.
Editing The Page In Your Browser Window.
Keep in mind that everything we’re going to do in the Google Chrome inspector affects the current window we’re looking at only.
Nothing you do here will change anything on your website, and if anyone else in the world is looking at your website, they will not see the changes you are making here either.
You can try this out by going to any of your favorite websites and inspecting the page, right-click and delete any of the page nodes and you will see them disappear.
Or if you want to have some fun, you can change the content on the page!
Let’s say we want to edit the New York Times.
*tip 1 – if you right-click, inspect element on top of a specific image, heading, or any other section, it will take you right to that element.
*tip 2 – Pay attention to this little guy. If you click on the top left box with an arrow in it seen here, you will be able to click on any element in your main window to go right to it.
Editing Your Content - Computed
Back on your site, as you mouse over the Nodes in your website’s DOM view, you will notice that the sections light up in blue.
If you click any of those nodes, they will be selected, and you will be able to see what styles are affecting them.
From the Styles tab, it’s relatively difficult to see what’s going on, but if we click over one to the “Computed” tab, everything becomes clear!
From the computed tab, if you click the little triangle at the start of the line, it will show you all of the styles affecting your element. You will notice all but one of the styles are crossed out since only one property takes priority over the others.
Often you will see that there are multiple styles assigned to one element. Multiple styles are typically true for headlines when it may have two or more font colors that have been given to them by your theme, then Elementor, then your local settings, and possibly some other styles.
If you want to see what your page will look like with your style modified, you can click the little arrow in a circle, and it will take you to the actual class of the object. Here, you can uncheck it to take it off, in which case it will apply the next class down, or you can change it.
Try this out by going to one of your headlines and changing the font size.
Modifying your fonts with the Chrome Dev Tools is a great way to quickly see what your different fonts or colors will look like in various sizes and styles on your page.
Troubleshoot Your Page
For all the people who have trouble with fonts, you will most likely see the font you want on a lower level, and some other font is taking priority over it.
With this inspect element functionality, you will see what is causing your font to display incorrectly, and from there, you can change it.
Inspect element will also work to figure out why some area of your page shows up at the wrong width, height, line-height, or any other style that could affect your elements.
Modifying Classes On Your Page
Let’s take a look at the following Headline. I’ve purposely created a bunch of different levels of styles that are attached to it. Feel free to inspect this and follow along.
Sample Headline
On the visible level, we have Times New Roman!important. If we click the arrow with the circle, it will take us to the primary style. From here we can uncheck it, and our font reverts to Rock Salt.
If we go back to the computed tab again, you’ll see Rock Salt is now active. We can repeat this with Rock Salt, clicking the round arrow, and unchecking it.
Then Comic Sans MS is our font. We can repeat this process several more times and work our way through the inherited class of the page, then Tahoma, then the global font Montserrat, until it gets to the default browser font.
Adding Classes To Your Page
Adding classes is where the inspect element tools shine.
If you select any title, section, column, or button on your site, you can add classes to it and then copy those styles over to your live site to make them work for your page.
Let’s take a look at that heading from above. If we select it so that the node and the on-page element both light up in blue, now we’re set to add a class to it.
From the styles panel (not computed), you will want to click the little Plus + button.
Now we have a new class sitting here waiting for us to add some styles to it.
Let’s try putting this in there:
font-size: 30px;
color: green;
font-family: ‘Alegreya Sans’;
text-decoration: underline;
font-style: italic;
text-transform: uppercase;
letter-spacing: 10px;
And the result…
Now, if we were to copy this whole bit of CSS we could paste this into our pages CSS or our Global CSS and it would be live on our actual website.
h6.elementor-heading-title.elementor-size-default.elementor-inline-editing {
font-size: 30px;
color: green;
font-family: ‘Alegreya Sans’;
text-decoration: underline;
font-style: italic;
text-transform: uppercase;
letter-spacing: 10px;
}
Be Careful Copying Styles
The problem with just copying styles as we did above is when we inspect Element; Chrome Dev Tools doesn’t know anything about the rest of our website.
The code above would work, but it would work on EVERY H6 on our website, which may not be what we want.
Adding unwanted CSS is especially true when your updating padding, margins, or any other spacing types.
You need to know if you want changes to be to a single Element or all of your elements with that class.
Luckily the Fix is easy.
We need to add a class to our element inside of the Elementor editor.
Giving the element a class will allow us to use that class as part of our CSS as a target so that our style only affects the items we want.
For the example above, I added a class to the outermost section called sample-headline.
We will want to include this class in our CSS.
To define the style of a class, we need to add a period before it.
We can first add .sample-headline to the start of our CSS and see if it still works?
In this case, it did, so my final CSS will look like this:
.sample-headline h6.elementor-heading-title.elementor-size-default.elementor-inline-editing {
font-size: 30px;
color: green;
font-family: ‘Alegreya Sans’;
text-decoration: underline;
font-style: italic;
text-transform: uppercase;
letter-spacing: 10px;
}
Targeting Multiple CSS Elements
Often we will want to target an element with some CSS. We will add a class to a section, column, or inner-section, target that class, and … it doesn’t work? Why?
When CSS does not work the way we want, it usually has a lot to do with how Elementor is designed.
There are usually many more hidden levels inside your sections and columns that you don’t have direct control over inside the Elementor editor, but we can access them through CSS.
Let’s look at the following examples. I’ve outlined my sections in red, the columns in blue, and the inner section in green.
I’ve added the following classes accordingly, kcs-section, kcs-column, kcs-innersection, and kcs-button.
If we didn’t directly add this button, we might not have the option to target its class directly like in a form.
Let’s try and change the second button’s styles.
The first step we will do is to right-click on our second button and go to the inspector.
To show this example fully, click directly on the text in the button, so that the highlighted section is the <span class= portion in your DOM panel.
With the button highlighted, let’s use the + and then add this in:
color: #000;
font-size: 20px;
text-decoration: underline;
letter-spacing: 1px;
padding: 0px;
You will notice two things.
The first is that our styles were applied to both buttons.
The second is that the padding was not applied?
If we look at the button’s computed style, you will see it already has 0px for padding?
The padding is actually on the A tag above it.
We will have to add another bit of CSS for the padding.
In both cases, we can’t use the kcs-column class or the kcs-section class because the other button is in both of those too.
The class we can use is kcs-innnersection.
So the final CSS that we will add globally will look like this:
.kcs-innersection a.elementor-button-link.elementor-button.elementor-size-sm {
padding: 0px;
}
.kcs-innersection span.elementor-button-text.elementor-inline-editing {
color: #000;
font-size: 20px;
text-decoration: underline;
letter-spacing: 1px;
padding: 0px;
}
Final Thoughts
Getting to know and use Chrome Developer Tools or the Firefox and Edge equivalents will change the way you work on websites.
You will become faster and understand the concepts of how all of the pieces work together much easier.
I highly recommend you explore CSS and all of the things you can do with it to enhance your Elementor Pro websites.
Some of my favorite places to check out are w3schools and CSS-Tricks.
Are you having trouble targeting some part of your CSS?
Do you have some suggestions to make this post better?
Let me know in the comments!
2 Responses
I’m having trouble understanding how to use chrome Dev tools properly
Hey Wisdom,
They can appear a little overwhelming at first, for sure, took me a while too, and there is still a ton more I don’t quite understand or use optimally yet. Definitely switching back and fourth from the computed view was a huge breakthrough for me. Do you have an example of something you’re trying to look at that I can try to help you out with?