Add an Earth Day popup to your website

Nina De la Cruz Nina De la Cruz 5 min read

If sustainability is one of your brand’s key values, Earth Day is probably marked on your calendar.

Whether you want to highlight your own company’s green efforts or you’re trying to spread the message and drive your visitors’ attention to the cause, that’s great.

To help you out, we’ve prepared a brief, easy-to-follow tutorial on how to add a pop-up Earth Day banner to your website. Below are examples of what it may look like.


This banner is a “lights off” imitation:

And this banner is designed promote your brand's green initiative:

Banners are fully customizable, which means you can adjust both copy and design to align them with your branding. You can use them to:

  • “Switch the lights off” on your website during Earth hour
  • Promote products made of recycled materials
  • Remind visitors that you donate a percentage of each sale to a green organization
  • Let them know you participate in a “Plant a tree” campaign
  • Announce the launch of a trade-in campaign

To create a pop-up banner, like one of these, we’ll be using Getsitecontrol – an easy-to-use website popup builder. It comes with a free plan that allows you to add a non-targeted banner to your website at no cost.

The entire process takes less than 30 minutes, and you don’t need to have any design or coding knowledge.

In addition to promo banners, Getsitecontrol allows you to create email opt-in forms, contact forms, coupon boxes, and surveys.

Let’s get started!

Step 1. Select a template

Open the Earth Day banner gallery on Getsitecontrol’s website and select the template you’d like to use.

Earth Day website banner gallery

Feel free to click around to see how each template looks on desktop and mobile screens. Once you’ve found a template you like, follow the prompts to add it to the dashboard. If you haven’t created an account by now, you’ll be asked to sign up:

Adding a template from the Getsitecontrol’s gallery to the dashboard

It doesn’t matter which template you select: the setup process is completely identical.

In the next step, you’ll be able to edit the text and design of the banner including the background image, color theme, font, and sizing.

Step 2. Type your message

Click on any piece of text on the banner to edit it. Then do the same for the buttons:

Editing text on the Earth Day banner in Getsitecontrol

The default copy uses generic Earth Day slogans, but we recommend that you use your own tone of voice and align the message with your brand. It’s also a good idea to talk about your company’s efforts to maintain sustainability or link to the page on your website where visitors can read more.

In the template we’re using, the first button closes the banner, and the second button takes visitors to a page of your choice.

You can also use buttons to let people copy a coupon code to the clipboard or launch a different popup.

To assign the desired action and set things up, click on the button and use the action menu on the right:

Widget button settings in Getsitecontrol

If you want to remove the button, head over to the top right corner and remove it.

Step 3. Customize the design

To replace the image on the banner, click on it and proceed to change it. You can upload an image from your computer or choose a stock photo from the built-in gallery. Use the search field to type your theme to find a relevant image:

Changing the background image on the Earth Day banner in Getsitecontrol

To adjust the color theme, font, style, and opacity, open the Theme menu. Then toggle the color and opacity controls for the message background, text, and buttons.

Adjusting the Earth Day banner color theme in Getsitecontrol

To see how it’s going to look on mobile, switch to the mobile preview mode; if you find that you need to change the sizing or spacing for mobile, go to the right-side menu and open Container settings.

Earth banner example, mobile view

At this point, the pop-up Earth Day banner is almost ready. The last step is to set the dates (and hours) when the banner will be displayed on your website.

Step 4. Set up a displaying schedule (optional, premium feature)

The Targeting tab allows you to create a schedule to display the banner during the selected days and hours. For example, if you only want the message to remain on your website during Earth Day, select it on the calendar:

Setting up website banner schedule in Getsitecontrol

With these settings, the banner will go live at 00:00 on April 22nd and stop being displayed at 00:00 on April 23rd.

In the same tab, you can set page targeting ( Display widget on ) and audience targeting ( Display widget if ). Page targeting allows you to choose pages where the banner will or will not be displayed. Audience targeting allows you to display or hide the banner based on where your website visitors are located, what device they’re using, whether they’re coming from a particular channel, and so on.

Feel free to explore the available options on your own, or read a detailed how-to guide to targeting settings.

Step 5. Activate the banner

Click through the Next → button to save the banner and activate it:

Widget activation step in Getsitecontrol

If you haven’t done it yet, make sure to install the Getsitecontrol app on your website. You won’t need any technical or coding knowledge for that – just find your website platform on this page and follow the instructions. It will take you less than 10 minutes.

Once the banner goes live, you’ll be able to see how many views it has received, and how many times people interacted with it or closed it. Once the scheduled time passes, the banner will stop being displayed automatically, but you can also edit or deactivate it yourself at any point.

Spread awareness about Earth Day on your website

Whether your company is actively participating in Earth day or you just want to spread the word about the cause and share your message with the visitors, a banner is the most convenient way to do that. With Getsitecontrol, you can craft a beautiful, interactive banner within 20 minutes and set the desired conditions for displaying it on your website. No need to have any design or technical skills!

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Show notifications section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF