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.

 

Note: You can also click on the drop-down arrow to choose to create an overlay from scratch.

 

Navigating to New campaign from the dashboard
 

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

 

Starting to create a website overlay from scratch

 

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

 

Editing the overlay

 

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

 

Changing background color or adding an image or GIF as 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:

 

Writing the HTML codes for creating a new website overlay

 

Modifying the CSS to complete the design

 

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:

 

A new overlay design after coding and styling

 

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.

 

Modifying the targeting settings of the new overlay created from scratch

 

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.

 

Navigating to New Campaign to create a new overlay using upload design

 

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

 

Uploading a design to create a website overlay from scratch

 

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.

 

Adding the name and selecting the overlay type

 

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

  • Click ‘Next Step’ to proceed further.

 

Uploading a design or selecting one from the drop-down list

 

  • 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.

 

Note: If the selected overlay type has an email field, you will see a yellow box on your design.

 

The Yellow box (labeled Email input) represents the area of your template where the user can enter their email address.
  • 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.

 

Setting up actions on the design

 

  • 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.

 

Modifying the targeting settings of the new overlay created from scratch using upload design

 

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

 

 

Was this information helpful?
© 2005 - 2023 ProProfs