Mobile Siteheader

Mobile siteheader is a collapsing banner on the top of the page that starts off expanded and collapses on scroll event and expands again if scrolled back up.

The collapsed state is sticky and scrolls along with the page. Banner is always visible until closed by clicking on the close button.

The close button appears after the banner collapses for the first time and after that it will be on top of both closed and expanded states of the banner. The button is added on top of the banner by DELFI and is located on the top right of the banner.

Mobile siteheader is only shown in articles.

Example

Mobile Siteheader Example

Specifications

Dimensions
Siteheader consists of two possible states, expanded and collapsed, where accepted dimensions of are 600x250 + 600x100px

Weight limit
Total weight limit of siteheader is 150 KB. (The sum KB size of both images.)

Close button is 30x30px and is positioned 12px from the top and right side.

General tips on creating siteheader
The siteheader banner is displayed in a separate container that is resized by Delfi and the banner should be aware of the parent element resizing itself.
Set the background of the body of the banner something other than white so that it is visually distinct of rest of the page.

Siteheader banner must include the following script:

<script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>

Also the banner must call for a resize function as soon as possible for the initial positioning and size to be set:

dhtml.external && dhtml.external.resize && dhtml.external.resize("100%", "100%");

All template files below include the Adform.DHTML.js script and the first resize function call.

How to add a clicktag
For clicktag to work you must have added the Adform.DHTML.js file and trigger the clicktag on a wrapper div element like this.

<div id="clickLayer">banner</div>
<script>
	dhtml.external && dhtml.external.resize && dhtml.external.resize("100%", "100%");
	var clickArea = document.getElementById('clickLayer');

	clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
	landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

	clickArea.onclick = function() {
		window.open(clickTAGvalue,landingpagetarget);
	}
</script>

You can read more on how to add a clicktag at AdFrom


AdForm Studio

Simplest way to create a siteheader is to use an existing Adform studio siteheader banner. Just replace the images, change the background color, add clicktag and that's it.

Example: Siteheader made with template
Adform Studio: Siteheader Template

  1. Click on Template
  2. (Optional) set the height of the siteheader
  3. Set the clicktag of the siteheader
  4. Set the background color of the siteheader
  5. Open additional assets
  6. Replace the collapsed image
  7. Replace the expanded image
  8. (Optional) preview siteheader
  9. Upload directly or download siteheader