Tuesday , May 21 2024
Home > Magezon Extensions > Other Extensions > How to Create a Full-Screen Popup With Magezon Popup Banner

How to Create a Full-Screen Popup With Magezon Popup Banner

how-to-create-a-full-screen-popup

With Magezon Popup Builder you can easily create a full-screen popup in minutes without code. It allows you to build popup with custom content and you can customize the popup display by configuring various settings.

Here is the example of a full-screen popup we’ll build in this guide!

full-screen popup
The full-screen popup

Step 1: Add new popup

In the Magento dashboard, navigate to Content → Popups → Add New Popup.

add new popup
Add new popup

Then set its information in the Information tab:

  • Give a name for your popup and choose the Store views where pop up displays.
  • Select the customer groups that can view the popup and set a date range to show popup according to your intention (optional).
popup information
Popup information

Step 2: Set the width & height of the popup

It is the most important step when you build the full-screen popup. In the Advanced tab, you must set the width of the popup to 100%, and the height as “Fit to Screen”. About its position, choose your desired option.

Set the width & height of the popup
Set the width & height of the popup

Step 3: Build the inside of the full-screen popup

3.1: Create the popup content 

First, go to the What to display tab, and add a row. Then, divide it into 3 columns.

Divide row into 3 columns
Divide row into 3 columns

Then, edit the Responsive Options of each column. Set width with 8 columns – 2/3 for the middle column, and 2 columns – 1/6  for the left and right columns.

customize the responsive options of middle column
Customize the responsive options of middle column
Customize the responsive options of other columns
Customize the responsive options of other columns

Next, in the middle column, add the heading element and edit its heading style, font size, text color, and font weight.

Edit heading 1
Edit heading 1
Edit heading 2
Edit heading 2

Next, add the newsletter form element below the heading element. Same to the heading, you can also edit the newsletter form’s title color, title font size, title font weight, and its layout. 

Customize newsletter form in the general tab
Customize newsletter form in the general tab

Also, the button of the newsletter form can be edited. You are free to customize its text color, background color or border color, etc.

style the newsletter form's button
Style the newsletter form’s button

Next, in the Design Options tab, set the padding for the newsletter form.

Customize the newsletter form's padding
Customize the newsletter form’s padding

After adding these two elements in the middle column, choose the background color for this column in the Design Options tab.

choose the background color for the middle column
Choose the background color for the middle column

Let’s see the result!

Popup content
Popup content

3.2: Add background image for the popup

Go to the Style tab to add a background image for the popup. Then set its position, repeat, and size. 

add popup's background image
Add popup’s background image

3.3: Design the close button of the popup

Next, open the Close button tab to customize it. With this option, you can edit its color, background color. Set icon size, border radius, and box size for it. Besides, you can set the vertical and horizontal position for the close button.

style the close button
Style the close button

Once you have finished all the steps above, you will get the result like the example! 

Step 4: Set display conditions for the popup

After you’ve finished designing your full-screen popup, go to the Display Conditions tab to open the Conditions, Triggers, and Advanced Rules.

4.1: Set conditions

First, use the Conditions tab to target your popup to the pages you want it to display. 

Set conditions for the popup
Set conditions for the popup

4.2: Set triggers

Then, go to the Triggers tab and enable the On Page Exit Intent trigger. It means that the popup will appear when the cursor moves outside the upper page boundary. 

set trigger for the popup
Set trigger for the popup

4.3: Set advanced rules

Finally, in the Advanced Rules tab, enable the Show after X pages view button and fill in the blank field the number of page views before the popup is triggered.

set advanced rules for the popup
Set advanced rules for the popup

Conclusion 

Above are all the steps we would like to suggest for you to create a full-screen popup. We hope that this guide will give you a full understanding of creating the full-screen popup with Magezon Popup Builder. Feel free to contact us if you have any questions. 

Optimize Your Magento Store With Powerful Extensions

Looking for fast, efficient and well-coded extensions to build or optimize your Magento stores for sales boosting? Then visit Magezon website and grab necessary add-ons for yours today!

About Jen Tran

Jen Tran
Jen Tran works for Magezon as a marketer. She is responsible for writing blogs about Magento and Magezon extensions to help Magento users have a better understanding of it.

Check Also

The ultimate guide to using Magento 2 Login & Registration Page

Magento 2 Login & Registration Page Builder: All You Should Know

Sometimes, the default Magento 2 login and registration page doesn’t satisfy all your needs. You …

Leave a Reply