Build a Portal
Bonzai avatar
Written by Bonzai
Updated over a week ago

Portal is a high impact yet non-intrusive format which appears inline as the user scrolls down the page. Portal is responsive, meaning a single ad can run across desktop, mobile and tablet, but don’t worry, you can design separate layouts for different screens if you want.

See below how Portal is built using a fixed background and an optional foreground element which floats over the background as the page scrolls.


Regular Portal - 300px high, extends to full browser width

High Portal - 600px high

Abridged Portal - restricted to page article width

Build Guide

Easy Complexity

The simplest way to design Portal is just to use one background image and this will take you less than 5 minutes to build.

Simple creative utilizing the background page

To create a simple complexity ad

  1. From the Creatives tab, click +New and select the portal creative format.

  2. Provide creative information such as target device type and creative name.

  3. Under the Pages menu, select Background Main to select the background page. By default, the foreground page is active.

Background Main — Page Menu

Adding images and video

The design of the sample creative uses images. You can also use video in two ways, either in the foreground or the background.

  • See the process of importing and adding assets.

  • See the recommended best practices for using images and videos in a creative.

  1. Open the asset library and upload your background image.

  2. Drag it into the Canvas and position it - (download the sample image from here).

Similarly, add additional images to set up the background page.

Setting up the background page

  1. Click Preview to view your design.

  2. Click Save to preview the creative on actual devices.

Medium Complexity

Taking this one step further, you can create a foreground message which will show up over the background and will always stay in view. Use a PNG with transparency to achieve this.

Check the Nike Logo and the ‘Explore’ button below as an example.

To set up a medium complexity ad

  • Switch to the foreground unit by selecting the Foreground Main page from the Page menu.

Foreground Main page — Page Menu

  • Add your foreground image - (download the sample image from here), note this should be a transparent PNG. This will stay in place and glide over the background image as users scroll the page.

Setting up the foreground page

  • Preview your creative now running with a foreground element.

  • Now switch to the preview layouts to see how it will render on different devices.

  • To adjust how the ad appears on different devices, select the responsive layouts on the canvas workspace.

Responsive Layouts

  • By default, Canvas will try to adapt the creative automatically to each device based on your initial design. Any changes you make to the initial layout will flow through. Once you edit any of the additional layouts, they will become independent and will no longer be affected by your initial layout.

  • Save your creative.

Advanced Complexity

If you want to add even more functionality to the unit, you can add extra features like animation, galleries or video to the foreground. You can even create animation which plays out as you scroll up and down the page.

To make sure the creative provides the ideal experience, we recommend you use the elements as per their intended page type.


Supported Page Type


Foreground and Background


Foreground and Background


Foreground and Background


Foreground and Background


Foreground and Background



Elements should be placed on the background and foreground to create the parallax effect.


Timeline panel enables you to create transformation on all the creative contents such as elements and assets. You can create a sequence of actions on the content and play out the sequence by time or on scroll.

The following table displays the animation on the page types:


Page Type


Foreground & Background

Scroll based


Events and Actions

Like other creative formats, Portal allows you to listen for certain events and assign actions for additional functionality.

Save and Preview

Click the Save option in the Canvas

Preview your work using the Preview button.

  • You can preview your creative from your browser without saving or publishing the creative.

  • Saving your creative enables you to preview the creative on actual devices.

  • The default view of the preview is as per the selected format and the device.

For example - If portal mobile is selected, the preview screen will display the creative in a mobile screen.

To understand the portal creative, refer to the creative sample given below.
Live Example

QA Checklist

Did this answer your question?