How to Create a Website Overlay From Scratch

Creativity knows no bounds. Express your ideas in the form of exciting pop-up overlays and convert more visitors into customers. With Picreel, you can create an overlay from scratch or upload your design and modify its elements based on your needs.

Benefits of creating a new overlay from scratch:

1. Privilege to modify every element according to your requirement

2. Add your flavor to its design so that it connects well with your customers

In this article, you’ll learn:

1. How to Create a Website Overlay From Scratch

2. How to Upload Own Design to Create an Overlay

How to Create a Website Overlay From Scratch

Step 1: In your Picreel account,

• Navigate to ‘Campaigns’ from the dashboard.

• Click on ‘+New Campaign.’

Step 2: Click on ‘+Create from Scratch’ or ‘Create’ to open the editor.

Step 3: You get a blank canvas to design an overlay based on your needs in the editor.

1. Click ‘Design’ on the left panel to change the background color or upload an image/gif as a background.

2. Before editing other elements, you need to create a design. We recommend taking a professional HTML CSS developer’s help in executing this step.

Click on ‘HTML/CSS Editor’ to write your HTML codes in the box and then switch to CSS to edit and present them effectively.

Here’s an example of the HTML/CSS editor view:

You can also add overlay fields, keeping your design and objective in mind.

Once you are done with coding and styling, you can see your overlay on the screen:

You can proceed to the campaign settings page by clicking ‘Save.’ Otherwise, you can further edit the elements on the left panel and move forward.

Step 4: On the campaign settings page,

• Modify the three broad sections to set up targeting preferences for the overlay

1. Basic settings: Whether your timer overlay will display on the whole site or specific pages

2. When Overlay Appears: When will it trigger, and what will be the impression frequency

3. Other Options: Some further options such as device type, personalization, and location, among others

• Click ‘Save’ to finalize the changes.

How to Upload Your Own Design to Create an Overlay

When creating a campaign from scratch, you can use a pre-existing format and modify it accordingly.

Let’s see how:

Step 1: In your Picreel account,

• Navigate to ‘Campaigns’ from the dashboard.

• Click on ‘+New Campaign.’

Step 2: Scroll down to select ‘Upload Own Design’ under the featured section of Overlay Type. Click ‘Customize.’

Step 3: In the editor,

• Add the name of your campaign and choose an overlay type.

• Click ‘Next Step’ in the top-right corner to proceed.

• Upload an image from the library or select a design from the drop-down list

• Click ‘Next Step’ to proceed further.

• Depending upon the overlay type, you will see boxes appear on your design.

1. The Green box (labeled Redirect Button) represents your template’s ‘Submit’ button, which will be the one users can click to be brought to another page or show them a custom message you can define later.

2. The Red box (labeled Cancel Button) represents your template’s ‘Cancel’ button – which will close the pop-up. You can disable the Cancel area by ticking off the Show Cancel Area checkbox.

• Drag the green and red boxes to the template area you wish to assign as Submit and Cancel buttons. You can resize both the boxes using the arrow on its bottom-right corner. Your screen/template should look something like the one shown below.

• Once you’re done, click ‘Next Step.’

• Now, enter the URL to which you wish to redirect users. You can choose to open the redirect URL in a new window by checking the box.

• Click ‘Create’ to proceed to the campaign settings page.

Step 4: On the campaign settings page,

• Modify the three broad sections to set up targeting preferences for the overlay

1. Basic settings: Whether your timer overlay will display on the whole site or specific pages

2. When Overlay Appears: When will it trigger, and what will be the impression frequency

3. Other Options: Some further options such as device type, personalization, and location, among others

• Click ‘Save’ to finalize the changes.

That is all about creating a new website overlay from scratch or uploading your design.