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 Custom 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.
Overview
You will find the editor in Step 2 of the Custom Pop-up creation process.
The editor interface consists of two main parts: the content and settings section on the left, and the view panel on the right.
A few important things about our pop-up editor:
All pop-ups are automatically responsive, but each version (desktop and mobile) can have different settings. You can check how each version will look like by clicking on the icons on the left side of the view panel.
The editor is WYSIWYG (what you see is what you get). This means that all changes made in the content and settings panel are reflected on the view panel in real-time.
You will find several ready-to-go templates based on your goal, but you are not limited to them. They are all fully customizable to suit your needs!
Now that we've covered the overall interface, let's go over each part.
General settings
Let's start from the General settings tab. Here is where you will determine the overall structure of your pop-up, as well as some global visual settings.
Layout
You can choose between four types of layout for your pop-up. These layouts reflect how images will appear on your pop-up.
Choose layout:
No background – choose this option if you don't want an image on your pop-up.
Background – image will be on the background
Left image – image will be on the left side
Right image – image will be on the right side
Upload image:
Click on the UPLOAD button to upload an image from your device
Max file size: 2 MB
Image settings:
Choose image placement
Fill space – image will fill the available space completely
Pattern – image will not be resized and will be automatically repeated both vertically and horizontally
Center – image will be fitted to the available space on both height and width
Choose image proportion (50% / 33% / 25%)
Display image on mobile (ON / OFF)
If ON, you will be able to choose between "above", "below" or "next to".
NOTE: The layout reflects you choice regarding a main image as a structural part of your pop-up, but it is also possible to add images as elements on the same side as other elements such as text and forms.
Main
Padding – the space between the border of the entire pop-up and the elements inside.
Border radius – leave 0px for a straight corner, or increase the value for rounded corners.
Max width – the maximum width your pop-up will have on any device.
For mobile, the max width will always be 480px.
Background color – the color of the entire section with elements (text, forms etc.)
Choose a predetermined color or determine your own using the color picker, HEX code or RGB values.
Overlay background – the color and opacity of the entire area outside the pop-up (covering the page).
You can determine the opacity using the slider below the color picker.
Pop-up shadow – choose a type of shadow effect for your pop-up
None
Hard dark
Hard light
Soft dark
Soft light
Rectangle
Close icon
Icon style – select a type of close icon
Close icon size – determine the size of the close icon
Icon color – determine the color of the close icon
Icon position X – determine the distance between the close icon and the right edge of the pop-up
Icon position Y – determine the distance between the close icon and the top edge of the pop-up
NOTE: The close icon will always be on the top right corner, regardless of the chosen layout type (image left, image right, background or no background).
Custom Google Font
Apart from the default fonts available in the edrone system, you can choose from a predetermined list of Google Fonts or select any other font available in Google Fonts.
How to import a custom Google Font
1. Go to the Google Fonts drop-down menu and select "Custom"
2. On a new tab, open the font family page in Google Fonts. For this example, we're using Playfair Display.
 3. Select a specific font from the list. For this example, let's choose Regular 400.
4. Click on the view selected families button in the top right corner of the screen. This will open a sidebar with more details.
 5. On the Use on the web section, keep the <link> option selected and copy the code. Keep this tab open!
6. Go back to the pop-up editor. On the Link section, paste the code.
 7. Go back to the Google Fonts tab and copy the code from the CSS rules to specify families section.
 8. Paste the code on the Font Family section.
 9. Done! This custom Google Font will now be available when you create a text element on your pop-up. |
Content
Now let's go over the content – that is, all the elements you are able to add to your pop-up, such as text, buttons and forms.
All elements are presented as a list from top to bottom. If you want to change the order – for example, to change the position of a button – you can easily do this by dragging and dropping the element.
All elements can be deleted by clicking the trash icon, and all basic elements can also be duplicated. Form elements cannot be duplicated.
How to add an element
To add an element, click on the ADD ELEMENT button. You will see 11 options divided in two sections: Basic elements and Form elements.
Basic elements
| Form elements
|
NOTE: New elements are always added to the bottom of the elements list.
Basic elements settings
Text
Text options
Font color
Font family (choose "Default" for custom Google Font)
Font size
Font background color
Line height
Bold / italic
Add link
Text alignment
Border
Border around the element
Border color
Border style (solid / dashed / dotted)
Corner roundness
Advanced options (allows editing each side individually)
Spacing
General padding (empty space around the element)
Advanced options (allows editing each side individually)
General settings
Background color (background of the text box)
General padding (empty space around the element)
Advanced options (allows editing each side individually)
Image
Upload button (max file size: 2 MB)
Position (left / center / right)
Image width (%)
Spacer
Element options
Height
Width
Color
Position (left / center / right)
General settings
Background color (background of the text box)
General padding (empty space around the element)
Advanced options (allows editing each side individually)
Button
Button element text
Font color
Font family (choose "Default" for custom Google Font)
Font size
Bold / italic
Element options
Button color
Auto width (ON / OFF)
Position (left / center / right)
Action type
Subscribe (change the user status from UNKNOWN to SUBSCRIBED)
Affiliate (user subscribes to receive a coupon from the refer-a-friend program)
Redirect (determine the URL and if you want it to be opened in a new tab)
Post request (determine API URL)
Border
Border around the element
Border color
Border style (solid / dashed / dotted)
Corner roundness
Advanced options (allows editing each side individually)
Spacing
General padding (empty space around the element)
Advanced options (allows editing each side individually)
General settings
Background color (background of the text box)
General padding (empty space around the element)
Advanced options (allows editing each side individually)
Form elements settings
NOTE: all fields are automatically connected to the user's Customer Profile.
All form elements have the following setting options:
Element label (the text right above the form field)
Element options
Placeholder (the text inside the form field)
Position of text in input (left / center / right)
Input text color
Background color (color of the form field)
Make required (except name and email, which are always required)
Border
Border around the element
Border color
Border style (solid / dashed / dotted)
Corner roundness
Advanced options (allows editing each side individually)
Spacing
General padding (empty space around the element)
Advanced options (allows editing each side individually)
General settings
Background color (background of the text box)
General padding (empty space around the element)
Advanced options (allows editing each side individually)
Apart from those, some form elements have specific settings:
Gender
Male and Female are mandatory, and it is possible to enable or disable options for "Refuse to pass", "unknown", "other" or "unisex".
Birthday
"Day" and "month" are mandatory, and it is possible to enable or disable "year".
Checkbox
It is possible to enable or disable "checked by default" and "auto height".
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