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

    • 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 ...
    • 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. ...
    • How Do I Change The Hero Background Color In The Hero Area?

      This Article is For: All users who SoCast Website Admins This is applicable to: Hero 1.0 Theme These are the instructions for adding a 'Hero Background Color' to your website's 'Hero Content' area. Only users who are website admins will have access ...
    • Theme Settings

      This Article Is For: All users who have the 'Manage Website Settings' permission This is applicable to: all SoCast Themes Theme Settings allow you to customize or modify your theme's colors and branding and are broken down into the following modules: ...