By default, popups in Ingage appear centered on the page at a standard size. However, there are situations where you want a popup to cover a specific area of the page — for example, to reveal a full-width image or detail view. Using Manual positioning, you can control the exact placement, size, and corner radius of a popup to fit your design needs.
This article covers advanced popup customization. If you're new to popups, start with the basics in the Action Guide.
Understanding Popup Position Modes
When you select a popup and look at the Style Panel on the right sidebar, you'll see a Position dropdown with three options:
Centered — The popup appears in the center of the presentation page. This is the default behavior.
Relative — The popup appears near the component that was clicked or tapped to trigger it. This is useful when you want the popup to feel connected to a specific element on the page.
Manual — You define the exact X and Y coordinates where the popup should appear. This gives you full control over placement.
Step 1: Add a Popup Action to a Component
Before adjusting size and position, you need a popup to work with:
Locate your presentation and enter Edit mode
Navigate to the page where you want to add the popup
Select the component you'd like to make clickable (e.g., a shape, image, or text box) — you'll see a bounding box appear around it
In the right sidebar, click Action, then Add Action, and choose Pop Up
Select a popup template from the template picker and click Add
Step 2: Set Manual Positioning
By default, your new popup will appear centered on the page. To take full control of where it's placed:
Click Edit Pop Up to open the popup editor
In the Style Panel on the right, locate the Position dropdown
Change it from Centered to Manual
At the top of the Style Panel, you'll now see X and Y fields that control the popup's position in pixel coordinates
Set X to 0 and Y to 0 to place the popup at the top-left corner of the page
Tip: The X value controls the horizontal position (left to right) and the Y value controls the vertical position (top to bottom). An X of 0 and Y of 0 places the popup at the top-left corner of the page canvas.
Step 3: Set a Custom Size
After positioning the popup, you'll likely want to adjust its width and height to cover a specific area. To determine the dimensions you need:
Close out of the popup editor temporarily
Select the component or area on the page you want the popup to match (e.g., an image)
Check the W (width) and H (height) values shown in the Style Panel — these are in pixels
Make note of these dimensions (for example, 1024 px wide by 528 px tall)
Go back into the popup editor and enter these values as the popup's Width and Height
Once applied, the popup will resize to match the target area exactly. For example, setting the width to 1024 will make the popup stretch across the full width of the content area, and setting the height to 528 will extend it to the bottom.
Step 4: Adjust the Corner Radius
Popups have rounded corners by default. Depending on your design, you may want to keep them or remove them:
To remove rounded corners (make them sharp), set the Corner Radius value to 0 in the Style Panel
To increase rounding, drag the Corner Radius slider to the right or enter a higher number
Setting the corner radius to 0 is especially useful when the popup is sized to cover the full width of a page area, so it appears as a clean, edge-to-edge overlay.
Step 5: Add Content to the Popup
With the popup sized and positioned, you can now add content to it just like you would on a regular page:
Drag and drop images from your desktop into the popup
Double-click an image to crop or reposition it within the popup
Add text, videos, or other components using the + button
When you're finished, click the X in the upper right corner of the popup or click Done to return to the page editor.
Things to Know
All position and size values are in pixels (the same unit used for components on the page canvas)
To match a popup to a specific area on the page, select the target component first and note its W, H, X, and Y values, then apply those same values to the popup
Manual positioning is especially useful for creating full-width reveal panels, detail overlays, or edge-to-edge content displays
You can combine Manual positioning with Presentation Style settings like Fade to create smooth, natural-feeling transitions
For more on popup settings including background, shadow, close button, and scrim options, see the Action Guide