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, 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/move the image and its content (if applicable) up/down 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.
- 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.