Creating a Parallax Ad Unit in the Airtory Studio

Avatar

By Sonal Agrawal

updated 6 days ago

A parallax ad unit gives the user an immersive ad experience with the illusion of depth using multiple images. This ad is placed in-article and as the user scrolls, the different image layers of the ad moves at different speeds. 

The Parallax ad unit is available in three different ad dimensions under the Native Ads section: 300x250; 300x600; and 320x480.  

The image requirements for the ad can be found in the Airtory Build Guide here

You can follow the below steps to set up a parallax unit in the Airtory Studio - 

Step 1:

Give your creative a name that will be easily identifiable for edits later, if required. 

Step 2:

Upload a logo image. This is usually the advertiser's logo. 

Once uploaded, you can choose the Fit of the image. It can be: 

Once you have selected the Fit of the image, you can select the Stage Alignment and Position Content of the Logo image: 

Stage Alignment setting aligns the Logo image with respect to the height and width of the entire ad dimension. 

The Position Content setting aligns the Logo Image with respect to the values set in the Height and Width fields in the second field below:

The Position values in the first row align the Logo Image against the X-axis and Y-axis of the creative. 

In the X-axis field, if you set a positive value, the image will move to the right, keeping the ad border as the origin and if you set a negative value, the image will move to the left. 

Similarly, in the Y-axis field, if you set a negative value, the image will move up, keeping the ad border as the original and if you set a positive value, the image will move down.

The Size values in the second row set the maximum Width and Height of a container against which you can set the alignment using the Position Content setting. 

All four values can be fixed at a pixel value or a percentage value which would be relative to the ad dimension. 

Once the alignment, position, and size of the Logo Image are set, you can set the z-index value. The z-index value specifies the stack order of the Logo Image element. An element with a greater stack order value is always in front of an element with a lower stack order. Ensure that the Logo Image z-index is always the highest value as compared to the other elements to ensure it is always present on the ad.

Step 3:

Upload a CTA image. The CTA image is usually a transparent background image with text such as "Learn More" or "Know More". 

This urges the user to click on the ad to be redirected to the advertiser's website. 

After uploading, proceed to set the alignment, position, and size of the CTA image as you did with the Logo Image. Just like the Logo Image, ensure the z-index of the CTA Image is always the highest value as compared to the other elements to ensure it is always present on the ad. 

Step 4:

Set the Shape Background Colour. The Shape Background Colour is usually the area behind the Logo and CTA Images. 

The Shape Background Colour can be set as a solid colour or even as a transparent image. 

Then you can set the Position and Size of the Shape Background Colour as per the creative requirement. Set the z-index value of this element as one lesser than the Logo Image and CTA Image to ensure it is just below these images. 

Step 5:

Once the basics of the creative have been uploaded, you can go ahead and upload the various Layer Images of the creative. There is no limit to the layer image numbers, but we would recommend having at least four or five for the user to have a great parallax experience. 

When uploading the Layer Images, we would recommend uploading them in the ascending z-index order. Hence, Layer Image 1 would be the background image of the creative, which is usually a solid layer with elements that can be overlapped by other elements. 

After uploading the image, you will need to set the Stage Alignment with respect to the complete ad dimension, Position Content with respect to the Container Size set, and the Position of the image. This position would be the start position of that particular Layer Image when the ad loads. 

After this, you will need to set the End Position of the layer. These values indicate where the particular Layer Image will stop moving as the user scrolls the ad. 

These values are also aligned against the X-axis and Y-axis of the creative. 

In the X-axis field, if you set a positive value, the image will move to the right, keeping the ad border as the origin and if you set a negative value, the image will move to the left. 

Similarly, in the Y-axis field, if you set a negative value, the image will move up, keeping the ad border as the original and if you set a positive value, the image will move down. 

Step 6: 

You can now go ahead and add as many Layer Images as required by clicking on the Add Background button. 

Once the first Layer Image is uploaded, the consecutive layers are usually single element Layer Images with a transparent background which when they come together form a cohesive ad experience for the user. 

Step 7: 

Once you have set up all the Layer Images, you can set the Hotspot area. 

The Hotspot indicates, which area of the ad is clickable and will redirect the user to the advertiser's website. 

After the Hotspot area Position and Size is set, you can enter the redirect URL. 

You can enable a border and customize the border colour for the Hotspot area. 

The Hostpot area is highlighted to indicate the area which is clickable when building the ad. This highlight is only visible when building the ad as an indicator and will not be present in the final ad.  

Hope this article was helpful. If you have any queries, please feel free to write to us at support@airtory.com. 



 






Did this answer your question?