General Extensions Pop Up Extensions Estimated reading: 5 minutes 79 views Looking for a smarter way to draw attention? With the PopUp Extension, you can turn any Elementor element into a dynamic, animated pop-up. It’s perfect for promotions, announcements, or just adding that extra spark to your content. No complicated setup. No extra tools. Just turn it on, design your content, and choose how it appears. Want your content to appear with a nice effect? It’s simple. Find out how below. Requirement Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate PopUp Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Click on General extensions and toggle on PopUp. Step 1: Set Your Target Element and Enable Its Wrapper Select the element you want to apply the PopUp effect to, then click on the container to enable the wrapper. Next, click on ‘PopUp’ and toggle the ‘Enable’ switch to ‘Yes’. The Cursor Hover Effect is now enabled. You’ll find the option available in the page builder. Enable PopUp & Enable On Editor First, you’ll see the ‘Enable’ option. If this is not turned on, you won’t be able to see the animation in the editor using “Enable On Editor”. Setting it to “Yes” allows the animation to play in the editor just like it does on your live website.Leaving it “Off” keeps the element static in the editor. However, the animation will still work perfectly on the live site. In short, this setting lets you preview how your animation looks without leaving the editor. Step 2: Set Up Your Content Layout Decide how you want to show your content—write your own text and add an image, or use a design you’ve saved earlier. Content Type In the content type settings, you’ll see two options — Content and Save Templates. Pick the one that suits your needs best. However, for example, I will select content. Content Paragraph: In the paragraph section, I’ve described the image as showing team bonding through collaboration, but you’re free to write whatever you like. Plus, you can add any image of your choice as well. Save Templates: Saved Templates allow you to display content from templates that you’ve previously saved in the Templates > Saved Templates library. Cursor In the cursor settings, you’ll find several options: Default, None, Pointer, Grabbing, Move, and Text. For example, I choose Pointer, but you can choose any one of them according to your choice. Choosing Default or None means no special cursor effect will appear when hovering over the element. If you select Pointer, it signals that the element is clickable. Grabbing suggests that the content can be dragged. Selecting Move indicates that the entire element is movable. Finally, the text shows that users can highlight or edit the text within the element. Step 3: Choose your Entrance Animation Animation settings let you choose how your pop-up appears on screen. Each effect has its own mood and purpose. Animation In the animation settings, you’ll find several options: Default, Zoom, Zoom Out, Newspaper, Horizontal Moves, Move from Top, and 3D Unfold. Selecting Default means no animation effect will be applied to the popup. Choosing Zoom makes the pop-up scale up from the center, creating a zoom-in effect. On the other hand, selecting Zoom Out does the opposite—it starts large and quickly scales down into view. Choosing Newspaper triggers a dramatic entrance where the popup spins and scales as if it’s unfolding like a crumpled newspaper. Horizontal Moves makes the pop-up slide in from either the left or right side. Move from Top causes the popup to slide down into view from above. Lastly, 3D Unfold gives a three-dimensional effect, making the pop-up appear as if it’s flipping or unfolding toward the viewer from a flat surface. Removal Delay The Removal Delay setting controls how long (in milliseconds) the popup remains visible after it’s triggered to close. For example, I set it to 500, so the popup stays on screen for half a second before disappearing. You can adjust this value based on your preference. Final Result You Made it Nice work! Your PopUp is all set. You’ve enabled the wrapper, turned on the editor preview, designed the layout, and added an entrance animation. These little details go a long way in making your content stand out and feel more interactive. Take a moment to preview it live and see how it looks on your page. If something’s not quite right, you can easily tweak the animation or content anytime. Keep trying new ideas and bringing your vision to life—there are no limits to what you can create. If you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
