The fluid scrolling skin template can be used for one or both of the side panels of a fluid skin. It uses three sets of image backgrounds and overlays, to create responsive side panels that transition as you scroll down the page. These specs cover setting up a single side-panel of a fluid skin, if you want to use the same template on both sides, simply double the number of assets you produce.
For more information please see our Guide to Skins, which covers:
- The key differences between our Seamless Skin & Fluid Skin formats
- The basics for designing assets for using within the our skin templates
- Tips and best practice for using overlays
Examples
Asset Specs
Backgrounds (x3):
- Image - 800x1440px JPG, PNG or WEBP
Main overlays (x3):
- Max size of 800x1440px (PNG or WEBP with transparent background), one asset for each corresponding background.
Top/Bottom overlays (optional) (x2):
- Additional overlay elements that are top/bottom aligned with the overlay container. Max size of 800x500px (PNG or WEBP with transparent background). These overlays are static across all 3 backgrounds.
For best results, export overlay assets without any excess empty space - the size and position of the overlays are configurable within the skin settings.
Format description and guidance
The template requires three sets of assets, each consisting of a background, and overlay, and a click URL.
Backgrounds use the “cover” scaling mode by default, so be aware that the edges may appear cropped for different screen sizes and resolutions. You can set the anchor point of the background via background position - this is the transformation point around which the assets will be scaled, and it will be the part of the assets guaranteed to be in view, so make sure to set it to an appropriate value for your specific assets. Be aware that the same settings will be applied to all 3 backgrounds, so design your assets with this in mind.
Use the overlays to add your static branding and messaging elements on top of the background. The overlays automatically scale and resize your content to fit within the available space, enabling responsive functionality for your skin. You can define the overlay container width & height (as a percentage of the total side-panel area) , as well as define minimum and maximum widths (in pixels) to constrain their scaling.
The main overlay is the primary overlay asset, which will fill as much space within the overlay container as is available. Optional top and bottom overlays can be added, allowing for static branding elements such as logos and CTAs to be placed separately from the main overlay, allowing for more advanced responsive layouts. The top/bottom overlays will match the full overlay container width, and you can adjust their heights to control how big they will appear
You can additionally configure how the overlays are positioned within the skin side-panels. By default they are centered, however you can modify the horizontal and vertical alignment of the overlays using the preset positioning options, and add an offset to fine-tune the position (you can use any valid css unit eg 250px, 50%, 20vh etc, measured from the selected position edge).
For best results, export the overlay PNG assets without any excess empty space - this allows the template to handle the overlay scaling and placement more effectively.
Max duration
Autoplaying videos should not exceed 30 seconds in duration.
Click URL
The template supports three separate click URLs (you can also use the same URL across all three).
Max total file weight
Combined file weight of all assets within the entire skin (2 side panels + top banner) must be under 3.5MB.
Audio
Not supported