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 article.

• Section(s): the total area, or section, for each widget.

• 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 a content widget to a page, click +Add Section >> select Background Hero >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below.

Background Hero

What’s Included: header message, rotating content (text and/or images), up to 2 buttons, and background video/image

Common Uses: web page headers; links to member login, purchasing options, and other pages; product/services highlights

How to Edit/Settings

1. Height: this gives you the option to set the height of the content block (the width auto-adjusts based on the device/browser the page is being viewed on). Simply click into the box and add your desired height. You can also leave this blank, which will auto-scale the height depending on the device the page is being viewed on.
   
   
2. YouTube Video ID: this will be displayed behind the rest of the content in this section. To embed a background video, open up the video in YouTube and copy the video ID, which is an alphanumeric string that typically has 11 characters and is located at the end of the URL (ex: https://www.youtube.com/watch?v=1A2B3C4D5E) >> then navigate back to the page in your Hive and paste the code into the YouTube Video ID field.
   
   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. 4k - 16:9: for 4k resolution hi-def cinema videos
   
3. 4k Native - 256:135: for hi-def wide-screen videos that were originally recorded/rendered in 4k
   
4. Non HD - 4:3: standard definition
   
   

4. Background Image URL: if you’d rather have a background image instead of a video, 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.
   
   *Please note that the background video associated with the YouTube Video ID will not play on cell phone browsers. However, if you convert the video into a GIF you can add its link to the Background Image URL field, which will play on cell phones. If you’re unfamiliar with creating GIFs please reach out to success@myfithive.com and we’d be happy to walk you through the process.
   
   
5. Head Content: the content added here will be displayed at the top of the section; click Edit Content >> add your desired content >> then Set Content.
   
   
   
6. Slides: the content added to each slide will rotate; to edit, click Edit Content on the first slide >> add your desired content >> then Set Content. You can repeat the same process for each additional slide.
   
   
   By default, the Background Hero widget will start with 3 slides, but you have the option to add/remove them as you see fit. To remove a slide, simply click Remove on the slide you don’t need.
   
   To add another slide, click Add Slide.
   
   The direction arrows next to Move allows you to reposition the order of the slides as desired.
   
   Duplicate gives you the option to create a duplicate of an existing slide.
   
   
7. Background Color: if you don’t have background video or image, you can edit the background color by clicking into the box >> then select the desired color. If you’re familiar with color hex codes you can also paste those into the background color box.
   
   
8. Text Color: to change the 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.
   
   
9. Button Text: this is the text that will be displayed on the buttons (ex: Member Login, Learn More, Sign Up Now, etc). To edit, click into the Button Text box and add your text. If you don’t want to include a button, delete the text in the box and it’ll be removed.
   
   Button Link: 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 hard-coded (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
   
   
10. Once you have finished editing the content in the Background Hero section, click Set Content >> then Save the page to complete the process.