How to Create a Website Overlay From Scratch

Learn how to design a custom website overlay using Picreel. Create engaging pop-up overlays to connect with your audience and boost conversions.

Use Case: Imagine you run an e-commerce site and want to promote a flash sale. You can create an attention-grabbing overlay that appears on specific product pages, increasing the chances of converting visitors into customers.

Benefits of creating a new overlay from scratch:

• Full Control: Customize every element of your overlay to match your needs.
• Brand Consistency: Tailor the design to align with your brand and connect with your customers effectively.

How to Create a Website Overlay From Scratch

Step 1: From the dashboard, go to 'Campaigns.' Click the downward arrow corresponding to "+ New Campaign" and select "Create From Scratch."

Step 2: Design Your Overlay

In the editor, you'll find a sample template to work with.

• Click 'Layout & Design' on the left panel to set popup size, position, background color, or add background images/gifs.
• Customize border elements as needed.

• Click on 'Elements' to add elements such as Text, Images, Videos, Buttons, Timer, Coupan, and Iframe to your overlay.

• Click the "+Add New Field" button to include a custom field.

Step 3: Add Personalized Attributes to your campaign

• Enter the name of the attribute (e.g., visitor name, email) in the text input field provided.

• Confirm by clicking the “Add” button.   

You can proceed to the targeting option page by clicking the ‘Settings.’ Otherwise, you can further edit the elements on the left panel and move forward.

Step 4: Set Targeting Preferences

Modify three main sections:

1. Basic settings: Decide whether the overlay will display on the entire site or specific pages.
2. When Overlay Appears: Define when it triggers and how often.
3. Other Options: Choose device type, personalization, location, and more.

Click ‘Save’ to finalize the changes.

Learn more about setting targeting options in your Picreel campaigns. 

That's all there to create a new website overlay from scratch. Your custom overlay is now ready to engage and convert your website visitors. If you encounter any issues or have any questions, feel free to contact our support team.