DESIGN YOUR & CONFIGURE POP-UP
Now we are ready to begin our design of our Pop Up. Click on Pop-Ups on the side navigation.
Once you have clicked on here you can create a new one at the top of the page
Give your Pop up a Name and hit the create button
Once you have created the name of your Pop Up you are presented with the builder. This is split into a few areas as per the highlighted area below. The red circles show the different sections to the builder. You can click on the two arrows on the left and the right of the screen which will toggle the ‘Canvas’ layout on the left and the ‘Layout’ menu on the right so you toggle these in and out when you require.
So let’s start with the Layout on the right – Click the arrow and this gives you options to create your grid for your Pop-Up by using snippets and choosing your row and how many columns you need and how many rows. Have a think how you may want the pop up to appear in a vertical format. Text box followed by text and image for example. Also consider a snippet to ‘house’ your form.
Once you have added a row into your layout you can change the border, background size and typography for each snippet you add into your grid.
You can then use the editing toolbar for each snippet if you click into this section you can alter your Pop Up.
To add a form into your Pop Up, click the insert form icon as per the screen shot below this will give you access to your already created form (See beginning of this article in how this is created). You will then need to configure your form which is the same principle as configuring a form in a microsite.
Once you have configured your form you will then need to add in the submission button
Once you add in the button you will be able to edit this accordingly, border background, size and typography and consider on submissions this need to be a submission, redirect or close pop up on that action.
Once you done the above and are happy with how your popup is looking you can then move onto the canvas on the left-hand side arrow.
We would recommend going down this side menu and alter what you need with this.
You can alter the following things down this navigation:
Canvas Width- allows you to change the % of size of the canvas on the website or indeed change the width in px.
Canvas Background - allows you change the background colour of the canvas or add in an image to be the background perhaps a textured image to ensure the pop up stand off the page.
Canvas Border – Do you require a border you can select a style
Close Icon – You can pick an icon to enable contacts to close the popup down. You can decide to set the mode to either inside dedicated row, Inside -over content or outside the canvas. You can also use the offset x and Offset Y to ensure you have the position of choice.
Canvas Shadow – If you require a shadow on the canvas for this Pop Up then you can set this here and specify the Offset x, Offset Y, Spread and Blue on this.
Canvas Position – You can set margin and padding to the canvas to set where this will be placed.
Canvas Typography – You can change the fonts sizes, colour, style etc on the whole canvas here.
Canvas Cells Default – Here you can set a default value for the margin and padding between the cells.
Top left in the Pop-Up builder will also give you a tick box to show your Pop up in preview. There is also a top right tick box where you can select ‘Show grid’ or not this will allow you to see how your grid on your canvas has been constructed.
Go to Step 3 - Your Pop Up Triggers and Activation
If you have any questions, feel free to reach out to us through the live chat function available bottom right in your Force24 Platform. Our team is ready to assist you and provide support whenever you need it!