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.
- 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,
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
- Edit Content: this is the main content of the section; to edit, click Edit Content >> add your desired content >> then Set Content
- 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
Image Position: this allows to choose which side of the section the image is displayed on (left or right)
Image Alignment: this setting 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
- Video Embed URL: paste the embed URL of the video you’d like to add to this section
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).
Video Ratio: controls the cinematic display type of the video; the available video ratio options for this widget are: - HD - 16:9: for 1080p definition videos
- Non HD - 4:3: standard definition
- 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).
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 link options are broken down into sections, which are:
- Content: includes all custom web pages available in your Hive
- Built In: includes all built-in pages in your Hive, such as member account, class schedule, blog, home page, etc.
- Signup: includes all memberships types that have self signup enabled
- 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
- 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.
Brand/Logo Image Position: option to position the logo top left, center, or right of the section
- 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.
- 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.
- 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.
- 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.