One of the most polished design techniques in Ingage is creating a popup that perfectly replaces the element you tap on — what we call a "tile as a popup" effect. Instead of a popup that floats in the center of the screen, this approach makes the popup appear exactly where the original component is, matching its size, position, and corner radius. The result is a seamless transition where tapping a tile reveals new content in the exact same spot, with the rest of the page still visible behind it.
This technique builds on Manual popup positioning. If you're not yet familiar with setting a popup's position and size manually, review Popup Size and Location Adjustments first.
How the Tile Effect Works
The idea is straightforward: you take the exact position (X, Y), dimensions (Width, Height), and corner radius of a component on your page, then create a popup with those same values set to Manual positioning. When a viewer taps the component, the popup fades in at the exact same location, visually "replacing" the tile with new content. The scrim (background overlay) keeps the rest of the page visible behind the popup.
Step 1: Note the Component's Properties
Before creating the popup, you need to record the properties of the component you want to replace:
Locate your presentation and enter Edit mode
Navigate to the page and select the component that will serve as your "tile" (e.g., an image, shape, or text block)
In the Style Panel on the right sidebar, note the following values at the top:
X — The horizontal position
Y — The vertical position
W — The width
H — The height
Also note the Corner Radius value if the component has rounded corners
Write these values down — you'll use them to configure the popup in the next steps.
Step 2: Add a Popup Action to the Component
With the component still selected, click Action in the right sidebar
Click Add Action and select Pop Up
When prompted to choose a template, select a Blank popup — you'll be customizing all the properties manually, so the template choice doesn't matter
Click Add
Optional: If you prefer a clean look without the pulsing animation on your tile, open the Action Panel and change the Animation setting from Pulse to None. This is a matter of personal preference.
Step 3: Configure the Popup to Match the Tile
Now configure the popup so it appears at the exact same position and size as the original component:
Click Edit Pop Up to open the popup editor
In the Style Panel on the right, change the Presentation Style from Slide Up to Fade — this creates a smooth transition instead of the popup sliding in from the bottom
Change the Position from Centered to Manual
Enter the values you recorded from the original component:
Set X to match the component's X position
Set Y to match the component's Y position
Set Width to match the component's W value
Set Height to match the component's H value
Set the Corner Radius to match the component's corner radius (e.g., 8 if the original tile has rounded corners, or 0 for sharp corners)
At this point, the popup is configured to appear in the exact same location and at the exact same size as the original tile.
Step 4: Add Content to the Popup
With the popup sized and positioned, add whatever content you'd like to reveal when the tile is tapped. You can add images, text, video, or any other component — just as you would on a regular page. Since the popup matches the tile's dimensions, the content will appear to "replace" the tile in place.
When finished, click the X or Done to close the popup editor.
Step 5: Preview the Effect
Click the Play button in the upper right corner to preview your presentation
Navigate to the page with your tile
Tap or click the tile — the popup should fade in at the exact same location, replacing the tile visually with the popup content while the rest of the page remains visible behind the scrim
Things to Know
The key to a seamless effect is making sure the popup's X, Y, Width, Height, and Corner Radius values exactly match the original component's properties
Using Fade as the Presentation Style is recommended for this technique — Slide Up breaks the illusion since the popup would appear to move into position
This technique works with any component type as the trigger: images, shapes, text blocks, or even icons
You can use this effect on multiple tiles across the same page, each with its own popup content — great for creating interactive grids or product galleries
For more on popup settings including background color, shadow, close button, and scrim options, see the Action Guide