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.
- 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 Icon Content >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below.
ICON CONTENT
What’s Included/Available: similar to Icon Call to Action, but icons are positioned at the top of each content column
Common Uses: provide multiple short highlights of products/services, educational content, etc.
How to Edit/Settings
- Icon: the icons in this section will be displayed at the top of each content column; click the magnifying glass to select the icon you’d like to include in the container. If you don’t want the content column to include an icon simply click into the field and delete it.
Icon Color: allows you to choose a color for the individual icon, otherwise all icons added to this section will be the same color; click into the box and select your desired color; if you’re familiar with color hex codes you can also paste those into the Text Color setting. - Image: adds an image to the content column, which will be displayed in between the Icon (if applicable) and text; however, it is recommended to either use an icon or image instead of both; 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.
- Content: this will be displayed underneath the icon and/or image; click Edit Content, then add your content as desired.
- 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 setting.
- Background Color: this will allow you to change the background color of the individual content column; 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.
- Button Text: this is the text that will be displayed on the button (if applicable); to edit, click into the Button Text box and add your desired text (ex: Sign Up Now). If you don’t want the content column to have a button, simply delete all text from the Button Text field and it will be removed.
- 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 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
*You will then repeat steps 1-7 (if applicable) for each additional content column you’d like to edit/add to this section. - Move: allows you to reposition/move a content column up/down within the section.
- Duplicate: allows you to duplicate the content column.
- Remove: allows you to remove/delete the content column in its entirety.
- Start New Row: if checked, this will move the subsequent, or following, content columns to a new row below.
- Add Column: this will add a new content column to the section.
- Vertical Padding: controls how much spacing there is between the content and top/bottom of the section, which you can adjust by using the slider. You can click Default to reset the padding back to its original size.
- Font Size: adjusts font size for all content columns, but does not affect the heading font; use the slider to adjust the font size as desired.
- Heading Font Size: adjusts the heading font size for all content columns; use the slider to adjust the heading font size as desired.
- Icon Size: adjusts the icon size for all content columns, but does not affect the heading font; use the slider to adjust the font size as desired.
- Columns Per Row: allows you to set how many content columns are displayed per row
- Fluid Column Width: fluid width "yes" will cause rows that have columns less than the "Columns Per Row" grow to use up the available space. Setting fluid width to "no" will have those columns shrink to remain sized as if there were the full amount of columns for that row.
To see this in action, set the columns per row to 3, then add 5 columns to the section. Try changing the fluid width option to yes and no to see how it affects those extra 2 columns in the row by themselves. - Maximum Column Width: allows you to adjust the width for all content columns within the section.
- Vertical Align/Center Content: positions the content so that they are aligned or centered vertically within their container, which helps ensure that the content appears balanced.
- Rounded Columns: this will add rounded corners to the column background, which you’ll click Yes from its dropdown to enable. This will not be applied if the column does not have a background.
- Column Space/Buffer: this is the margin, or spacing, on the outside of the box.
- Column Padding: this is the spacing, or padding, inside of the box.
To see the Column Space/Buffer and Column Padding in action, set a column background color to a different color from the section background color, then try changing the space/buffer and padding separately to see their effect. - Column Text Color: allows you to change the color of all text in 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 Column Text Color setting.
- Column Background Color: this will change the background color for all content columns in 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 Column Background Color setting.
- Icon Color: to change the icon color for all icons within 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 Icon Color setting.
- Head Content: the content added here will be displayed at the top of the section; click Edit Content >> add your desired content >> then Set Content.
- Foot Content: the content you add here will be displayed at the bottom of the section; click Edit Content >> add your desired content >> then Set Content.
- 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.
Horizontal Position: use this slider to adjust the background image left, center, or right
Vertical Position: use this slider to adjust the background image top, center, or bottom - 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 Text Color box.
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: 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.
- Heading Color: to change the heading text color, 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 Icon Content 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
Icon Call to Action Widget
This article will provide details on how to add/edit the Icon Call to Action 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 ...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 ...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 ...