How to Customize Website Overlays

 

Picreel enables you to design your overlay the way you want. You can set everything from colors to logo and positioning of the overlay to match your brand guidelines.

 

Customizing an overlay helps you to:

 

1. Resonate your brand’s theme and values

2. Promote offers in unique ways

 

Here’s an overview of every element you can customize:

 

Preview of editing an overlay in the Picreel Editor

 

Here are the elements you can customize in the 'Edit Design' section:

 

Design

Color

 

You can change background, text, button, and H1 color as per your requirements.

You also get the option to set the pop-up size.

 

Editing the color theme of website overlay

 

Image / GIF

 

You can switch to ‘Image’ and upload any image or GIF as a background.

 

Uploading external image/gif file or selecting a GIF as a background for website overlay

 

Fields & Text

Logo

 

Choose the position of your logo (i.e., left, center, or right). Click ‘Upload’ to add your logo.

 

You can also choose to hide the logo if you want.

 

Uploading a logo to your website overlay

 

Overlay Fields & Text

 

You can select overlay fields based on the data you wish to collect from visitors, such as email, phone, name & email, or all three. If you do not want any information from the visitors, choose ‘None.

 

In addition, you can customize the overlay text to encourage visitors to fill in the details on seeing the overlay.

 

Adding/removing fields and editing overlay text

 

Options

Set what happens when the button is clicked

 

You can set the action after visitors submit the details as required in the ‘Select action after event’ field.

 

Selecting action after event

 

To close a pop-up and show some message once the submit button is pressed, please, select Close in the Select action after event field. Enter your message in the field below.

 

You can modify additional settings, such as the duration of the message or whether to show a 'close' button.

 

Alternatively, you may choose to redirect a visitor to another page once the submit button is pressed. Please select Redirect in the 'Select action after event' field to do so. And insert the redirect link below.

 

Select pop-up animation and position on the screen

 

You can select an animation from the drop-down list and see its live preview on the right side of your screen.

 

After selecting an animation, you can set the positioning of the overlay on the visitor’s screen.

 

Choosing a pop-up animation

 

Additional settings

 

  • You can choose to hide the close button on your overlay by checking the box
  • You can enable/disable the option to hide overlay by clicking on the background
  • You can add a checkbox to ask visitors to accept the data management rules
  • You can adjust the corner roundness of the overlay

 

Editing additional settings

 

Banner

 

You can add a tiny banner ( or image ) that will sit in any corner of your screen. Once your visitors click on it, your popup design will appear.

 

You can choose a style, select its positioning on the screen based on the type, modify its color and the display text to attract visitors’ eyes. You can preview your modifications live on the right part of your screen.

 

Adding a banner

 

Fonts

Font style

 

You can play around with different font styles by selecting from the drop-down list.

 

Font size and weight

 

You can adjust the font size and weight of a selected area on the overlay.

 

In addition to these, you can upload font files or generate font-faces by filling in the details to give a unique touch to the overlay.

 

Personalization

 

You can use customers’ data to personalize your pop-up. Check out different ways of personalization here.

 

Advanced modifications

 

To access advanced modifications of the offered designs, please, click on HTML/CSS Editor. Here, you may add additional fields, buttons, change fonts, sizes, etc.

 

Using HTML/CSS Editor

 

Don’t forget to click ‘Save’ at the end and proceed to configure campaign settings.

 

That is all about editing a campaign.

 

 

Was this information helpful?

The page cannot be found

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please make sure you spelled the page name correctly or use the search box.