Custom Pop-up editor

Find out all the possibilities you have on your hands to create beautiful and effective pop-ups!

Wioleta Jednaka avatar
Written by Wioleta Jednaka
Updated over a week ago

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.

NOTE: It is only possible to use one weight of one Google Font. Please select only one variation of a font family.

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

  • Text

  • Image

  • Spacer

  • Button

Form elements

  • Checkbox

  • Name

  • Surname

  • Email

  • Gender

  • Phone

  • Birthday

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


Did this answer your question?