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
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.
You can switch to ‘Image’ and upload any image or GIF as a background.
Fields & Text
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.
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
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.
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
You can play around with different font styles by selecting from the drop-down list.
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.