Team Members with Popup Documentation

Overview

The "Team Members with Popup" module allows you to take advantage of a robust interface (UI) component often utilized in web design and development. You can easily present a team with a popup window or without a popup window with any kind of skill or expertise. This module is responsive and highly customizable.

Features Included

Here are key features and effects that you might find in a "Team Members with Popup" module:

• Flexible Functionality: Team Members with Popup modules allow for a high degree of customization. You can modify the appearance, styles, and behavior to match your website and user experience goals. This includes the ability to change color, fonts, animation, background color, background image, background gradient, border, spacing, letter spacing, text transform, hover effects and more.
• Popup/Without Popup: You can present your team role and skill with popup or without popup. And the popup window style can be extremely customized.
• Member Profiles: Individual profiles for each team member with details such as profile image, name, role, skills, about us and contact information. Provides a quick overview of team members and their expertise.
• Unlimited Style: Endless customization possibilities for design, allowing users to tailor the interface to their preferences without constraints.
• Columns Grid: Columns grid can be set to such as desktop, tablet and mobile of all sizes.
• Ordering Elements: You can easily order name, designation, short description and social media elements yourself.
• Profile Image Hover Effect: You can show/hide the hover effect of your profile image.
• Smooth Animations: Attracts the user's attention, improves the intuitiveness of the user interface, and contributes to a modern and attractive design.
• Show/hide module: Module can be shown/hidden.
• Responsive: Ensures a seamless and accessible user journey, accommodating users on different devices without compromising functionality or design.

Team member with popup module are a versatile and practical UI element for improving the organization and presentation of content on websites. 

Module Setup

Setting up the "Team Members with Popup" Module is easy and straightforward. All you have to do is perform a simple drag and drop. 

Now let’s go through the setup steps:

• Login to your HubSpot account and left side navigate to the “Content” tab.

• Click on “Content” in the dropdown menu and select “Website Pages” from the extended menu.

• Under the module selection menu, search for “Team Members with Popup” and select the module

• Now simply pick the "Team Members with Popup" module, drag, and drop it wherever you want on your page. You’ll see a new module appear on the page.

Content Setting

Under “Content”, you can edit the content you want to be displayed on your Team members with a popup section. Easily adjust and update the “Enable Module”, “Layout”, "Enable heading", "Heading animation", "Enable popup window", "Team items", "Team items' animation", "Ordering elements", "Team information", "Team popup description" and more as you please.

Below is an overview listing of module content settings:

• Enable module: Module can be shown/hidden.
• Section layout: Section layouts can be set across module levels.
• Enable animation: Animation of heading and team items can be shown/hidden using "Enable animation" field.
• Enable heading: Section heading can be display using "Enable heading" field
• Heading Group: Heading group includes heading animation, overlay text and heading text. 
  
  
• Number of display per row: The setting group is how many columns to display in Row.
  
• Enable popup window: Show/hide popup window using "Enable popup window"
• Team items: Team items are groups of repeat items.
  
• Animation: Animations include various styles options including like "Fade", "Flip" and "Zoom".
• Ordering elements: In this field using, you can be ordering the position of the elements yourself.
  
• Profile image: Team member image can be changed.
• Name of team member: Enter the name of team members.
• Designation: Enter the designation of team members.
• Short description: Enter the short overview of team members.
• Social media: Social media is repeater group, included "Custom icon", "Default icon" and "Link".
• Popup - Team member more details: Popup - Team member more details group included address and team member more details. Which can be displayed in a popup.
• Module JS: Include the module level jQuery show/hide field. 

Style Setting

• Section: Under section spacing and background to manage module background solid color, background gradient and background image with overlay solid color and gradient. And spacing to easily manage desktop, tablet and mobile padding.
• Heading: Easy customize the overline text typography font, color, line height, text transform and font weight and Heading alignment and spacing.
• Team profile: Team Profile includes a profile image style.
  • Profile size: Profile image height and width can be easily changed for desktop, tablet and mobile.
  • Border radius: The border radius can be customized on all corners of the profile image. Such as "Top Left - Border radius", "Top Right - Border radius", "Bottom Right - Border radius" and "Bottom Left - Border radius".  Note: This field will not work with profile image enabled.
  • Profile image circle: Profile image can be rounded using "Profile image circle" field. Note: But you have to give same width and height.
  • Border: If you want to give a border to the profile, use the "Border" field.
  • Spacing: Spacing field to manage the padding and margin of profile image.
  • Hover border: Use this field to change the border color of the profile image when you hover over the team box.
  • Enable image scale effect: Show/hide profile image hover effect using this field.
