A typical question every beginner webmaster is facing sooner or later is “how do I remove this element from my site“: if the element is not something that belongs to the content area, it can be quite hard to understand how to proceed, depending on the used Theme.
To actually remove a template element, given that there is no option for doing that in the Customizer, you’d have to edit the .php Theme files, which is not easy if you are not familiar with, and has another drawback: upon updating the Theme you would lose the change and you’d have to do it again.
That’s where hiding with CSS can sometimes have it’s place; and using CSS Hero, in a couple clicks, you can hide every element very easily. With some caveats.
Hiding content with CSS is something that should be done with great caution. If you just need to remove a small label on your site, it can be an acceptable solution – but if we’re talking about a longer text, or something like a breadcrumb, or something that contains links, or headings, it’s not a recommended way to accomplish your task, as search engines may “think” you’re trying to fool them and punish your site for that.
As can be said for many things, the dose makes the poison.
Basically if there’s some kind of content inside the element you want to hide, you should question yourself: “Should I really do this?” but there can be some use cases which are totally legit in my opinion.
Some examples of legit cases could be:
- Hiding an element which is empty, like an widgetized footer with no widgets, that looks like an empty rectangle
- Hiding the article’s date in the single post template
- Hiding the Woocommerce product sorting widget
So let’s see how to proceed to hide an element of your site with CSS Hero
- Launch the CSS Hero editor
- Select the element you want to hide (by clicking it, or right clicking an option)
- In the editing panel, go to Properties > Extra
- Set the Display property to None
While doing the last step you will see the element disappear. Make sure you are not hiding “too many elements” with your last edit: if this should be the case, just undo and repeat the selection step with more accuracy, for example using right-click and the “only this” features.
Now let’s say you’ve hidden an element, and one week later you change your mind, and want to un-hide it. This could be not easy to accomplish – as if the element is not shown anymore in the page, how to select it?
Luckily, in these cases you can use the Inspector tab (on the top left corner), which will show all the CSS Hero generated code.
In this case, you’ll want to search for display: none; (You can use cmd-F / alt F to search in the code editor) and manually remove the row from the code, which will instantly show it again, provided you’ve picked the right statement: if you did this more than one time, you’ll have to identify the right one of course.