WOD Viewer Widget

WOD Viewer Widget

This article will provide details on how to add/edit the WOD Viewer widget on a web page. Please note that WOD calendars must be set up prior to using this specific widget, which you can learn more about in the How to Post Workouts (WODs) support article.


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 WOD Viewer >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below. 





WOD VIEWER

What’s Included/Available: embeds WOD calendar to the page, can restrict WOD visibility based on WOD Calendar Type

Common Uses: display your WOD calendar on a web page for your members to view daily workouts/submit scores (if enabled); most gym owners restrict this page to only be accessible to active members

How to Edit/Settings
  1. Title Text: click into this field to add any desired text, which will be displayed at the top of the section

  2. Days Forward/Backward: allows you to set how many days forward/backward users can view workouts on the WOD calendar

  3. Max Width: controls the width of the WOD Calendar display within the section; by default this is set to 600px


  4. WOD Calendar Displayed: allows you to select which WOD calendar will be displayed, which you’ll do by clicking into the dropdown. If a selection is not made then the WOD calendar at the top of the list, which is organized alphabetically from A-Z, will be selected by default.  

  5. Allow user to select WOD Calendar: gives you the option to allow your members/users to select which calendar they’d like to access. If set to Yes, users will be able to access all of the WOD calendars available in your Hive, regardless if a specific calendar was selected from step 4. 

  6. Background Image URL: this will be displayed behind the WOD calendar/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.

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


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

  9. Once you’ve finished making your edits to the WOD Viewer 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

    • Form Widget

      This article will provide details on how to add/edit the Form 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. ...
    • Video Widget

      This article will provide details on how to add/edit the Video 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. ...
    • Testimonials Widget

      This article will provide details on how to add/edit the Testimonials 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. ...
    • Accordion Widget

      This article will provide details on how to add/edit the Accordion 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. ...
    • Gallery Widget

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