Theme 3.0: How Do I Edit the Hero Background in SoCast?

This Is Applicable To:

• Clients using SoCast Theme 3.0
• Users with the ‘Manage Heroes’ permission

These instructions explain how to configure the background that appears behind the content area of the hero section. You can add up to five background images, which will display at random each time the browser is refreshed.

For information on mobile responsiveness, see: Mobile Responsive Notes & Best Practices.

Step-by-Step Guide

1. Navigate to Website > Website Structure > Heroes, then click on an existing hero to edit or select Add New.
2. Scroll down to the Background section.
3. You can add up to five full-screen background images, which will appear at random on browser refresh.
4. To upload an image, click Insert From Media Library.
5. Dimensions for Hero Background Images:
   • The optimal image size depends on:
     • The ‘Height’ option selected in the ‘Appearance’ section of the hero editor. See: Theme 3.0: How Do I Edit The Hero Appearance?
     • The ‘Website Hero Width’ and/or ‘Hero Width’ options in Website Settings > Theme Editor > Heroes. See: Theme 3.0: Hero Website Theme Settings
     • The ‘Default Website Width’ option in Website Settings > Website Template. See: Theme 3.0: Website Template Settings
     • The minimum and maximum target screen resolutions used by your website audience (check your analytics, e.g., Google Analytics).
   • Example 1: If your default website width is 1280px, the hero width is set to ‘Website Width Content with Full Screen Width Background’, and your target desktop screen width is 1366px, the recommended minimum width for your hero background image is 1366px.
   • Example 2: If your hero height is set to ‘1/2 Height Banner’ and your target desktop screen height is 768px, the recommended minimum height for your hero background image is 768px.
   • Note: Even with optimal sizing, image presentation may vary depending on the device and browser window size.
   • As a general guideline (as of 2020), use a width of 1980px and a height of 1080px to optimize for full-screen images, unless your audience uses larger screens.
   • The hero background image is always center-cropped by default based on the device and browser size.
6. Click Add Image to upload up to five images.
7. Image Position for Small Screens: Set the position of all background images for this hero to display optimally on small screens.
8. Background Color: This color appears behind the hero background image and when no image is provided.
9. Click the Save/Update button to apply your changes.