Gallery Widget
This article will provide details on how to add/edit the Gallery 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 Gallery >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below.
GALLERY
What’s Included/Available: option to add up to 6 images with captions per row; once clicked the image will expand to larger/full view or hyperlink images to redirect to another page
Common Uses: before and after photos; display photos to highlight products/services; hyperlink photos to redirects users to another page(s)
How to Edit/Settings
- Image: 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 Interior Position: use the Horizontal Position and Vertical Position sliders to reposition the image within its container as desired.
- Link URL: adds a hyperlink to the image that will redirect users to its corresponding page once the image has been clicked; 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 hyperlink the image, simply leave this field blank. - Caption: click into the field underneath the Link URL to add a caption, which will be displayed beneath the image; if you don’t want to include a caption, simply leave this field blank.
- Move: allows you to reposition the order the image and its content (if applicable) within the section.
- Remove: allows you to remove/delete the image and its content (if applicable) in its entirety.
- Add Image: will add a new image column to the section.
- Images Per Row: controls how many images you’d like to display per row.
- Aspect Ratio: use the slider the width/height of the images within their containers.
- Show Captions: this controls whether or not captions are displayed underneath the images; if you don’t wish to include a caption, select No from the dropdown.
- Background Color: this controls the background color behind all captions within the section; to edit, 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 the transparency slider to make the background color/image more or less transparent. - Text Color: this controls the text color for all captions within the section; to edit, 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.
- Heading: the text added here will be displayed at the top of the section; click into the Heading field to add your desired text.
- Text: the text added here will be displayed beneath the header, but above the images; click into the Heading field to add your desired text.
- Background Image URL: this will be displayed behind the 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: this controls the color of the heading and text color at the top of the section; to edit, 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 setting.
- Once you’ve finished making your edits to the Gallery 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
How to Create/Edit Web Pages
This article will show you how to create/edit web pages in your Hive. To begin, go to Website >> Manage Web Pages >> Add Page. Before we start adding content, let’s go over the page's primary settings in the left hand menu. Name: add the name of the ...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 ...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. ...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 ...Call To Action Widget
This article will provide details on how to add/edit the Call to Action 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 ...