Add an Earth Day popup to your website

Source: https://getsitecontrol.com/usecase/add-earth-day-banner-for-website/

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 7-day free trial and requires no credit card to create an account.

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.

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:

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:

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:

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:

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.

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.

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

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:

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

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.

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

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.