This article will provide details on how to add/edit the Pricing Columns 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 Pricing Columns >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below.
PRICING COLUMNS
What’s Included/Available: up to 4 pricing columns per row, each column has a header, section for pricing details, and texts lines to highlight products
Common Uses: pricing page for memberships/products; provide users the name of the membership/product along with its price and what’s included
How to Edit/Settings
- Name/Heading: the text added here, typically used for the name of a membership or product, will be displayed at the top of the pricing column
- Price: add the price of the membership/product to this field, which will be displayed under the heading. If you don’t want to include a price, leave this field blank.
- Price Sub Text: the text added here (ex: Per Month) will be displayed directly beneath the price. If you don’t want to include price sub text, leave this field blank.
- Text Lines: these can be used to add brief descriptions or highlights of the product, such as what’s included. To edit, click into the Text Lines field and add your desired content (enter one item per line).
- 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 this pricing column to have a button, 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-6 (if applicable) for each additional content column you’d like to add to this section.
- Move: allows you to reposition/move a content column within the section.
- Remove: allows you to remove/delete the pricing column in its entirety.
- Add Column: this will add a new price column to the section.
- Heading: the text added here will be displayed at the top of the section; click into the Heading field to add your desired content.
- Text: the text added here will be displayed beneath the section heading, but above the pricing columns; click into the Text field to add your desired 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.
- Columns Per Row: allows you to set how many pricing columns are displayed per row.
- 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 for the heading and text at the top of the section (does apply to captions); 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 Pricing Columns 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.