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 part of the banner approximately 30px form top and approximately 500px to right from the center of the banner.


IMAGE Siteheader Example VIDEO Siteheader Example


Siteheader consists of two possible states, expanded and collapsed, where accepted dimensions of are 1600x400 + 1600x100px and 1600x300 + 1600x100px

Safe area
1265px wide are in the center of siteheader dimensions is "safe area" that is sure to display on smaller screens. Wider than safe area might be hidden and should therefore be used with discretion.

Background color
A solid body background color should be set for the banner.

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

Video siteheader
Siteheader where the expanded part is video. Best done in AdForm using this template. The weight limit of the video is 2 MB (will not be counted against the weight limit of the siteheader). Video file should be optimized and correctly sized.
The video will autoplay muted and loop. Please keep the video file short and light.
Video cannot be implemented in a HTML5 rich media container, it should be added as a video file. If you would like to use video in the banner, please use the previously mentioned Adform template

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=""></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>
	var clickArea = document.getElementById('clickLayer');

	clickTAGvalue = dhtml.getVar('clickTAG', '');
	landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

	clickArea.onclick = function() {,landingpagetarget);

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

Testing Siteheader Locally

To test your Siteheader locally please download this file and extract the siteheader_test.html in to the same directory as the Siteheader file you wish to test.
After you have placed the siteheader_test.html file in the same directory as your Siteheader, open siteheader_test.html file and follow the instructions.

  1. Click on Choose File
  2. Select Siteheader file (not siteheader_test.html)
  3. Select the height of your Siteheader
  4. Scroll this page to see your Siteheader in action

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
Adform Studio: Video 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

Adobe Animate CC

Creating siteheader banner in Adobe Animate CC is possible using our template file that includes the collapsing and expanding logic as well as the automatic setting of background color based on stage color. As Adobe Animate CC uses canvas to display the banner and creating a responsive canvas that doesn't flicker when resizing, we have edited code to support hidpi screens and responsive scaling. within the template.
Adobe Animate CC uses symbols for elements within canvas. The project file below has been set up with two main symbols with the type of movie clip that the template itself switches as it detects resizing of the page. All animations and visuals should only be done within those symbols.

If you do not wish to use our template please make sure your banner is vertically responsive, has a body background color and AdForm clicktag added.

Template file: adobe_animate_siteheader_template
Project file: siteheader_1600x400

How to create siteheader in Adobe Animate CC:

  1. Download the template file
  2. Download the project file
  3. Open the project file with Adobe Animate CC
  4. In Publish Settings, select the template file adobe_animate_siteheader_template
  5. Save the Publish Settings
  6. Design the collapsed and expanded symbols.
  7. Export the banner zip file
  8. Include siteheader dimensions in file name (eg. siteheader_1600x300_est)
  9. Send the zip file to Delfi AdOps

Misc notes

Adobe Edge Animate

Note: Adobe Edge Animate is discontinued and Adobe Animate CC should be used instead.

Creating siteheader in Adobe Edge Animate is similar to creating it in Adobe Animate CC.
Below we have supplied a template file that you can use and modify.
The template file contains two symbols that have been configured to be shown depending on parent element height. Background color of the siteheader is set same as the Stage element background in Adobe Edge Animate template file.
Do not create a separate clicktag layer. Send the url with the siteheader and it will be included automatically.

Template file: siteheader_1600x400_edge_template

  1. Download the template file
  2. Extract and import to Adobe Edge Animate
  3. Make changes
  4. (Optional) Set the Adobe Edge Project stage color to set the siteheader background color
  5. Publish
  6. Add to zipfile
  7. Make sure the zipfile name contains the dimensions of the siteheader
  8. Send the zipfile to Delfi

Google Web Designer

Easiest way to create a Rich Media Siteheader in Google Web Designer is to use GWD pages for both the expanded and collapsed states of the banner.
We have created a template file you can use to create the siteheader banner. It includes the expanding and collapsing logic and automatically sets the background to mach the GWD page stage color.

Template file : delfi_1600x300px_siteheader_gwd_template

How to create a siteheader banner in Google Web Designer

  1. Download the template file
  2. Extract and save the template file in documents/google web designer/templates folder
  3. Open Google Web Designer application
  6. Click delfi_siteheader_1600x300
  7. Click USE LAYOUT
  8. Write name for the banner (include banner dimensions in the name 1600x300 or 1600x400)
  9. Click CREATE
  10. Design ExpandedPage
  11. Design CollapsePage
  12. Save and Publish Locally
  13. Send the zip file to Delfi

Misc notes

Tumult Hype

To create a siteheader banner in Tumult Hype, create two separate scenes and change them on the resize event based window height. If window height is less than 105px show the collapsed scene, more than that show the expanded scene.
Or alternatively use the template file below that has been set up for you. The template already contains the resize and scene change logic, as well as clicktag logic.

Template file : siteheader_1600x400px_hype_template

How to create a siteheader banner in Tumult Hype

  1. Download the template file
  2. Open the template file
  3. Make changes to the Expanded scene
  4. Make changes to the Collapsed scene
  5. Save as HTML5
  6. Compress and send the zip file to Delfi

Misc notes