Icon Call to Action Widget

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. 
  1. Section(s): the total area, or section, for each widget. 

  2. 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
  1. 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.

    1. 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.

    2. 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.

    3. Title: the text here will be displayed at the top of the content; to edit, click into the Title field and add your desired text

    4. Content: the content added here will be displayed in the first column of this section; click Edit Content >> then add your desired content.

    5. Text Color: adjusts the column text color; to edit, click into the Text Color field and select the desired color; if you’re familiar with color hex codes you can also paste those into the Text Color field.

    6. 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.

    7. Background Image URL: option to add a background image to the individual column; 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.

      1. Horizontal Position: option to reposition the background image left or right within the container; use the Horizontal Position slider to position as desired

      2. Vertical Position: option to reposition the background image up or down within the container; use the Vertical Position slider to position as desired

    8. 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. 

    9. 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: 
      1. Content: includes all custom web pages available in your Hive
      2. Built In: includes all built-in pages in your Hive, such as member account, class schedule, blog, home page, etc. 
      3. Signup: includes all memberships types that have self signup enabled
      4. 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.

    10. Button Background Color: option to hyperlink the entire individual column, which will redirect users to the selected URL when they click anywhere in the column. Please note that this will override any links, including buttons, within the column. To edit, click the magnifying glass >> then select the desired page/membership signup/file.

    11. Button Text Color: adjusts the color of the button text; click into the Text Color field, then select your desired color. If you’re familiar with color hex codes you can also paste those into this field.

    12. Link Entire Column: option to hyperlink the entire individual column, which will redirect users to the selected URL when they click anywhere in the column. Please note that this will override any links, including buttons, within the column. To edit, click the magnifying glass >> then select the desired page/membership signup/file.

    13. Move: allows you to reposition/move a content column up/down within the section.

    14. Duplicate: allows you to duplicate the content column.

    15. Remove: allows you to remove/delete the content column in its entirety.

    16. Start New Row: if checked, this will move the subsequent, or following, content columns to a new row below

  2. Add Column: this will add a new content column to the section.

  3. 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

  4. 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.

  5. Heading Font Size: adjusts the heading font size for all content columns; use the slider to adjust the heading font size as desired.

  6. 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.

  7. Columns Per Row: allows you to set how many content columns are displayed per row.

    1. 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.

    2. Maximum Column Width: allows you to adjust the width for all content columns within the section.

    3. 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.

    4. 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.

    5. Column Spacing: this is the margin, or spacing, on the outside of the box

    6. Column Padding: this is the padding, or spacing, inside of the box.

      To see the Column Spacing 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.

    7. Row Spacing: adjusts the spacing between rows when there are two or more rows

    8. 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.

    9. Column Background Color: adjusts 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.

    10. 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.

    11. Icon Position: adjusts where the icons are positioned, which are Top, Left Content, and Left Content Top.

    12. Icon Size: adjusts the size of the icons

    13. Icon Padding: adjusts how much padding (space) there is around the icons

    14. Text Position: adjusts where the text in the columns is positioned, with the options being Center, Left, and Right

    15. Button Position: adjusts where the buttons (if applicable) are positioned within the columns, with the options being Bottom and With Content 

    16. Button Background Color: adjusts the background color of all buttons in the columns; to edit, click into the Background Color field, then select your desired color. If you’re familiar with color hex codes you can also paste those into this setting.

    17. Button Text Color: adjusts the text color for all buttons in the columns; to edit, click into the Text Color field, then select your desired color. If you’re familiar with color hex codes you can also paste those into this setting.

    18. Button Roundness: option to add rounded corners to the button; to edit, use the slider to adjust button roundness as desired 

  8. 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.

  9. 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. 

  10. 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.

    1. Horizontal Position: use this slider to adjust the background image left, center, or right

    2. Vertical Position: use this slider to adjust the background image top, center, or bottom

  11. 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.

    1. 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

    2. 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.

  12. 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. ...

    • 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 ...

    • 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. ...