Theme 3.0: How Do I Edit the Hero Background in SoCast?
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
- Navigate to Website > Website Structure > Heroes, then click on an existing hero to edit or select Add New.
- Scroll down to the Background section.
- You can add up to five full-screen background images, which will appear at random on browser refresh.
- To upload an image, click Insert From Media Library.
-
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.
- The optimal image size depends on:
- Click Add Image to upload up to five images.
- Image Position for Small Screens: Set the position of all background images for this hero to display optimally on small screens.
- Background Color: This color appears behind the hero background image and when no image is provided.
- Click the Save/Update button to apply your changes.
Related Articles
How Do I Change the Hero Background Color in SoCast Engage?
Log in to SoCast Engage. Go to Website > Website Structure > Heroes. Select and edit the hero you want to update. Scroll down to the Background section. Remove the image in Image Slot #1. At the bottom, find Image Background Color and choose a color. ...Theme 3.0: How Do I Edit the Hero Appearance on My Website?
Theme 3.0: How Do I Edit the Hero Appearance on My Website? This Applies To: Clients using SoCast Theme 3.0 Users with the 'Manage Heroes' permission Follow these instructions to configure the appearance of the hero section on your website using ...How Do I Change the Hero Background Color in the Hero Area on My SoCast Website?
How Do I Change the Hero Background Color in the Hero Area on My SoCast Website? Who Is This Article For? All SoCast website administrators Applicable to: Hero 1.0 Theme This article provides step-by-step instructions for adding or changing the Hero ...How Do I Customize the Hero Background in the Hero 1.0 Theme?
Who Is This Article For? All SoCast Website Admins Applicable to: Hero 1.0 Theme Overview The hero background—whether an image or a color—is a key part of your website’s visual appeal and helps create a strong first impression for your visitors. ...How Do I Add a Hero Background Image to the Hero Area on My SoCast Website?
How Do I Add a Hero Background Image to the Hero Area on My SoCast Website? Who Is This Article For? All SoCast Website Admins Applicable to: Hero 1.0 Theme Note: Hero images are not mobile responsive. On mobile devices, only the portion of the image ...