• Profile info: This group contains style of team member info.
  • Name text font: This field using team member's name style can be customized. Such as font family, font color, font size and font weight.
  • Text transform: This field using team member's name text style can be customized. Such as uppercase, lowercase, capitalize and none
  • Letter spacing: Letter spacing can be customized.
  • Margin bottom: Name text margin bottom can be customized.
  • Name - Tablet font size: Name text font size can be customized in tablet.
  • Name - Mobile font size: Name text font size can be customized in mobile.
  • Hover text color: There is a field to change the color of the name text on the hover of the team box.
  • Profile name: This group contains the style of team member's name.
  • Team designation: This group contains the style of a team member's designation text.
    • Designation text font: This field using team member's designation text style can be customized. Such as font family, font color, font size and font weight.
    • Text transform: This field using team member's designation text style can be customized. Such as uppercase, lowercase, capitalize and none
    • Letter spacing: Letter spacing can be customized.
    • Margin bottom: Designation text margin bottom can be customized.
    • Name - Tablet font size: Designation text font size can be customized in tablet.
    • Name - Mobile font size: Designation text font size can be customized in mobile.
    • Hover text color: There is a field to change the color of the designation text on the hover of the team box.
  • Team short description: This group contains the style of team member's short overview text.
    • Margin bottom: Short overview text margin bottom can be customized.
    • Hover description text: There is a field to change the color of the short description text on the hover of the team box.
  • Spacing: The spacing and margins of the team info box easily customizable.
  • Background: Background solid color and background gradient color can be easily customizable.
  • Border radius: The border radius can be customized on all corners of the team info box. Such as "Top Left - Border radius", "Top Right - Border radius", "Bottom Right - Border radius" and "Bottom Left - Border radius".
  • Alignment: In this field can be used to change the alignment of team info box elements. Such as "Center", "Left" and "Right".
  • Border: Using this field, team info box border style can be customized.
  • Enable box shadow: Team info box -  box shadow can be customized.
    
  • Hover setting: Team info box background solid and background gradient color can be changed on team box hover.
• Social media: In this group included social media icon and icon box style such as "Icon color", "Icon size  [Desktop, Tablet and Mobile]", "Icon hover color", "Icon box size [Desktop, Tablet and Mobile]", "Icon box background color", "Icon box border radius", "Icon box border", "Icon box hover background color" and "Icon box hover border color".
• Team column: In this group included Background color, Spacing, Border radius, Border, Alignment, Box shadow and Hover style.
  
• Spacing: Team column spacing can be customized in "Desktop", "Tablet" and "Mobile".
• Background: Team column background solid color and background gradient color can be customized.
• Border radius: The border radius can be customized on all corners of the profile image. Such as "Top Left - Border radius", "Top Right - Border radius", "Bottom Right - Border radius" and "Bottom Left - Border radius".
• Alignment: In this field can be used to change the alignment of team column elements. Such as "Center", "Left" and "Right".
• Border: Using this field, team column border style can be customized.
• Enable box shadow: Team column - box shadow can be customized.
• Hover setting: "Background solid color", "Background gradient color", "Border color" and "Box shadow" can be easily customized on the team column hover.
• Popup window: In this group included Popup window overlay color, popup box style, Profile image style, Profile details and Close icon style.
• Popup - Overlay background color: Popup window background solid color can be customized.
• Popup box:
• Background color: Popup box background solid and background gradient color can be customized.
• Spacing: Popup box spacing can be customized for desktop, tablet and mobile.
• Border: Border can be customized for popup box.
• Border radius: Border radius can be customized for popup box.
• Profile image: Border, background color, Border radius, Spacing and Box shadow can be customized for popup window profile image.
• Profile Detail: Alignment, Name, Designation, Address, About us details description and Social media style such as "Font family", "Font size", "Font Weight", "Font text transform", "Letter spacing", "Margin bottom", "Text color", "Font size for tablet", "Font size for mobile" and Social media style such as "Icon size", "Icon box size", "Border radius", "Hover style", "Margin", "Alignment" and so on.
  
• Close icon: Background color, Icon color, Border radius and Hover style can be easily customized.
• Grid gap: In this group includes team column grid gap such as "Column gap" and "Row gap" can be easily customized for "Desktop", "Tablet" and "Mobile".
  
• Container custom size: Container width to customize the custom container width.