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 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 the page up in your Hive and click +Add Section >> select Icon Call to Action >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below.
ICON CALL TO ACTION
What’s Included/Available: up to 6 content columns per row, icons, buttons, separate header/footer content, background,
Common Uses: provide multiple short highlights of products/services; directions on how to complete call-to-action; educational content;
How to Edit/Settings
- Content: the content added here will be displayed in the first column of this section; click Edit Content >> then add your desired content.
- Icon: click the magnifying glass to select the icon you’d like to include in the container, which is displayed underneath the heading (if applicable) and to the left of the text; if you don’t want to include an icon simply click into the field and delete it.
Individual 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 Individual Icon 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 to have a button in this section, 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-4 for each additional content column you’d like to 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, add 5 content columns to the section, then set the columns per row to 3. 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.
- Head Content: click Edit Content >> add your desired content >> then Set Content. The content added here will be displayed at the top of the section.
- Foot Content: click Edit Content >> add your desired content >> then Set Content. The content you add here will be displayed at the bottom of the section.
- 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: 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
- 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 Heading 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.
- Once you’ve finished making your edits to the Icon Call to Action 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
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 ...Thin Call To Action Widget
This article will provide details on how to add/edit the Thin 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 ...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. ...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 ...