01 / DOCUMENTATION & SETUP

User Guide & Setup Instructions

A complete guide to configuring 3-in-1 layouts, custom team members, dynamic HubDB integration, and modal bio popups on HubSpot.

Quick Start (3 Steps)

1

Add to Page

Open any HubSpot Website or Landing Page. In the left editor sidebar, search for "Team Showcase Pro" (or "Team Directory") and drag it into your template section.

2

Choose Layout Mode

Under Layout & Display Settings, pick your preferred layout from the dropdown: Normal Grid, Filter by Discipline, or Slider / Carousel.

3

Add Member Content

Use the built-in repeater fields for manual editing, or switch the data source to HubDB Table to manage hundreds of team members dynamically.

3 Presentation Layouts

A

1. Normal Grid Layout

Displays a balanced, responsive 4-column portrait grid showcasing team members, custom badges (e.g. N° 01), job titles, and direct social profile links.

B

2. Filter by Discipline Layout

Generates interactive department filter buttons (All people, Design, Strategy, Technology) with live member count numbers calculated automatically from member records.

C

3. Slider / Carousel Layout

Transforms the showcase into an interactive carousel with Next/Previous arrows, slide count indicators (01 / 05), and a bottom tagline with a CTA button.

HubDB Dynamic Table Integration

To manage team data centrally across your entire HubSpot portal:

1

Select HubDB in Editor

In the module settings under Data Source, change the dropdown to "HubDB Table (Dynamic)" and pick your Team Directory table.

2

HubDB Columns Reference

The module connects seamlessly to these standard column names:

• member_name (Text) : Full Name of Team Member • role (Text) : Job Title / Position • department (Text) : Discipline / Filter Category • badge_number (Text) : Badge (e.g. N° 01) • photo (URL) : High-Resolution Portrait URL • bio (Text) : Biography for Profile Modal • skills_tags (Text) : Skills/Tags separated by pipe | • linkedin_url (URL) : LinkedIn Profile Link • instagram_url (URL) : Instagram Profile Link

Social Icons & Profile Modal Popup

Profile Details Modal: When a user clicks any member card, an interactive popup modal opens displaying a large portrait, detailed biography, skill tags, and social media links.

Select custom social icons per member or adjust global icon colors in the Styling section:

LinkedIn X / Twitter Instagram GitHub Dribbble Behance Website Email

Need Help or Custom Styling?

Our dedicated development team is here to assist you with installation or custom modifications.

Contact Support (gmstudio253@gmail.com)