Theme 3.0: How Do I Edit The Hero Background In SoCast?

Theme 3.0: How Do I Edit The Hero Background In SoCast?

Theme 3.0: How Do I Edit The Hero Background In SoCast?

Info

This Is Applicable To:

  • Clients using SoCast Theme 3.0
  • Users with the “Manage Heroes” permission

Use these steps to configure the background that appears behind the content area of the hero section. You can add up to five background images, which 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. Go to Website > Website Structure > Heroes, then click an existing hero to edit, or select Add New.
  2. Scroll to the Background section.
  3. Add up to five full-screen background images. They will display at random on each browser refresh.
  4. To upload an image, click Insert From Media Library.
  5. Dimensions for Hero Background Images:
    • The optimal image size depends on:
    • 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 Save/Update to apply your changes.

Hero Background Example

    • 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. ...
    • 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—image or color—plays a key role in your website’s visual appeal and creates a strong first impression for visitors. Related Articles How Do ...
    • 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? 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 SoCast ...
    • How Do I Add a Video Hero in SoCast Theme 3.0?

      How Do I Add a Video Hero in SoCast Theme 3.0? Adding a video hero is a great way to create a strong visual impact on your website. Follow the steps below to add a video hero in SoCast Theme 3.0. Steps Go to Website > Website Settings > Theme > ...
    • 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 ...