Module Documentation: Skill Bar

The HubSpot Drag and Drop Skill Bar Module is a versatile component that allows you to easily showcase skills, progress, or any other attributes on your HubSpot web pages. With this module, you can create visually appealing and interactive skill bars with the flexibility to customize background colors and text colors to match your brand's design.

Functionality

  1. Adding a Skill Bar:

    To create a new skill bar, follow these steps:

    • Drag the "Skill Bar" module from the HubSpot module library onto your web page.
    • Enter the skill name or attribute in the designated text field.
    • Adjust the skill level or progress by dragging the slider or entering a percentage.
  2. Customizing Skill Bar Colors: 

    You can easily customize the background color and text color of each skill bar. Here's how:

    • Click on the "Style" tab within the Skill Bar module settings.
    • Choose the desired background color from the color picker.
    • Select a text color that complements the background color for optimal readability.
  3. Updating Skill Progress: 

    You can update the progress of a skill bar at any time:

    • Click on the "Edit" button on the Skill Bar module.
    • Adjust the skill level by dragging the slider or entering a new percentage.
    • Save the changes to update the skill bar's progress.

Features

  • Easy Drag and Drop Interface: The module's drag and drop functionality makes it simple to add, rearrange, or modify skill bars without any coding knowledge.
  • Visual Skill Representation: Skill bars provide an intuitive visual representation of skill levels, enabling visitors to quickly understand your proficiency in various areas.
  • Customizable Styles: Skill bars provide an intuitive visual representation of skill levels, enabling visitors to quickly understand your proficiency in various areas.
  • Responsive Design: Skill Bar Module is fully responsive, ensuring a seamless user experience across different devices.
  • Accessibility: The module is designed with accessibility in mind, allowing all users, including those with disabilities, to access and interact with the skill bars.

Notes

  • You can add multiple skill bars to showcase different skills on the same page.
  • Experiment with different color combinations to create visually appealing skill bars that resonate with your website's design.

Edit-Page-Skill-Bar-Module (2)   Edit-Page-Skill-Bar-Module (3)

 

Back To Module >>