Image formats
- PNG is a type of image that supports transparent or semi-transparent backgrounds. It's perfect for layering, gradients, and shaped edges.
- Use JPEG image format for photographs and illustrations with many colors.
- SVG is ideal for logos and straightforward vector illustrations. An animated SVG file can also be used.
💡For best results, static images that should be optimized to be 2000px wide and below 20mb.
Video and animations
GIF
Great for graphic animations and small videos of a couple of seconds. Added to the background, they also play on tablet and mobile devices, while regular background videos don't. To allow for quick loading time, the max. size of a GIF is 2MB.
Video
Videos can be added to Foleon's media library with the URL from YouTube or Vimeo. You can also bring in self-hosted videos ending in ".mp4".
Embeds
You can embed graphs, charts, forms, and more using the embed element. Just make sure you can embed it, which you can check in the settings from the source.
Background Images vs. Image Elements
Background Images
- These images are usually decorative.
- They can be placed on a Block level (#1) or on the Column level (#2).
- The image will always scale up to fill the shape of the background container.
- Cropping occurs when the container shape differs from the image shape.
- Can be thought of as layers that sit behind elements (#3)
Image Elements
- It will always show the entirety of an image.
- Elements (#3) are always placed inside of columns (#2).
- Column settings such as spacing and alignment affect how image elements are seen.
- Elements cannot overlap other elements.
Tools to support Foleon
- Use our Unsplash integration in the media library to find stock photos!
- Resizing images. You can crop your images in the Foleon media library or resize them before uploading using tools like Photoshop, Affinity, Canva.com, or Pixlr.com.
- Use Chrome's Window Resizer extension to help manage how your content looks on different screen sizes.
- Use Chrome's Grid Ruler extension to help you feel confident in your element placement.
- Use Chrome's Colorzilla extension to help pick colors from a webpage to drop into the color picker or update your brand swatches. Great for matching the look of a transparent color!
Design Tips
- Give your content room to breathe with white space.
- Catch your readers' attention with fullscreen background videos and adjusted scroll speeds*. However, be mindful of the page's loading speed on different types of connections.
- Keep your browser window smaller than full screen to ensure smaller laptops have a good experience. Use a web extension like, Chrome's Window Resizer, to edit in a small laptop sized window.
- Use overlays to break up your content, provide deeper information, and spark audience engagement.
*Available in the Content Studio, not in the Content Builder.
Media Library Tips
- Discuss with your team how you will organize the Media Library, so you can quickly locate the right files.
- *Are you working with Bynder? Our native integration with this Digital Asset Management tool helps you centralize, organize, and share all your digital media files.
- Use caution when duplicating Foleon Docs. Docs duplicated in the same workspace, their media remains in the same location as originally organized. When duplicating to a new workspace* the media copies a media library folder to the new workspace with the Doc. Learn more about this in our help center.
* Dependant on plan