Theme 3.0: How Do I Edit The Hero Background?

Theme 3.0: How Do I Edit The Hero Background?

This Is Applicable To:

  • Clients with SoCast Theme 3.0
  • Must have ‘Manage Heroes’ permission

These are the instructions for c onfiguring the background that appears behind the content area of the hero. A maximum of 5 background images can be added to appear at random on browser refresh.

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

Step-by-step guide

  1. Go to: Website > Website Structure > Heroes > Click On An Existing Heroe To Edit or 'Add New'
  2. Scroll down to the 'Background' section
  3. A maximum of 5 full-screen background images can be added to appear at random on browser refresh.
  4. To upload an image, click on 'Insert From Media Library'
  5. Dimensions for the 'Hero Background Images': Determine the optimal image size for your hero background based on the following
    1. The ‘Height’ option selected in the ‘Appearance’ section in the hero editor for each hero. See: Theme 3.0: How Do I Edit The Hero Appearance?
    2. The ‘Website Hero Width’ and/or ‘Hero Width’ options selected in Website Settings > Theme Editor > Heroes. See Theme 3.0: Hero Website Theme Settings
    3. The ‘Default Website Width' option selected in Website Settings > Website Template. See Theme 3.0: Website Template Settings
    4. The minimum and maximum target screen resolutions used by your website audience according to your website analytics, e.g. Google Analytics
    5. Example 1: If your default website width is set to 1280px, the hero width in your theme settings is set to ‘Website Width Content with Full Screen Width Background’, and your target desktop screen width is 1366px, then the recommended minimum width for your hero background image would be 1366px
    6. Example 2: If your hero height is set to '1/2 Height Banner' and your target desktop screen height is 768px, then the recommended minimum height of your hero would be 768px
    7. Note that despite sizing images for optimal display, the presentation will ultimately still vary depending on the device screen and browser window size used by each website visitor
    8. For general reference (as of 2020), a width of 1980px and a height of 1080px can be used as a rough guideline to optimize for full screen images, unless your target audience uses larger screen resolutions
    9. The hero background image is always center cropped by default based on the device screen and browser size it is viewed on.
  6. Click 'add image' upload up to 5
  7. Image Position For Small Screens: Sets the position of all background images for this hero to display more optimally on small screens.
  8. Background Color: Appears behind the hero background image and when no image is provided.
  9. Click the 'Save/Update' button



    • Related Articles

    • How Do I change the Hero in Theme 3.0?

      This Article Is For: Clients with access to the Theme 3.0 Users who have the ‘Manage Heroes’ permission Step-By-Step Instructions Website > Website Settings > Theme > Theme Editor > Heroes Configure the website hero and the appearance of all heroes ...
    • Hero Background (Hero 1.0 Theme)

      This Article is For: All users who SoCast Website Admins This is applicable to: Hero 1.0 Theme Hero Background content such as images and colors are an important part of your website visitor's experience. Learn More : How Do I Add A Hero Background ...
    • How Do I Add A Video Hero In Theme 3.0?

      Here’s how to make a visual impact on your website with video heroes.  Go to website > website settings > theme > launch theme editor > heroes Once in the Heroes section, click either ‘create new’ or edit an existing hero. Once in the hero, scroll ...
    • Theme 3.0: How Do I Edit The Hero Appearance?

      This Is Applicable To: Clients with SoCast Theme 3.0 Must have ‘Manage Heroes’ permission These are the instructions for c onfiguring the appearance of the hero. Step-by-step guide Go to: Website > Website Structure > Heroes > Click On An Existing ...
    • Hero Content (Hero 1.0 Theme)

      This Is Applicable For: All users who have the 'Manage Website Settings' permission This is applicable to: Hero 1.0 Theme Hero content such as logo and listen live button customizations are an important part of your website visitor's experience. ...