05003 – How to edit your Form Pop-up

The Form pop-up feature is included on all Optin Page templates.
To add a Form popup, you can setup through this guide.

To edit your Form popup
  • Go to Boosters and then Open or Edit the related optin box you would like to edit.
  • In the page editor, click on Form Pop-up in the left-sidebar menu.
  • The pop up will appear on the page.

 

Adding Content to the Pop Up

Just like you can do on the page you can add any block and row you want to the pop up. Simply use your mouse and add a row by clicking on the green plus or add a block inside a row by clicking on the black plus.

On the left sidebar you will see the pop up options such as the Modal View, the background and border

Modal View

  • You have 2 options in the drop-down menu.
    Small – your Form Popup will appear as small popup window in the middle of the page.
    Full Width – your Form Popup will cover the whole page.

Once you are done, click SAVE CHANGES at the bottom.

 

Popup Background

  • Upload Image
    Click on Browse to upload an image from your computer.
    OR, click Select from gallery if you want to use an image that’s already been uploaded or been used in another template or page. Upon click, the image gallery popup window will appear with all the available images listed.
  • Background Repeat
    This feature will repeat the image you upload for the background, so that you have multiples copies of the same image displayed across the popup.From the drop-down, you have different repeat options to choose from i.e.
    No Repeat: the uploaded image will display as is
    Repeat : the uploaded image will repeat vertically and horizontally across the popup
    Repeat-x: uploaded image will repeat horizontally only
    Repeat-y: uploaded image will repeat vertically only
  • Background Size
    This feature allows you to control how the uploaded image displays.
    Auto: the image will display as per it’s dimensions
    Cover : the image will cover the entire popup
    Contained : the image will display in top half of the popup.
    Parallax : the image will fill the width and height of the popup and all rows and blocks added to the popup will appear above the popup image as if it is floating.
    100% 100%: the image will fill the width and height of the popup and the image, rows and blocks added to the popup will move as one unit as you scroll down the page.
  • Background Color
    The feature allows you to change the background color of the popup.
    To change the background color, you can either add a Hex code in the field provided or choose a color from the Color Wheel.
    If the Color Wheel is closed, simply click on the Color Picker button to the right of the background field.
  • Background Color Opacity
    This feature allows you to change the opacity of the background image.
    Simply move the slider left or right to increase or decrease the transparency of the image.

Once you are done, click SAVE CHANGES at the bottom.

 

Popup Border

This feature allows you to add a border around your popup.

  • Borders
    Select whether you want a full border where the popup is wrapped in a border or simply one side of the popup has a border e.g. None, All Border (full border), Top Border, Bottom Border, Right Border, Left Border, Left and Right Borders
  • Border Type
    You can select the style for your border.

TIP 01 In order to see the border around your popup, you need to select one of the style options available e.g. Solid, dashed or dotted. If the setting is left on No Border Style, your selection in the Borders setting will not work.

TIP 02 To add space between your popup and the border, remember to add Padding.
For more info on how to do this, scroll down to the Spacing popup below.

  • Border Size
    You can change thickness of the border by selecting the pixel width you prefer.
  • Border Radius
    You can add rounded edges to the border by selecting the relevant pixel or percentage width. You may now control each side by entering the number on the Top Left, Top Right, Bottom Right and Bottom Left box.
  • Border Color
    You can change the color used for the border by selecting a new shade from the Color Wheel.

Once you are done, click SAVE CHANGES at the bottom.

 

Related Articles

Working with the different Form Types
How to setup an Optin Form Block
Video – Create an Optin Page
How to setup your Optin Boxes