How to Use Inspect Element to Edit CSS in Divi
In this tutorial, we cover the basics of Inspect Element including how to enable it, how to customize it to your liking and how to view the HTML, classes and the CSS. We then go over how I use it to look at styles from one site and replicate them on another. In this case, we’re going to take the blog styles that are currently on my front page and replicate them on my test site. I was going to give you the code below but since I show you how to do it using inspect element, what kind of teacher would I be if I just gave you the code and didn’t let you try it out?!? 🙂
I really hope this walkthrough of inspect element helps give you a basic understanding of how it works and gives you the same mindset that I have…that the sky’s the limit with Divi, WordPress, CSS and Inspect Element!
- Google Chrome Inspect Element Tutorial for Divi – BeSuperfly.com
- Where to Put Your Custom CSS in Divi – JoshHall.co
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Thanks so much for this! Since i first saw you use it, I have been using the inspect element tool more and more as i practice my web design skills.
I have one question though; why is some of the CSS code in the inspector greyed out or has a strike through? I noticed one striked out line of code in the video that you clicked on and then were able to edit, so i made a mental note to ask about that!
Really appreciate these tutorials! Thanks! 🙂
Awesome to hear, Kelly! The greyed or striked out code is code that is being overwritten. A lot of times when I write CSS, I have to use !important to overwrite what Divi currently has in place. Sometimes elements have multiple options but the code that’s either at the bottom of the style sheet or has that !important tag will overwrite. Hope that helps!
Great tutorial Josh! Inspect element can be a bit confusing to learn, especially trying to find the correct corresponding code in the right-side window, but I’m working on it, and this helped. Thank you!
Awesome to hear, Tony. Glad the tutorial helped!
Hello,
Thanks for the tut, however I can never find the source with inspect element ? I follow your vids but I dont see the source when I do the same. For example I click on a pic in one of my rows on my site and get the below when I click on inspect element. The pic is part of a text module with the pic in it. (if that makes any sense)
element {
}
img {
max-width: 100%;
height: auto;
}
a, abbr, acronym, address, applet, b, big, blockquote, body, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, tt, u, ul, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
font-size: 100%;
vertical-align: baseline;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.et_pb_text_align_left {
text-align: left;
}
.et_pb_blurb_content, .et_pb_circle_counter, .et_pb_contact_main_title, .et_pb_countdown_timer_container, .et_pb_counter_title, .et_pb_gallery_item, .et_pb_newsletter_description, .et_pb_number_counter, .et_pb_portfolio_item, .et_pb_post, .et_pb_pricing_content, .et_pb_pricing_heading, .et_pb_promo_description, .et_pb_slide_description, .et_pb_tab, .et_pb_tabs_controls, .et_pb_team_member, .et_pb_testimonial_description_inner, .et_pb_text, .et_pb_toggle_content, .et_pb_toggle_title, .et_pb_widget, .product {
word-wrap: break-word;
}
body {
color: #666;
font-family: “Open Sans”,Arial,sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.7em;
}
body {
line-height: 1;
Hey Faiek, I’m not exactly sure what you mean here but yeah sometimes it can be a little tricky pin pointing the right element. I just recommend using the selection tool shown in the video and just looking from there. It does get tricky sometimes if elements are buried in the code and I still struggle with that too. Just stay patient and keep at it!
Thanks Josh, its reassuring to see evens the experts struggle at time lol. Its frustrating yes but thanks to guys like you there is light at the end of the tunnel. Once again thanks for your great tutorials,help and feedback. Have a great new year, see you on the other side 🙂
Thanks for the awesome comment and feedback, Faiek! Have an awesome New Year as well.
Oooh! This tutorial helped me a lot, solve many small issues on my page… 😀
Earlier i have used StyleBot chrome extension – Never again!
The Google Inspect-tool is just awesome! 😀
Quick ask at last: Is there any particular reason why you put everything in style.css rather than “Custom CSS”?
Awesome to hear! Yeah it doesn’t get any better than the Inspect tool. I always prefer to put custom CSS in the stylesheet directly because you can access and open it via FTP. It’s just easier to navigate and edit, especially when you get into hundreds or thousands of lines of custom code.
Thanks for another great tutorial Josh!
You got it, Eric! Thanks!
Josh,
Great tutorial as usual. I am trying to implement the “hover” and bottom solid bottom border as noted in the tutorial, but I am not able to load the “hover” or “bottom-border” I keep getting the Chrome “web-kit” selections. Any thought?
Thanks,
Steve
mmm not sure exactly what you’re seeing Steve. Can you post a screenshot? Here’s a free tool for that if you don’t already have one: https://imgur.com/