Popups, forms and interactions

A popup is a template you design like any other. It also has three sets of rules, which you set when you publish it:

1. Go to Elementor › Editor › Templates › Popups › Add New Popup, or start from a ready-made popup such as the Katka popups.
2. Set the size, position and overlay in Popup Settings in the top bar, then design the content.
3. Click Publish and work through the three tabs: Conditions, Triggers, Advanced Rules.

In Advanced Rules, limit how often it shows (for example once per session), hide it from logged-in users, and hide it from visitors arriving from your newsletter. In the popup settings, make sure it can be closed with a visible button and the Esc key.

Forms in version 4 are built from parts. An Atomic form element is the container, and every field is its own element that you drag in from the Atomic Form group: Label, Input, Text area, Checkbox, Radio button, Select, Date picker, Time picker, File Upload and Submit button. Fields use the same Style tab, Classes and Variables as the rest of your site, so forms finally match your design without extra effort.

1. Add an Atomic form, then drag in a Label + Input pair for name and email, a Text area and a Submit button.
2. Mark the required fields and set the input type (email, tel) so phones show the right keyboard.
3. In the form's settings, choose what happens on submit: email notification, redirect, or a connected marketing tool.
4. Send a test submission and confirm the email arrives. If it doesn't, read the SMTP guide.

Atomic Elements support Interactions. Entrance interactions are available to everyone. Pro adds triggers that react to scrolling, hovering and clicking, plus a Custom effect where you define exactly how an element moves between states. Interactions can differ per breakpoint.

1. Select an element and open its Interactions tab.
2. Click Create an interaction. You get a ready-made "On page load: Fade In" to adjust.
3. Pick the Trigger: Page load, Scroll into view, While scrolling, On hover or On click.
4. Set the Effect, the direction, and the Duration, Delay and Easing.

• Use motion to guide attention, such as revealing steps in order, not to decorate every element.
• Keep it short (200–500 ms) and subtle on mobile, or turn it off there.
• Respect visitors who prefer reduced motion. Test with that system setting turned on.

• A page-load popup on every page. It's the fastest way to lose visitors, and on mobile it can hurt search rankings.
• Never testing form emails. Many hosts silently drop PHP mail. Test every form after launch.
• Animating everything. When everything moves, nothing stands out, and the page feels slower.