How to Customize Website Overlays

Picreel allows you to tailor your website overlay according to your preferences. You can adjust various elements such as colors, the logo, and the overlay’s position to align with your brand guidelines.

Customizing an overlay on your website can help you in two significant ways:

1. It allows you to reflect your brand’s theme and values.
2. It provides a unique platform to promote special offers.

A sample overlay customized in the Picreel Campaign Builder:

Let's take you through the various sections of the campaign builder:

1. Layout & Design

• Popup Size
• Position
• Background
• Border

2. Elements

• Text
• Image
• Video
• Button
• Timer

3. Input Fields

• Name
• Email
• Phone
• Custom

4. Mobile Preview

Layout & Design

• Popup Size

Select the size of your overlay between large and small. You can also define custom dimensions. Use the slider to adjust the height and width of the overlay.

• Position

Select the positioning of your overlay on the screen from the given options. You will get a live preview on the right part of the screen. A total of nine positioning options are available in the builder.

• Background

Select the background type. You can choose to upload an image or add a solid color. Change the background color using Red, Green, Blue (RGB), Hue, Saturation, and Lightness (HSL) or hex color code.

• Border

- Use the slider to adjust the border width and the corner radius.

- Choose a border style from the list and select its color.

- Use animation for your website overlay.

Elements

Customize your overlay using the below elements:

Text: Add your text to the overlay. You can stylize your input using the floating toolbar.

Image: Select an image from our library to place on your overlay or upload one from your local storage. You can use this option to add your logo. After adding, you can drag and drop the image to re-position it. Resizing is also easy.

Video: Upload an MP4 video from your system or paste the YouTube video URL to display to visitors.

Button: Add call-to-action (CTAs) to the overlay and set the desired action event upon click based on its placement.

Timer: Promote time-sensitive offers by attaching a timer with the overlay. You can select from where the timer countdown will begin. Either a specific date and time or when the popup appears on the screen. You can shuffle between the two conditions based on your requirements.

Input Fields

Based on your popup content, you can collect input from customers by adding fields to the overlay. Use the name, email, or phone field. You can also add custom fields and collect additional information. Moreover, you can make any field mandatory for your target visitors.

Mobile Preview

You can toggle to mobile view to get a visual understanding of how your pop-up will appear on mobile devices. You can use this view to design a mobile-friendly overlay.

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

And that's it! If you encounter any issues or have any questions, don't hesitate to reach out to our support team.