← Back to Tutorials

How to automatically remove elements from your screenshots

Learn how to hide or stop unwanted elements from showing up in your website screenshots in the PagePixels web app.

Introduction

If you want to remove an element from your screenshots, you can use PagePixels' CSS Injection feature.

With PagePixels Custom CSS Injection feature, you can apply custom CSS styles to a web page before taking a screenshot, including CSS that removes an element.

For Example

#selector-for-element-to-remove{display:none !important;}

PagePixels is free to start, and the CSS Injection feature is available in the:

To help demonstrate how to use CSS Injection for removing elements, this tutorial shows the steps to remove the right navbar element from a public Looker Studio report in the PagePixels web app.

Looker Studio report before Custom CSS Styles are applied
Looker Studio report after Custom CSS Styles are applied to remove right navbar

How to remove an element from your screenshots using Custom CSS

To automatically hide an element and capture a screenshot of the resulting web page in the PagePixels web app:

1

Visit the web page in incognito mode

2

Open your browser's developer tools

Right-click on the element you want to remove, and select Inspect from the list of options.

Note: If you're having trouble opening your browser's developer tools, try pressing F12 on your keyboard.

3

Find and confirm the element in your developer tools

In the Elements tab of your Dev Tools, hover to find the element. When you hover, you'll see the element highlighted on the web page.

Click on the element.

In the Styles tab, add your CSS inside the element.style brackets and confirm the element was removed.

4

Get a unique CSS Selector for the element

Now that you've confirmed you have the correct element, look for a unique CSS Selector that identifies the element.

For this example, we're going to use the CSS Selector: .gm3-style

Need help identifying the CSS selector? Contact us.

5

Create a screenshot in PagePixels

Log in to your PagePixels account, and click the "+Create Screenshot" button.

6

Set your schedule

Update the scheduling input values to your desired schedule (default is every 5 minutes).

Note: See our How to schedule screenshots guide for examples of different scheduling options.

7

Add your URL

Copy your web page URL and paste it into the Website URL to Capture field.

8

Add your custom CSS

In the CSS Injection field, add your CSS Selector and apply CSS styles that hide the element.

For example: .gm3-style{display:none !important;}

Your screenshot automation is now running, and your first screenshot will be taken shortly.

Need help with your CSS or automating your screenshots? Contact us.

What else can PagePixels do?

When you automate screenshots with PagePixels, you can also:

  • Schedule website screenshots by time interval, days of the week, time of day, and time zone using PagePixels' built-in scheduling system.
  • Run a series of user browser actions on a web page before taking a screenshot, such as filling out a form and clicking buttons, with Multi-Step Screenshot functionality.
  • Automatically send screenshots to a Slack channel, a Custom Webhook address, or save the images in your Dropbox account.
  • Integrate your screenshots with thousands of services, such as Google Drive, Google Sheets, OneDrive, and Discord, with our Zapier and Make.com integrations.
  • Automatically have AI process your screenshot images with the AI Analysis Screenshot feature.
  • Dynamically display the most up-to-date screenshot on your website, data visualization tool, and app with a single Embed URL.
  • Leverage proxies to capture website screenshots from different locations around the world with the Real Location Screenshots feature.
  • Convert data from third-party APIs, HTML emails, and other HTML content into screenshots using the Custom HTML Screenshots feature.
  • Use PagePixels Screenshots API to add screenshot automation to your web application.
  • Ask AI to compare and contrast multiple screenshots or other images using the Multiple Image AI Analysis feature.
  • Capture automatic screenshots of content requiring advanced authentication using the PagePixels Screenshots Chrome Extension.
  • Automate structured data extraction and AI-powered text analysis for your marketing, sales, and lead generation needs with PagePixels' Domain Research feature.

Explore even more possibilities of what you can do with PagePixels on our Features page →

Support

Questions? Contact us anytime by email:

support-tickets@pagepixels.com

Or send us a message through our Support page.