Pop-up builder allows to create nice looking pop-up windows that will attract every website visitor and are likely to encourage them to interact. You can add text, fields, buttons and images to your pop-up as well as backgrounds and columns.
And it's fast, without developers and designers.
In order to create a pop-up go to Auto section-> Auto messages and press "Create auto message". When on the step "Form and content" choose Pop-up builder and choose what size do you want it to be:
- Big pop-up is shown in the center of the screen and blocks other objects. It attracts attention the most, but distracts your visitors from what they were doing, so a lot of big pop-ups may be annoying.
- Small pop-up is shown on the side of the screen and doesn't distract from interactions with website.
You see available blocks to add to your pop-up on the left and they way your pop-up will look like on the right.
Click on the block to add it to a pop-up. To exit the editing mode press a dash.
If several blocks are added, you can edit each of them by clicking on parts of the layout on the right (except for the preview mode).
Active blocks are highlighted brighter and framed. To see how the pop-up will look on a website, click “Pop-up preview”. You can also remove blocks and move them relative to each other.
Most of the blocks have a “Style” tab in addition to the Content, where can select the background colors of a pop-up/button/field and other appearance settings.
Go to the pop-up settings and set the background image or select a color.
The height of the pop-up depends on the number and height of the blocks, and the width depends on the type of the pop-up:
- Big pop-up 580 px;
- Small pop-up 350 px.
Unlike the image block, the background fills all the space of the pop-up. You can choose how to lay your image.
In a large pop-up, content can be placed in one column or two. Select the composition you want to use. A new block will be added to the last active column. Move them using the buttons (in addition to the "higher" and "lower", you will be able to move them "left" and "right").
This is a pop-up with one column:
And this one has two columns:
Upload your picture and select its layout:
The width of the block is fixed, but you can choose its height (100 px by default).
If you selected a centered image and it turned out to be small, correct the height of the block (almost certainly this will fix the problem).
You can add any number of buttons to a pop-up. This is convenient if you want to offer customers a choice or play a game with them.
For each button, you have to select the action that occurs after clicking on it:
- Click on a link (paste the link in the box below);
- Close pop-up (if visitors don’t need to perform any more actions or you want to show next pop-up).
Important: Set a different event for each button in order to record them into a visitor card (use them for segmentation as triggers for message chains and building funnels).
You can create new events, for example, "5-10 team members" or "Clicked on answer 5" or choose one event from those you already have.
This is especially important in the case of several buttons in a pop-up, because this is the only way to separate clicks from one another. In case of a single button, you can choose an event for the button (we recommend this option) or set "Events for message chains" on the last step of auto-message settings.
You can insert the field where there's a button on the right. Any information can be put there: emails, telephones, short answers and everything else that comes to mind.
Important: it is necessary to select a property to where information from the field will be recorded. You can select from existing properties (for example, "email" or "phone") or create new ones (for example, "review"). Properties are required for segmentation, as well as for message personalization.
After adding the “Field with a button” block, other blocks with field insertion will not be available: “Field with a big button”, “Field with a button” and “Footer: field with a button”, since there can be only one type of field in a pop-up.
In the Style tab you can customize the block and change the following colors:
- Field border color
- Background Color
- Field text color
- Button color
- Button text color
This block is perfect because you can create an unlimited number of fields in it. Information from all fields will be recorded simultaneously after the button clicks. Create questionnaires (for example, name, phone, email), and record the information from each field to a separate lead property.
Restrictions and style settings are the same as in a previous field.
This is an empty block which height can be adjusted. It is convenient to use it to separate some objects from others or to regulate top and bottom fields of a pop-up.
The footer contains only one field with a button and is located on the bottom of a pop-up, under the dividing line. You cannot insert blocks below the footer.
If you make a long pop-up that scrolls, the footer will be located on the bottom and will not scroll.
An example of a big pop-up that scrolls with footer:
Good luck with your creations!