The new website themes are made to work well with multiple devices, such as mobiles, tablets, laptops and desktop computers. This adaptability is called responsiveness.
The header image of a website has a fixed size. We recommend using a horizontal image with a resolution of at least 1440 x 600 pixels. This will ensure a good, crisp image across most popular devices.
When uploading a header image, the upper and lower part of the image (the grey areas represented in the illustration above) will be cropped to fit the type of header that is selected within your website theme. This is an important aspect to keep in mind when you design your header and position the graphical elements inside the image, to make sure they do not get cut out (partially or completely) when you upload the image in the Coaches Console system. So, avoid placing your (important) header elements on the margins of the image (the grey areas shown in the illustration above).
To ensure that your header image works properly on multiple device sizes, we strongly recommend that the header image graphical elements (the human figure is our examples above) are positioned close to the center or in the middle of the picture (see examples 1 and 2). This will help greatly when your clients are visiting your website on a mobile device. When your graphical elements are to the left or to the right (see examples 3 and 4), they will likely not (completely) appear on smaller devices (tablets, phones), where the header progressively adjusts the cropping area towards the middle and center of the picture.
You can check your header image cropping area with the preview mode of pages and of the Theme Builder, and switch between devices to see how your image crops.
Page Preview (Website > Pages > option "Preview" in the drop-down menu to the right of the page > Preview icons for Desktop, Tablet and Mobile at the top of the previewed page):
Theme Builder Preview (Website > Theme > button "Theme Builder" > top of the Theme Builder settings page):
Bellow, you can find some examples of header images from our current themes:
Other aspects:
1. Header height options: Notice that the header image has 3 types of height settings you can use: small, medium, large, that you can setup either globally from the Theme Builder, or for specific custom pages ("Design Options" tab of the page in edit mode):
|
Theme Builder Header |
Custom Page Header |
|
|
|
2. Text in your header image: If you decide to add text to your header image, the recommendation is to either (a) position it in the middle of the image when you design the image, or (b) use the Tagline feature for custom pages (in edit mode of the page > "Design Options" tab > section "Header Components" > button "INSERT TAGLINE") to insert the text, which will make the text to automatically fit smaller screens. (This solution is limited to the custom pages and not possible on system pages.)
3. Custom code solution for smaller screens: If, for whatever reason, you do not want your header image to be cropped on smaller screens, but to be displayed entirely (approximately), then the solution is to add a custom CSS code for that in your Console system > Website > Settings > section "Tracking Code" > field "Google Analytics". You don't need a Google Analytics account for this; you just copy and paste in this field the code below, then save the change:
<style>
@media all and (min-width:0px) and (max-width: 600px) {
div.header-content-container,div.header-content {
min-height: 200px !important;
}
}
</style>
Finally, we remind of the video tutorials on how to upload and customize your header image, in case you did not watch it already:
Comments