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

CONTENT HIGHLIGHT

What’s Included/Available: primary content block with a header and content section, secondary content column

Common Uses: clean way to highlight features/offerings that are text based; Primary content gives you the option to provide high-level overview, with the Secondary content giving you the option to provide additional details. 

How to Edit/Settings

1. Primary Content: select Edit Content >> then add your content. We recommend adding a header with a brief description of what you’re highlighting in this section. The content you add here will be larger than the secondary content and is displayed on the left side of the section. 
   
   
   
2. Secondary Content: select Edit Content >> then add the additional details of the product/service/topic you’re highlighting. The content you add here is smaller than the primary content and is displayed in the right side of the section.
   
   
   *Please note that Primary Content and Secondary Content will become stacked, with the primary on top and the secondary beneath it, depending on the device and/or the size of the browser window the page is being viewed on. 
   
   
3. Vertical Padding: controls the amount of space added above and below a content; use the Vertical Padding slider to adjust as desired
   
   
4. Font Size: controls the font size of the primary text (excludes heading font); use the Font Size slider to adjust as desired
   
   
5. Heading Font Size: controls the font size of the header text; use the Heading Font Size slider to adjust as desired
   
   
6. Button Roundness: option to add rounded corners to the button; use the Button Roundness slider to adjust button roundness as desired
   
   
7. Primary Content Position: adjust where the Primary Content is positioned in relation to the Secondary Content, with the options being Left or Right; click into the Primary Content Position dropdown to select your desired position
   
   
8. 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).
   
   
   
1. 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 URL 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
   
   
2. Button BG Color: adjusts the background color of the button; click into the Background Color field, then select your desired color. If you’re familiar with color hex codes you can also paste those into this setting.
   
   
3. Button Color Text: adjust the color of the button text; click into the Text Color field, then select your desired color. If you’re familiar with color hex codes you can also paste those into this setting.
   
   
9. 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.
   
   
1. Horizontal Position: allows you to reposition the background image left or right within the section; use the Horizontal Position slider to position as desired
   
   
2. Vertical Position: allows you to reposition the background image up or down within the section; use the Vertical Position slider to position as desired
   
   
10. 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 setting.
    
    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.
    
    
1. Text Color: to change the color of all text in this section, click into the Text Color field and select the desired color; if you’re familiar with color hex codes you can also paste those into the Text Color field.
   
   
2. Heading Color: this will change the heading text color; click into the Heading Color field and select the desired color; if you’re familiar with color hex codes you can also paste those into the Heading Color field.
   
   
3. Separator Color: this will change the color of the separator, which is the vertical or horizontal line that separates the Primary and Secondary content ; click into the Heading Color field and select the desired color; if you’re familiar with color hex codes you can also paste those into the Separator Color field.
   
   
11. Head Content: the content added here will be displayed at the very top of the section; to edit, click Edit Content and add your desired content
    
    
    
12. Foot Content: the content added here will be displayed at the very bottom of the section; to edit, click Edit Content and add your desired content
    
    
    
13. Once you’ve finished making your edits to the Content Highlight section, click Set Content >> then Save the 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

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

• Accordion Widget

  This article will provide details on how to add/edit the Accordion 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. ...

• Pricing Columns Widget

  This article will provide details on how to add/edit the Pricing Columns 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 ...

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

• Content w/Contact Widget

  This article will provide details on how to add/edit the Content w/Contact 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 ...