Articles on: Forms

How to configure popup components?

Newsletter Popup by AVADA is customizable freely. Admins can design the content and popup appearance easily with various options supported.

In this article, you will lear how to design your popup in Subscriber Page, Thank You Page and Teaser (Floating button)

1. Subscribe page

1.1 Content

From Component tab > click to Content. Content allows you to edit all text element in the popup as well as the background of the text.

Font family: Select font displayed on subscribe page

Text Align: Select the text-align displayed on the subscribe page

Background color: Select a color for the background of the subscribe page

Background Style: Select style to show background image: Center or Contain

Background Position: Select position to show background image

+ Padding: Move the Padding Left, Padding Right, Padding Top, Padding Bottom bars to align the position of the Content accordingly.

1.2 Heading

Click to Heading and start edit details.

Content: Enter the text displayed for the heading

- Font family: Select the font you want to display in Heading

- Typography: Select color and adjust Font Size, Font Weight, Letter Spacing, Line Height for Heading

+  Color: Select a color for the heading text

Font size: Customize the font size of the heading

Font weight: Customize the density of the heading

Letter Spacing: Customize the spacing between letters

Line Height: Customize the spacing between lines

1.3 Description

Similar to Heading, you click to Description in the popup to edit it in the right column

1.4 Form

Form is the input box of the popup. We support collect email, phone number, first name, last name

To edit Email input box, click to email box:

Validate message: Enter the content you want to display when validating the email
Input placeholder: Enter the content of the placeholder you want to display in the Email field
This is required field: If checked, then Email is a required field to enter data
Font family: Choose font for email
Border Color: Select the border color you want to display in the email field
Border Radius: Drag the drag bar to adjust the Border Radius of the email field

To add phone number input box, click Add component button

Then you can click to Phone number block to add Phone field to your popup template:

Similarly, you can edit the phone field in the left column:

Subscribe button

Click to subscribe at the left column or click directly to the Subscribe button in the popup template:

Here you can edit the content and design of the Subscribe button:

Edit the footer note: Content and Typography

1.6 Image

This is the background image of the popup. You can change/edit the image.

2. Thank you page

Thank you page includes Heading, Description, Background Image which is similar to Subscribe Page, you can click to them directly to edit it easily.

Besides, Thank You page allow you to show a coupon code after subscribers submit their information. You can select the coupon and edit the design at the left column.

Also, there is one Button at Thank you page that allow users some actions after clicking on that:

Close the popup
Apply coupon automatically at checkout
Open a link: you will enter the link so that users will be direct to that link after clicking to the button

Firework is an animation effect in Thank you page. You can enable/disable it by clicking to the eye button

Beside, you can also add some more components to the Thank You Page:

3. Teaser

See guide here

4. Layout

Click on Layout section

Layout: Click to choose a suitable layout template
Division: Click to choose the appropriate ratio for the popup
Desktop Width: Move the drag bar to adjust the width of the popup

After editing, you can choose to view the layout of different pages:

5. View and edit display on mobile

To see popup display on mobile, click on Mobile section

To show image on mobile, click " want to show image on mobile". If not, it will auto not show the background email on mobile (to optimize the form responsive on mobile)

Mobile Height / Device Height: Adjust the drag bar to change the height of the popup
Background Size: Click and select Background Size: Cover or Contain
Background Position: Click and select the position of the Background image

6. Close button

You can edit the icon and position of close button in the popup here:

Updated on: 12/08/2021

Was this article helpful?

Share your feedback


Thank you!