So you want to create a beautiful pop-up that will make a great first impression on your visitors – but you also want to do it quick and easy.
Well, you're in luck! With our Pop-up editor, creating pop-ups is a breeze.
NOTE: This article is focused exclusively on the pop-up editor itself. If you're looking for more information about the entire pop-up creation process from start to finish, CLICK HERE!
Step 1 — Pop-up Settings
In this section, you define the appearance and behavior of the entire pop-up window.
1. Layout
In the Select layout section, you define the overall structure of the Pop-up. Four variants are available:
Without background — a minimalist version without additional graphics.
With background — the Pop-up includes a background image.
Image on the left — graphic on the left side, content on the right.
Image on the right — content on the left side, graphic on the right.
The selected layout affects the placement of all elements within the window.
Generate an image (AI Banner Generator)
You can use the AI Banner Generator option to create a graphic directly in edrone.
After generating the image, download it and use it in the section below.
Add your own image
If you want to use your own graphic:
Click Upload image.
The maximum file size is 2 MB.
Image settings
After adding an image, you can define:
Image fit:
Fill
Pattern
Center
Image proportions:
50%
33%
25%
You can also decide whether the image should be displayed on mobile devices.
2. Pop-up Style
Adjust the basic appearance settings:
Setting | What does it do? |
Inner margin | Space between the Pop-up edge and its content |
Corner radius | The level of rounding of the window corners |
Width | Maximum Pop-up width |
Background color | Main background color of the window |
Shadow background color | Background overlay color behind the Pop-up |
Shadow | Shadow intensity around the Pop-up |
These options allow you to match the Pop-up to your store or website design.
3. Close icon
Choose the style of the Pop-up close button (“X”), including its:
appearance (different icon styles),
size,
color,
position (X and Y axis).
This ensures users can easily find the close button without it visually dominating the design.
4. Font
In the Custom Google Font section, you can define which font will be used in your Pop-up.
You have two options:
Predefined font from the list
From the dropdown list, you can select one of the available Google Fonts, for example:
Open Sans
Lato
Roboto
Raleway
Cabin
Once selected, the font will be automatically applied to the Pop-up.
Custom font
If you want to use a different Google Font:
Select the Custom option.
Paste the font link in the Link field.
Fill in the Font Family field with the font family name.
This allows you to fully customize the typography to match your brand identity.
5. Redirect after action
If you want users to be redirected to another page after submitting the form (e.g., a landing page or promotion), enter the URL in the Pop-up Redirect Address field.
You can also select the option to open the link in a new tab.
Step 2 — Editing Pop-up Content
After switching to the Pop up tab, you can build the content that your customers will see.
Element list
On the right side, you will see a list of all elements currently included in the Pop-up:
texts (headline and description),
form fields (e.g., First name, Email),
button,
spacers,
text with a privacy policy link.
For each element, you can:
edit its content,
change its order (by dragging),
duplicate it,
delete it.
This gives you full control over the Pop-up content.
Adding new elements
Click Add element to open the panel with components that you can add to your Pop-up.
Basic elements
Text — headlines and descriptions
Image — graphic or illustration
Button — CTA (e.g., “Sign up”)
Timer — countdown
Coupon — automatic display of a discount code
SMS Subscription
Spin the Wheel
Spacer — visual separation of content
Form elements
First name
Last name
Email
Phone
Gender
Date of birth
Checkbox (e.g., marketing consent / GDPR)
You can freely combine elements to create a simple sign-up form or a more advanced interaction.
Preview and publish
After making changes:
Click Preview to check how the Pop-up will look.
Then select Publish to activate it on your website.
If you see the message “You have unpublished changes”, remember to publish them — otherwise, the new version will not go live.
Need more help?
If you have any further questions about the Custom Pop-up editor, please do not hesitate to contact us at hello@edrone.me