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:

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

Design

• Color

You can change the background, text, button, and H1 color as per your requirements. You also get the option to set the pop-up size.

• Image / GIF

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

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.

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

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.

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

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

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, and modify its color and the display text to attract visitors’ eyes. You can preview your modifications live on the right part of your screen.

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, click HTML/CSS Editor. Here, you may add additional fields, buttons, change fonts, sizes, etc.

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

That is all about editing a campaign.