How to hide annoying page elements

Since the very first version of 1Blocker app, you could create custom “Hide Page Element” rules. However, as we have discovered, not many users had enough patience and technical skills to open HTML source of the page on their computer in order to identify correct CSS selector and manually enter it inside the app to hide something. We knew we could radically simplify this feature and thus make it accessible to everyone.

With the latest version of 1Blocker, customizing your favorite websites became really easy. Without even leaving Safari, you can now open 1Blocker Extension and tap on any page element to hide it. Yes, even a child can do that:

Since HTML elements are organized in a hierarchical structure (like a family tree) with multiple elements sometimes overlapping visually, selecting a correct content container with a single tap can be tricky (do you want to hide a particular widget or an entire page sidebar?). To make element selection process easier, there are two “Modify Range” buttons: Expand & Narrow. The former changes selection to the parent element while the latter changes it to the top child of currently selected element.

This feature is also available in 1Blocker for Mac (of course, all your custom rules are synced between your devices via iCloud):

In my personal experience, taking a few moments to simplify the appearance of websites I visit most often made a big difference in pure experience of using those sites and my productivity increased in general. If I see less stuff that may distract me from my current work flow, chances are I’ll be able to finish the task at hand quicker.

For example, here’s how I changed Stack Overflow (a popular Q&A site for programmers) in just a minute to only show me actually useful content:

Not only it looks much better this way but I am also no longer distracted by irrelevant information and buttons I never use. I simplified Twitter as well as other websites I visit most frequently.