Content Hero Widget

Content Hero Widget

This article will provide details on how to add/edit the Content Hero widget on a web page in your Hive.

Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article. 
  1. Section(s): the total area, or section, for each widget. 

  2. Container(s): blocks that organize and group content together within a section. Think of them like boxes that hold different parts of a webpage, such as text, images, or videos, keeping everything neat and orderly. For example, the Split Content/Image widget has a block designated for text and a block designated for an image/video; these separate blocks are containers, since they contain the content within the section. 

To add this widget to a page, click +Add Section >> select Content Hero >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below. 




CONTENT HERO

What’s Included/Available: content/text section, button, and background image

Common Uses: introductions, highlights, and/or summaries for product/services with a button that redirects users to the destination page with full details

How to Edit/Settings
  1. Content: this is the main content of the section; to edit, click Edit Content >> add the desired content >> then Set Content

  2. Section Width: controls if the content displayed in this section is page width or full width; Page width sets the content within a central column and has margins on either side; Full width displays the content the entire width of the browser window/screen; to edit, click the dropdown >> then select Page Width or Full Width

  3. Vertical Padding: controls how much spacing there is between the content and top/bottom of the section, which you can adjust by using the slider. You can click Default to reset the padding back to its original size

  4. Content Position: controls where the content is position within the section; the available options are Left (default), Full, Center, and Right; to edit, click the dropdown >> then select the desired position

  5. Content Padding Horizontal: the space added to the left and right sides of the content; use the slider to adjust the content horizontal padding as desired

  6. Content Padding Vertical: the space added to the top and bottom sides of the content; use the slider to adjust the content vertical padding as desired

  7. Content Width: adjusts the width of the content (text) within its container; use the slider to adjust the content width as desired. 

    Note: the content width will not exceed its container size, which is half of the section (the other half is for the image/media container). 

  8. Column Vertical Positions: adjusts the vertical positioning of the Content and Media blocks within the section; to adjust the positioning, click into the Content and/or Media dropdowns and select the desired position, which are Center, Top, and Bottom. 

  9. Font Size: adjusts font size, but does not affect the heading font; use the slider to adjust the font size as desired

  10. Heading Font Size: adjusts the heading font size, but does affect the text size of the content underneath the header; use the slider to adjust the heading font size as desired

  11. Video Embed URL: paste the embed URL of the video you’d like to add to this section

  12. Video Size: use the dropdown to select your desired video size; available options are Small, Med, Large, and Full (please note that Full refers to the entire size of the container designated to the video).

  13. Video Ratio: controls the cinematic display type of the video; the available video ratio options for this widget are: 

    1. HD - 16:9: for 1080p definition videos

    2. Non HD - 4:3: standard definition

  14. Image URL: click the magnifying glass and select the image you’d like to use, or upload one from your device. You also have the option to select a stock image from the Unsplash Image Library. 

  15. Size: adjusts the size of the image within its container; use the slider to increase/decrease its size

  16. Aspect Ratio: adjusts the width/height of the image within its container; use the slider to make the image wider/taller

  17. Box Position: allows you to set where the image is positioned within its container; use the slider to reposition left, center, or right as desired

  18. Image Interior Position: allows you to position the image horizontally or vertically within its container, which helps ensure that the focal point of the image is displayed.

    For example, if you have an image that is taller than the container, you can use the Vertical Position slider to reposition the image up/down. If the image is wider than the container, you can use the Horizontal Position slider to position the image left/right. 

    The Aspect Ratio mentioned above also impacts the horizontal and vertical positions, so we recommend trying all 3 of these settings to see how they work with each other.

  19. Button Text: this is the text that will be displayed on the button; to edit, click into the Button Text box and add your desired text (ex: Sign Up Now)

  20. Button Link URL: this is where the users will be redirected to once they click the button; to edit, click the magnifying glass > then select the desired page/membership signup/file.

    The available link options are broken down into sections, which are:

    1. Content: includes all custom web pages available in your Hive
    2. Built In: includes all built-in pages in your Hive, such as member account, class schedule, blog, home page, etc.
    3. Signup: includes all memberships types that have self signup enabled
    4. Files: includes all files/images uploaded to your Hive

      If you don’t want to have a button in this section, simply delete all text from the Button Text field and it will be removed.

  21. Button Position: this allows you to place the button either underneath the text or video in this section; please note that if a video has not been added that the button will always be displayed underneath the text.

  22. Button Size: use the slider to adjust the size of the button

  23. Button BG Color: to change the button background color, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Text Color box

  24. Button Text Color: to change the button text color, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Text Color box

  25. Background Image URL: this will be displayed in the background of the main content in this section; to edit, click the magnifying glass and select the image you’d like to use, or upload one from your device. You also have the option to select a stock image from the Unsplash Image Library.

    Horizontal Position    : use this slider to adjust the background image left, center, or right

    Vertical Position: use this slider to adjust the background image top, center, or bottom

  26. Background Color: to change the background color of the entire section, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Background Color box. 

    If you have a background image, you can use the background color setting to overlay a color on top of it; you can also use this setting to make the background more/less transparent.
    5. Content Hero BG Slider

  27. Text Color: to change the color of all text in this section, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Text Color box.

  28. Heading Color: to change the heading text color, click into the box and select the desired color; if you’re familiar with color hex codes you can also paste those into the Heading Color box.

  29. Once you have finished editing the content in the Background Hero section, click Set Content >> then Save page to complete the process.

We hope this helps but please feel free to reach out to success@myfithive.com with any additional questions you may have. 

    • Related Articles

    • Background Hero Widget

      This article will provide details on how to add/edit the Background Content widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this ...

    • Content Highlight Widget

      This article will provide details on how to add/edit the Content Highlight widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this ...

    • Basic Content Widget

      This article will provide details on how to add/edit the Basic Content widget on a web page, which is one of the most flexible/customizable widgets available in your Hive (don’t let “Basic” mislead you on this). Before we begin, let’s cover a couple ...

    • Map Content Widget

      This article will provide details on how to add/edit the Map Content widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article. ...

    • Icon Content Widget

      This article will provide details on how to add/edit the Icon Content widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article. ...