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)
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.
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
Similar to Heading, you click to Description in the popup to edit it in the right column
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
This is the background image of the popup. You can change/edit the image.
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:
See guide here
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:
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
You can edit the icon and position of close button in the popup here:
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:
1.5 Footer note
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
Thank you!