{"id":5436,"date":"2017-04-29T14:58:59","date_gmt":"2017-04-29T09:28:59","guid":{"rendered":"https:\/\/weblizar.com\/?p=5436"},"modified":"2025-08-13T10:48:27","modified_gmt":"2025-08-13T05:18:27","slug":"customize-wordpress-diy-tips-tricks","status":"publish","type":"post","link":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/","title":{"rendered":"Customize Through Inspect Element – For DIY Users"},"content":{"rendered":"

Did you ever gave a thought to temporarily customize any webpage to check how it will look like with specific set of colors, fonts, and styling that you always wanted to see on your webpage. It\u2019s possible with a tool that already exists in your browser called Inspect Element and you can customize through inspect element easily. This is a dream come true for all DIY(Do-It-Yourself) users when they find out about it. In this article, we will show you the basics of inspect element and how to use it with your WordPress site.<\/p>\n

Inspect Element, Heard it for the first time?<\/h4>\n

Modern web browsers like Google Chrome and Mozilla Firefox has built-in tools which allow web developers to debug errors. These tools show the HTML, CSS<\/a>, and JavaScript<\/a> code for a page and how the browser executes the code.<\/p>\n

Using Inspect Element tool, you can edit HTML, CSS, or JavaSCript code for any webpage and see your changes live (only on your computer).<\/p>\n

For a DIY website owner, these tools can help you preview how a site design would look without actually making the changes for everyone.<\/p>\n

For writers, these tools are awesome because you can easily change personal identifying information when taking your screenshots eliminating the need to blur out items altogether.<\/p>\n

For support agents, it\u2019s a great way to identify the error that could be causing your galleries to not load or your sliders to not work properly.<\/p>\n

We\u2019re just scratching the surface of use-cases. Inspect element is really powerful.<\/p>\n

In this article, we will be focusing on Inspect Element in Google Chrome because that\u2019s our browser of choice. Firefox has its own developer tools which can also be invoked by selecting inspect element from browser menu.<\/p>\n

Ready? Let\u2019s get started.<\/p>\n

How To Launch Inspect Element?<\/h4>\n

You can launch inspect element tool by pressing CTRL + Shift + I keys on your keyboard. Alternately you can click anywhere on a web page and select inspect element from browser menu.<\/p>\n

\"how<\/a><\/p>\n

Your browser window will split into two, and the lower window will show the web page\u2019s source code.<\/p>\n

The developer tool window is further divided into two windows. On your left, you will see the HTML code for the page. On the right-hand pane, you will see the CSS rules.<\/p>\n

\"how<\/a><\/p>\n

As you move your mouse over the HTML source you will see the affected area highlighted on the web page. You will also notice CSS rules change to show the CSS for the element you are viewing.<\/p>\n

\"how<\/a><\/p>\n

You can also take the mouse pointer to an element on the web page, right click and select inspect element. The element you pointed at will be highlighted in the source code.<\/p>\n

How To Edit Code In Inspect Element Window?<\/h4>\n

Both the HTML and CSS in the inspect element window are editable. You can double click anywhere in the HTML source code and edit the code as you like.<\/p>\n

\"how<\/a><\/p>\n

You can also double click and edit any attributes and styles in the CSS pane. To add a custom style rule click on the + icon at the top of CSS pane.<\/p>\n

\"how<\/a><\/p>\n

As you make changes to the CSS or HTML those changes will be reflected in the browser instantly.<\/p>\n

\"how<\/a><\/p>\n

Note, that any changes you make here are not saved anywhere. Inspect element is a debugging tool, and it does not write your changes back to the files on your server. This means that if you refresh the page, all your changes will be gone.<\/p>\n

To actually make the changes, you will have to edit your WordPress theme\u2019s stylesheet or relevant template to add the changes you want to save.<\/p>\n

Before you start editing your existing WordPress theme using Inspect Element tool, make sure you that you save all your changes by creating a child theme<\/a>.<\/p>\n

Debug Errors On Your Website<\/h4>\n

Inspect element has an area called Console which shows all the errors that exist on your website. When trying to debug an error or requesting support from plugin authors<\/a>, it\u2019s always helpful to look here to see what the errors are.<\/p>\n

 <\/p>\n

\"how<\/a><\/p>\n

 <\/p>\n

We hope this article helped you learn the basics of inspect element and how to use it with your WordPress site.<\/p>\n

If you liked this article, then please subscribe to our YouTube Channel<\/a> for WordPress video tutorials. You can also find us on Twitter and Google+<\/a>.<\/p>\n

Also you can read\u00a0Top Ways To Make Website More Secured<\/a>\u00a0and how to get a\u00a0Free SSL Certificate For Your Website<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Did you ever gave a thought to temporarily customize any webpage to check how it will look like with specific set of colors, fonts, and styling that you always wanted to see on your webpage. It\u2019s possible with a tool that already exists in your browser called Inspect Element and you can customize through inspect<\/p>\n","protected":false},"author":5,"featured_media":5444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[53,400,24],"tags":[561,562,563],"class_list":["post-5436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-web-designing","category-word-press","tag-diy-inspect-element-tips-and-tricks","tag-how-to-check-on-inspect-element","tag-inspect-element"],"yoast_head":"\nCustomize Through Inspect Element - For DIY Users - Weblizar Blog<\/title>\n<meta name=\"description\" content=\"Customizing a website for any user has always been fascinating. Want to check new look of your website? Learn how to customize through inspect element DIY.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize Through Inspect Element - For DIY Users - Weblizar Blog\" \/>\n<meta property=\"og:description\" content=\"Customizing a website for any user has always been fascinating. Want to check new look of your website? Learn how to customize through inspect element DIY.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/\" \/>\n<meta property=\"og:site_name\" content=\"Weblizar Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/weblizarwp\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-29T09:28:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-13T05:18:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/04\/Customize-Through-Inspect-Element.jpg?fit=900%2C563&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"563\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Danish Ansari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@weblizar\" \/>\n<meta name=\"twitter:site\" content=\"@weblizar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Danish Ansari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customize Through Inspect Element - For DIY Users - Weblizar Blog","description":"Customizing a website for any user has always been fascinating. Want to check new look of your website? Learn how to customize through inspect element DIY.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/","og_locale":"en_US","og_type":"article","og_title":"Customize Through Inspect Element - For DIY Users - Weblizar Blog","og_description":"Customizing a website for any user has always been fascinating. Want to check new look of your website? Learn how to customize through inspect element DIY.","og_url":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/","og_site_name":"Weblizar Blog","article_publisher":"http:\/\/www.facebook.com\/weblizarwp","article_published_time":"2017-04-29T09:28:59+00:00","article_modified_time":"2025-08-13T05:18:27+00:00","og_image":[{"width":900,"height":563,"url":"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/04\/Customize-Through-Inspect-Element.jpg?fit=900%2C563&ssl=1","type":"image\/jpeg"}],"author":"Danish Ansari","twitter_card":"summary_large_image","twitter_creator":"@weblizar","twitter_site":"@weblizar","twitter_misc":{"Written by":"Danish Ansari","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#article","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/"},"author":{"name":"Danish Ansari","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"headline":"Customize Through Inspect Element – For DIY Users","datePublished":"2017-04-29T09:28:59+00:00","dateModified":"2025-08-13T05:18:27+00:00","mainEntityOfPage":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/"},"wordCount":764,"commentCount":0,"image":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/04\/Customize-Through-Inspect-Element.jpg","keywords":["DIY inspect element tips and tricks","how to check on inspect element","inspect element"],"articleSection":["Tutorials","Web Designing","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/","url":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/","name":"Customize Through Inspect Element - For DIY Users - Weblizar Blog","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#primaryimage"},"image":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/04\/Customize-Through-Inspect-Element.jpg","datePublished":"2017-04-29T09:28:59+00:00","dateModified":"2025-08-13T05:18:27+00:00","author":{"@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"description":"Customizing a website for any user has always been fascinating. Want to check new look of your website? Learn how to customize through inspect element DIY.","breadcrumb":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#primaryimage","url":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/04\/Customize-Through-Inspect-Element.jpg","contentUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/04\/Customize-Through-Inspect-Element.jpg","width":900,"height":563,"caption":"Customize Through Inspect Element Blog"},{"@type":"BreadcrumbList","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-diy-tips-tricks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/weblizar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customize Through Inspect Element – For DIY Users"}]},{"@type":"WebSite","@id":"https:\/\/weblizar.com\/blog\/#website","url":"https:\/\/weblizar.com\/blog\/","name":"Weblizar Blog","description":"Update yourself with all the latest tech news revolving around wordpress all at one place","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/weblizar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628","name":"Danish Ansari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","caption":"Danish Ansari"}}]}},"_links":{"self":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/5436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/comments?post=5436"}],"version-history":[{"count":0,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/5436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media\/5444"}],"wp:attachment":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media?parent=5436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/categories?post=5436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/tags?post=5436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}