How to Add a Popup to Your Refari Website Using Elementor

This article provides a step-by-step guide on how to create and customise popups on your Refari website using Elementor. By following these instructions, you will be able to add engaging popup banners to your WordPress site to improve user interaction.

Logging into Your WordPress Dashboard

To start, you need to log in to your WordPress dashboard. Navigate to your site's backend by typing "/wp-admin" after your site URL and enter your credentials. Once logged in, you will have access to all site management features.

Creating a New Popup

1. From the WordPress dashboard menu, locate and click on "Popups."
2. You will see a list of existing popups. To create a new popup, click on "Add New Template."
3. Enter a name for your popup, for example, "testpopup," then click "Create Template."
4. Once the Elementor editor loads, you can choose from pre-designed popup templates or build one from scratch.

Configuring Popup Size and Position

• Set the popup width to 800 pixels to fit your design requirements.
• Adjust the horizontal alignment to left, right, or center as needed; vertical alignment can also be set accordingly.
• Enable or disable the overlay, which is the darkened background behind the popup.
• Control focus toggle buttons that show or hide elements on the popup.

Adding Animations and Styling

• Use entrance and exit animations from the popup settings to create smooth appearance and disappearance effects.
• Under advanced settings, you can add custom CSS, margin, and padding to further style the popup.
• Customise the background colour or image of the popup to match your website's branding.

Customising Popup Content

• Add titles, images, banners, or any other widgets to enrich your popup content.
• Remove unwanted white space by adjusting padding settings inside the widget panel.
• Modify the popup's close button colour and position for better visibility and usability. For example, changing the close button color to white and adding 10 pixels of padding for proper alignment.

Publishing and Setting Conditions for Popup Display

When satisfied with your popup, click "Publish." You will be prompted to set conditions for where the popup appears:

• Entire site
• Specific pages such as the front page

Select when the popup should trigger:

• On page load
• On scroll
• On scroll to element
• On exit intent

Define how often the popup shows, such as once per user session or multiple times. Save and close to apply the settings.

Testing Your Popup

Note that popups typically do not show for administrators when logged in. To see the popup as a visitor would, open your site in incognito/private browsing mode using the shareable link. Verify that the popup appears as expected according to your settings.

  Notes: Always test popups in incognito mode to ensure that they display correctly for your site visitors, as logged-in users with admin roles might not see them.

  Ideas: Consider customising your popup with brand-specific labels or messages to improve user engagement and reinforce your company’s identity.

  Other articles you might be interested in: How to install widgets with Elementor