Split Content/Image

Split Content/Image

This article will provide details on how to add/edit the Split Content/Image web page 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. 
  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, open up the page in your Hive and click +Add Section >> select Split Content/Image >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below. 





SPLIT CONTENT/IMAGE

What’s Included/Available: option to split the content block with an image or video on one side and text on the other; you can choose if the image/video is to the left or right of the content block

Common Uses: instructor/owner bios; product highlights with images; showcasing your facility and/or community (members)

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

  2. Vertical Padding: controls the amount of space added above and below a content; use the Vertical Padding slider to adjust as desired

  3. Font Size: controls the font size of the primary text (excludes heading font)

  4. Heading Font Size: controls the font size of the header text

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

    1. Image Position: allows you to choose which side of the section the image is displayed on (left or right)

    2. Image Alignment: controls where the image is aligned within its container; available options are Top (Touching), Top, Middle, Bottom, and Bottom (Touching); “touching” refers to the image touching the absolute top/bottom of its container

    3. Image Mobile Stack Order: controls the order of how the content is stacked when viewed on a mobile device. The available stack options are:

      1. Column Order: displays content and images as-is; if selected, please note that if the Image Position is set to right that the image will be displayed below the content, but will be displayed above the content if set to left. 

      2. Above Content: displays image or video (if no image present) above the content/text

      3. Below Content: displays image or video (if no image present) below the content/text

    4. Image Roundness: allows you to add rounded corners to the image; use the slider to adjust as desired

    5. Image Column Width: adjust the width of the column the image is in; use the slider to adjust as desired (you may not notice a difference when in mobile view)

    6. Image Size: adjusts the size of the image; use the slider to adjust as desired

    7. Image Border Size: adjusts the size of border around the image, which you'll select in the settings below

    8. Image Border Type: allows you add a border to the image; the available border types are Solid, Shadow, Double Dash, and Dotted. To see how they work, select the type from the Image Border Type dropdown, then adjust the border size. 

    9. Image Border Color: allows you to choose the color of your border, which you'll do by clicking into the Image Color field, then select your desired color. If you’re familiar with color hex codes you can also paste those into this setting. 

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

    1. 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).

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

  7. 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 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 Size: adjusts the size of the button; use the slider to adjust as desired

    3. Button Roundness: option to add rounded corners to the button; use the slider to adjust button roundness as desired

    4. Background 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.

    5. Text Color: 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.

      *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

  8. Brand/Logo Image URL: optional setting that allows you to add a brand/logo to the top of the section; 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. Brand/Logo Image Position: option to position the logo top left, center, or right of the section

  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.

  11. Head Content: the content added here will be displayed at the very top of the section (above the content from step 1); 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 (below the content from step 1); to edit, click Edit Content and add your desired content

  13. Once you’ve finished making your edits to the Split Content/Image 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 ...

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

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

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

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