Wallpaper, or page skin, is a high-impact ad unit that allows you to deliver your brand message in the surrounding space around page content. This article will walk you through creating a wallpaper unit using Adventive's Wallpaper template.
* Wallpaper units vary greatly depending on site, so be sure to contact email@example.com to test prior to your first campaign. This also applies to site re-design or if different sections of your site are set up differently - please contact us to test before going live with a campaign.
Wallpaper Ad Unit
In the Builder, Create a New File and select Wallpaper from the dropdown.
Select Custom and set your dimensions, Click URL, and click Submit. (No backup image is necessary) – for this example we will select Custom, w1590 x h1000.
Setting Up Your Canvas
A blank canvas will load onto the screen. You'll notice a transparent blue rectangle in the middle of the canvas. This acts as a placeholder for your site content. The two white gutters on either side of the center content area are 'live'. This is where you'll place your ad content.
Note: You can use the zoom slider at the bottom right of the builder (above timeline) to zoom in or out to see the full canvas.
Ad Properties (In the Properties panel to the right of the Builder)
Width and Height
Shows the width and height of your ad unit (that you selected when creating the file) – you can click into the width and height fields to adjust if needed depending on your specs/site, In this example, we'll assume a width of 1590px x 1000px.
By default, page content width is set to 1000px. You can edit dimensions in the Properties Panel under Wallpaper Settings to match your specific site’s page content width. For this example, we'll assume a content width of 990px by clicking into the page width field and changing it from 1000px (default) to 990px.
- Header Padding - If you are also running a masthead banner at the top of your page, header padding allows you to set spacing in pixels if needed.
- Scroll with Page – select if you want the ad to scroll up and down with the page content. If left unchecked, the ad content will remain locked on each side of your page content.
- Show Page Placeholder – this will be selected as a default and will display a transparent blue rectangle in the middle of the canvas representing your site content. You can hide this by deselecting.
- Page Width – by default, content width is set to 1000px. For this example, we'll click within the field and change to 990px (every site is different, you will want to update according to your site specs.
Given we have a canvas that is 1590px wide and a central content area that is 990px wide, we now have 300px gutters on each side to showcase our content. Make certain all elements are contained within the white gutters (within the 300w x 1000h gutter on each side).
Click on Asset icon and select your asset, or upload. In this example we will upload a left gutter asset (jpg sized 300w x 1000h) and a right gutter asset (jpg sized 300x x1000h).
Any area of the gutter where your elements are that doesn’t have any actions/hitboxes set to it, will automatically click through to your default click through url that you entered when creating the file. If you need to change the default click through url, you can do this by going to the General Properties section (far right of builder) and clicking within the Default Click Url field (OR from campaign manager if you place a tracker in this field, it will override what is in the builder):
*Other settings that may be needed (as each site and/or section of site may vary, a z-index adjustment may need to be made). For help identifying or troubleshooting site/content z-index settings, please contact firstname.lastname@example.org General explanations below:
Select your asset in the gutter area by clicking on the asset either on the canvas or in screens and layers at the bottom of the builder:
With your asset selected – to the far right in the builder, under General Properties, you will see “Wallpaper Object Settings”:
- Float Outside Ad – Once selected, a Z-index field will show (default of 70000000 will show) – you can click in this field to change your Z-index setting (for your site needs/for the asset to properly display above site content).
- Scroll with Page will appear with Float Outside Ad checked - select if you want the asset to scroll up and down with the page content. If left unchecked, the ad content will remain locked on each side of your page content.
Save the ad.
Go to the Preview icon to view the ad as well as set up on a test site for true site testing/and make adjustments if needed:
- Float Left – With your left asset selected, you can select Float Left to have object automatically display above your site content at a default z-index of 70000000)
- Float Right – With your right asset selected, you can select Float Right to have the object automatically display above your site content at a default z-index of 70000000)
Save the ad.
Go to the Preview icon to view the ad.
* It’s usually recommended to save your Wallpaper unit as a Global Template once tested to save all your settings. You can then Save As from your Wallpaper Global Template and just right click on the gutter image (by right clicking on the layer at the bottom of the builder) to “replace asset” – this will keep your settings if you have a z-index adjustment – However, it’s good practice to double-check.
More on How to Create a Template or Work from a Template here.