How to hide an element on my website?

Table of contents

Picture of Simeon Nenov

Simeon Nenov

Owner of Simplfix Studio
Simeon has been helping businesses increase their brand awareness through digital solutions for many years.

Every website developer encounters the challenge of removing specific elements such as text, buttons, or images. In this short tutorial, you will learn how to effectively deal with the problem.

One way is to delete it from your theme or use your builder (Elementor, Divi, WPBakery, etc). The problem however is that many times novice developers don’t know what is generating the element that they want to hide and therefore they can’t remove it. Luckily there is an easy way.

Learn how to hide an element in your WordPress site through a step-by-step video tutorial.

How to hide an element in your WordPress site.

Step 1: Inspect the Element

The first thing you have to do is open your website on the page where the element you want to hide is. Then, highlight the element, right-click with the mouse, and click “Inspect” (for Chrome).

Step 2: Identify the Element in the Code

Then, you will see which element you have selected to inspect (it will be highlighted). In our case it is

<h2 class="elementor-heading-title elementor-size-default">...</h2>

Step 3: Copy the Relevant Code

Now, look at the top right, where you see the styles affecting the element (in the white rectangle). The only thing you should do is to copy the entire code. In our case:

.elementor-162795 elementor-151978 .elementor-element.elementor-element-41227282 .elementor-heading-title

Step 4: Customize in WordPress Admin

Then, close the inspector window and click on the customize button in your WordPress admin top bar. You have to be logged in as an admin to see it.

Step 5: Additional CSS

Click “Additional CSS”.

Step 6: Paste and Hide

Add the code that you copied and paste it into the code editor. Then simply add this code after it:

{
display:none;
}

And voila, the element is hidden!

If you need help building your site or just want a friendly piece of advice, do not hesitate to reach out!

Cheers!

Sources

The source for this tutorial is purely the author’s real-life experience. It is also done by creating screenshots and a screencast for easier understanding.

Useful resources

https://www.w3schools.com/css/css_display_visibility.asp – CSS ‘display’ property explained

Social Media
Brand Identity
Web Design
Print Design
Look at you! You look beautiful today!