How to Format A Header Image
How to Format the Header in an iFOLIO Page
Grab attention with an eye-catching header in your iFOLIO page!
1. Choose a Header Size
2. Choose a Header Layout
3. Add an Avatar & Text
4. Add a Background Image
Choose a Header Size
iFOLIO has options for Small, Medium, and Large Headers.
Large-sized headers are great for websites, landing pages, and anything that includes an attention-grabbing visual at the top. A large header also best accommodates the Avatar + Title layout or if there is a large amount of header text.
Small and Medium-sized headers can be utilized for presentations, reports, or in other pages that don't require an especially prominent visual in the header.
Choose a Header Layout
You can choose between 5 different header layouts in iFOLIO
• Avatar Only
• Avatar with Text Box Below
• Avatar with Text Box Right
• Text Box Only
• Background Image Only
If you choose to include an avatar Image, you'll also have the option to select a square or circle avatar. Avatar images should be 360x360px minimum. A circle avatar will automatically crop the image into a circle once selected.
Add Your Background Image
The Header Image is an integral part of your iFOLIO Page.
Here are some best practices for formatting your header to look the best.
Image Specifications:
Width of at least 1920px
• Small Header: 340px Minimum Height
• Medium Header: 440px Minimum Height
• Large Header: 540px Minimum Height
We recommend header images to be 1920x1080px. This allows for the image to crop when necessary without cutting off the sides.
Sending Campaigns
Understanding Automatic Resizing & Content Safe Zones
Automatic Resizing
Header images in iFOLIO will automatically resize to fit the browser window on both Desktop and Mobile. If the header includes text, the header will expand to accommodate the text length on both Desktop and Mobile. If a header image is too short and the text is long, the image will zoom to fit height-wise, cropping the sides.
Safe Zones
Important content in a header image, such as important imagery, logos, or other central design elements, should be contained within the center of the header image. The safe zone will be dependent on the header size as well as the window size in the browser, but generally, for a small-sized header, it should fit within approximately the middle 340px vertically, while in a large-sized header, it should fit approximately the middle 540px vertically.
Use Preview to Finalize Your Design
In the iFOLIO editor, you can click the Preview button to see how your iFOLIO would appear in a browser.
Using this, you'll be able to resize your preview window to see how your header will appear in different-sized browser windows and ensure that it isn't getting cut off.
We also highly recommend opening the preview on a mobile device to double-check that it looks right when adapted for mobile.
950 East Paces Ferry Rd NE, Suite 1500, Atlanta, Georgia 30326
Phone: 470 - 223 - 4818, | Email: info@ifoliocloud.com