Documentation

Select your Theme Folder then click right click then show some option

Select option = Copy to different account

To edit your header, you'll first need to create a page with a theme template. When a page is created then edit you page in the left side click Tab Contents. Then click Page header.

The header supports multi-language functionality, allowing you to create a multi-language header.

To edit your Footer, you'll first need to create a page with a theme template. When a page is created then edit you page in the left side click Tab Contents. Then click Page footer.

Start Pro includes 14 ready-to-use page templates, along with HubSpot’s built-in system templates to ensure full functionality across your website.

The following default HubSpot system templates are included in the theme:

• 404 Error Page (404.html)
• 500 Error Page (500.html)
• Backup Unsubscribe Page (backup-unsubscribe.html)
• Membership Login Page (membership-login.html)
• Membership Registration Page (membership-register.html)
• Membership Reset Password Request Page (membership-reset-password-request.html)
• Membership Reset Password Page (membership-reset-password.html)
• Password Protected Page (password-prompt.html)
• Search Results Page (search-results.html)
• Subscription Preferences Page (subscription-preferences.html)
• Subscription Confirmation Page (subscriptions-confirmation.html)

This template is built for the homepage of your website and includes the following sections and modules, listed in their default order:

• Hero Banner
• Swiper Logo Slider
• About Impact
• Feature Overview Cards
• Impact Counter
• Teams Showcase
• Successful Stories
• Blog Popular Post
• FAQ
• Subscribe Form

File location: /templates/home.html

This template is designed for presenting information about you and your team and contains the following sections and modules in the default order:

• Hero Banner
• Icon & Text Grid
• Hero Banner(Two Column)
• About Impact
• Our Team Cards
• Call To Action

File location: /templates/about.html

The Our Team template is professionally crafted to showcase your company's human capital, expertise, and leadership. It provides a structured layout to introduce team members, answer common inquiries, and capture leads through integrated conversion points.

• Hero Banner
• Icon Content Card
• Our Team Cards
• Impact Counter
• Successful Stories
• Call To Action

File location: /templates/our-team.html

Use this template to showcase your services and solutions in a clear and structured layout. It is designed to highlight your offerings, explain your process, build trust through client feedback, and encourage user engagement.

• Hero Banner
• Feature Showcase Video
• Step Tabs With Popup Video
• Tab Cards Filter
• Impact Counter
• Successful Stories
• Subscribe Form

File location: /templates/services.html

You can use this template to create your contact page. It contains the following sections in order:

• Hero Banner
• Contact Form
• Icon Content Card
• Google Map

File location: /templates/contact.html

This is the template for your blog. It contains the following module:

• Blog Banner
• Blog Listing Post
• Pagination Blog

File location: /templates/blog-index.html

HubSpot does not support drag-and-drop functionality for blog post templates. Therefore, all sections and modules are built directly into the template and cannot be accessed or edited through the page editor.

File location: /templates/blog-post.html

Use this blank template to create a simple and fully custom page. It provides an empty layout that allows you to add only the sections and modules you need.

File location: /templates/blank.html

This template is designed for showcasing your pricing plans and value propositions, helping users compare offerings and make informed purchase decisions. It contains the following sections and modules in the default order:

• Hero Banner
• Advanced Pricing Card
• Successful Stories
• FAQ
• Call To Action

File location: /templates/pricing.html

This is a general landing page template designed to capture visitor information through a form and address common questions. It includes the following sections and modules in the default order:

• Hero Banner
• Icon Content Card
• About Impact
• Advanced Pricing Card
• Call To Action
• FAQ

File location: /templates/landing-page.html

This is an alternative landing page template with a modified layout, designed to highlight key features, build trust through success stories, and drive user action. It includes the following sections and modules in the default order:

• Hero Banner
• Icon Content Card
• Successful Stories
• Call To Action

File location: /templates/landing-page-two.html

This is the template for your blog, designed for displaying resource-focused content with a modified layout and additional sidebar functionality. It helps organize posts alongside subscription and related content for better user engagement. It contains the following modules:

• Blog Banner
• Resource Listing Post
• Pagination Blog
• Sidebar Post (Global)
• Blog Subscribe (Global)

File location: /templates/resource-blog-listing.html

HubSpot does not support drag-and-drop functionality for Resource Blog Post templates. Therefore, all sections and modules are built directly into the template and cannot be accessed or edited through the page editor.

File location: /templates/resource-blog-post.html

This is the Thank You page template. It contains the following module:

• Hero Banner

File location: /templates/thank-you.html

• Primary
• Secondary

• Primary
• Secondary

• Vertical spacing
• Maximum content width

Headings (H1 > H6)

• Font
• Letter Spacing
• Transform

Body

• Font
• Unit Choice Rem / Px

Links

• Font
• Letter Spacing

Typography For Mobile

• Headings (H1 > H6)

Small

• Font size
• Vertical Spacing
• Horizontal Spacing

Regular

• Font size
• Vertical Spacing
• Horizontal Spacing

Large

• Font size
• Vertical Spacing
• Horizontal Spacing

Primary

• Text

  • font
  • Letter spacing
  • Transform

• Background

  • Color

• Border

  • Border Style, Width, Color

• Corner

  • Radius

• Hover

  • Text
    • Color

  • Background

    • Color

  • Border

    • Border Style, Width, Color

Secondary

• Text

  • font
  • Letter spacing
  • Transform

• Background

  • Color

• Border

  • Border Style, Width, Color

• Corner

  • Radius

• Hover

  • Text
    • Color

  • Background

    • Color

  • Border

    • Border Style, Width, Color

Tertiary

• Text

  • font
  • Letter spacing
  • Transform

• Background

  • Color

• Border

  • Style
  • Width
  • Color

• Corner

  • Radius

• Hover

  • Text
    • Color

  • Background

    • Color

  • Border

    • Border Style, Width, Color

Simple

• Font
• Letter spacing
• Text transform

• Underline

  • Add Underline(Checkbox)
  • Width
  • Add

• Hover

  • Font

  • Underline

    • Add Underline(Checkbox)
    • Width
    • Add

Title

• Background

  • Color

• Text

  • Font
  • Letter spacing
  • Transform

• Border

  • Style
  • Width
  • Color

• Spacing

  • Padding

• Corner

  • Top Left Radius
  • Top Right Radius
  • Bottom Left Radius
  • Bottom Right Radius

Labels

• Text

  • Font
  • Letter spacing
  • Transform

Help text

• Text

  • Font

Fields

• Placeholder

  • Color

• Text

  • Font

• Background

  • Color

• Border

  • Border Style , Width, Color

Submit

• Button style Choice (Primary, Secondary, Tertiary, Simple)

Form

• Background

  Color

• Spacing

  • Padding

• Border

  • Border Style, Width, Color

• Corner

  • Top Left Radius
  • Top Right Radius
  • Bottom Left Radius
  • Bottom Right Radius

Header

• Text

  • font

• Background

  • Color

Body

• Text

  • font

• Background

  • Color

Footer

• Text

  • font

• Background

  • Color

Cells

• Spacing

  • Padding

• Border

  • Border Style, Width, Color

Menu

• Text

  • Font
  • Hover Color
  • Letter spacing
  • Text transform

• Background

  • Color

• Drop downs

  • Text

    • Font
    • Hover Color
    • Letter spacing
    • Text transform

  • Background

    • Color

  • Border

    • Border Style, Width, Color

  • Corner

    • Radius

Menu

• Menu Title

  • Font

• Footer Menu

  • Text

    • Font
    • Letter Spacing
    • Text Transform

  • Hover

    • Font Color

  • Active

    • Font Color

  Background color

  • Color

  Text color

  • Color

  Social Icon Color

  • Background Color
  • Icon Col

  Social Icon Hover color

  • Background Color
  • Icon Color

Start Theme comes with 30 pre-built, ready-to-use modules designed for flexibility, speed, and consistency.

The Hero Banner module allows you to create impactful banner sections that can be used anywhere on your pages. It supports flexible layouts, rich content, media or form integration, achievements, and advanced styling controls for fully responsive designs.

Features

• Custom Class and ID fields for advanced styling and targeting
• Rich text fields for adding a main heading and content description
• Multiple layout options, including single-column content and two-column content with image or form
• Adjustable maximum content width for large, medium, and small screen sizes
• Block alignment settings for large, medium, and small screen sizes
• Text alignment controls for large, medium, and small screen sizes

• Two-column layout with advanced controls:

  • Adjustable left and right column widths
  • Responsive column gap options for desktop and mobile
  • Row direction control with row-reverse toggles for desktop and mobile
  • Vertical alignment options: start, center, and end

• Right Image / Form Choice:
  Choose what appears in the right column.

  • Image option for visual content

  • Form option with:

    • HubSpot form selection
    • Form title and description using rich text fields
• Button options available within a repeater

• Achievement Content Enable/Disable:
  Toggle to show or hide achievement-related content.

• Achievement Items:
  Repeater field allowing multiple achievement items using rich text fields.

Styling Options

• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image
• Container setting choice with options for page-center, full width, or custom container width

• Right Image Settings including:

  • Max-width enable/disable toggle
  • Image max-width and alignment options

  • Box shadow controls with show/hide toggle:

    • X offset, Y offset
    • Blur radius and spread radius
    • Shadow color
  • Image border radius option for rounded edges

• Two-column layout styling:

  • Left and right column width settings
  • Spacing between columns for desktop and tablet
  • Row-reverse toggles for desktop and mobile
  • Vertical alignment control (start, center, end)
• Listing dot color option for customizing list indicators

The Process Visualization module is designed to visually represent business workflows and processes using a circular SVG layout with icons, images, animations, and editable content areas. It offers extensive customization options for content, layout, styling, and animations, allowing you to align the module with your brand identity and user experience goals.

Features

• Custom Class and ID fields for advanced styling and targeted customization

Left Content

The left section manages all textual and call-to-action–related content.

• Sub Title Tag
  Text field for adding a subtitle
• Title
  Text field for the main heading
• Typewriter Title Text
  Repeater field to add multiple animated text entries
• Description
  Rich text field for detailed content
• Buttons
  Button options available inside a repeater, supporting multiple CTAs

Right Content

The right section is used for visual and interactive elements displayed within the circular layout.

• Icon Items Content & Link
  • Image item with link option
  • Text field for icon label
• AI Image Link
  Image field
• BPO Image Link
  Image field
• Detaching Image Link
  Image field
• Center Logo
  Image field used for the central logo placement

Background Options

Choose from multiple background types:

• Background color
• Background gradient
• Background image with overlay option

Spacing Controls

Adjust section spacing independently for:

• Desktop
• Tablet
• Mobile

Animation Settings

• Section Animation Toggle
  Enable or disable section-level animation
• Animation Direction Options
  • Up
  • Down
  • Left
  • Right

Text & Button Alignment (Mobile View)

• Alignment options:
  • Left
  • Center
  • Right
• Vertical Column Direction Change
  Enable to change content stacking direction on mobile devices

Typed Content Style

Control the appearance and behavior of animated text.

• Title & Animated Text Tag Selection
  • H1–H6
  • Paragraph (P)
• Typewriter Text Color
• Rotation Speed
  Controls animated text transition speed
• Typed Text Settings
  • Typed text full width enable (Desktop)
  • Typed text full width enable (Mobile)

SVG Circle & Icon Styling

• Curve Line Colors
  • Outer ring line color
  • Inner ring line color
• Hover & Active State Color

Icon Style

• Icon background color
• Icon light (first) color
• Icon dark (second) color

SVG Circle Background

• Background gradient option for the SVG circle

The Swiper Logo Slider module allows you to showcase client, partner, or brand logos in either a grid layout or an interactive slider, offering full control over layout, styling, and responsiveness.

Features

• Custom Class and ID fields for advanced styling and targeting
• Heading: Use the Title/Content Rich Text Field for Headings and Descriptions
• Layout options including inline logo layout and box-based logo layout
• Logo management using a repeater field for easy image updates
• Background customization options, including background color and background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Container type options including page-centered and full-width layouts

Slider Controls

• Toggle option to enable or disable the slider
• Autoplay enable/disable option
• Adjustable autoplay duration (speed in milliseconds)
• Slider direction control (left to right)
• Responsive settings for slides to show and slides to scroll on desktop, tablet, and mobile

• When autoplay is disabled:

  • Option to enable or disable dots and arrows for desktop, tablet, and mobile
  • Custom styling options for dots and navigation arrows

• When the sliderstrong> is disabled:strong>

  • Control the number of logos per row with alignment options for desktop, tablet, mobile, and small screens

Logo Styling Options

Layout-based styling controls, including:

• Box background color
• Logo image dimensions
• Logo alignment and justify-content options
• Box size ratio selection
• Box border radius
• Box shadow enable/disable
• Column and row spacing between logo boxes
• Inner padding for logo columns
• Row spacing between logos

The Icon Content Card module displays boxed cards with a custom icon, title, and supporting text. It is ideal for showcasing services, features, or key information in a clear and visually structured format.

Features

• Custom Class and ID fields for advanced styling and targeting
• Layout options including inline cards and boxed card layouts
• Use the heading Rich Text Field for Headings and description
• Icon Content Card repeater for easy content management

• Icon selection options within the repeater:

  • HubSpot icons
  • Image uploads
  • Custom SVG code
• Rich text support for card content
• Optional button configuration within each card
• Background customization options, including background color and background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile

Layout-based styling controls include:

• Number of cards per row for desktop, tablet, mobile, and small screens

• Card styling options, including:

  • Box background color
  • Icon size and color controls
  • Card alignment options (flex-start, center, space-around, flex-end, space-between)
  • Border, corner radius, and box shadow customization
• Column and row spacing between cards for desktop, tablet, and mobile
• Inner column spacing within cards for desktop, tablet, and mobile
• Outer row spacing between cards for desktop, tablet, and mobile
• Option to enable or disable center alignment for icons and content
• Icon direction options, including top-left, top-right, center, or none

The Counter module displays key statistics with an animated counter effect, making it ideal for highlighting numbers such as achievements, milestones, or performance metrics.

Features

• Custom Class and ID fields for advanced styling and targeting
• Layout options including inline cards and boxed card layouts
• Use the Main Heading Rich Text field for both headings and descriptions.
• Icon Content Card repeater for easy content management

• Number and content repeater with the following options:

  • Plus symbol text field
  • Number value input
  • Sign symbols (e.g. +, K)
  • Counter animation speed duration
  • Content Rich Text field
  • Option to show or hide the last text on a new line
• Background customization options, including background color and background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile

Layout-based styling controls include:

• Cards per row settings for desktop, tablet, mobile, and small screens

• Card styling options, including:

  • Box background color

  • Counter Number Color/ Font Size

    • Counter Number Color
    • Counter heading tag selection
    • Text alignment options
    • Optional custom counter number font size (show/hide) with separate settings for desktop and mobile
  • Card justify-content options (flex-start, center, space-between, flex-end, space-around)

  • Card layout and alignment controls:

    • Vertical alignment (normal, flex-start, center, flex-end)
    • Flex direction options (row, row-reverse, column, column-reverse)
    • Content center spacing for desktop and mobile

  • Border, corner radius, and box shadow customization:

    • Border style, width, and color
    • Border radius adjustment
    • Box shadow enable/disable
  • Column and row spacing between cards for desktop, tablet, and mobile
  • Inner column spacing within cards for desktop, tablet, and mobile
  • Outer row spacing between cards for desktop, tablet, and mobile

The Counter module showcases key statistics using an animated counting effect, making it ideal for presenting achievements, milestones, and important performance indicators.

Features

• Custom Class and ID fields for enhanced styling and advanced targeting
• Flexible layout options, including inline and boxed card designs
• The Main Heading Rich Text field can be used for both section headings and descriptive text
• Icon-based content card repeater for simplified content management

Counter & Content Options

• Number and content repeater with configurable options:
  • Custom plus symbol text
  • Numeric value input
  • Sign indicators (e.g. +, K)
  • Adjustable counter animation duration
  • Content Rich Text field
  • Toggle to display the final text on a new line

Icon Options

• Built-in icon support within counter cards, with multiple input methods:
  • Insert custom SVG code
  • Select icons from the HubSpot icon library
  • Upload and use image-based icons
• Control icon placement relative to the counter content
• Customize icon size and color (for SVG and HubSpot icons)

Background & Spacing Controls

• Background customization options:
  • Background color
  • Background image
• Section spacing controls:
  • Top, bottom, left, and right padding
  • Responsive settings for desktop, tablet, and mobile

Layout-Based Styling Controls

• Cards-per-row configuration for:
  • Desktop, tablet, mobile, and small screen sizes

Card Styling Options

• Card background color
• Counter number color
• Counter number font size
• Counter heading tag selection
• Text alignment controls
• Optional custom counter font size toggle with separate values for desktop and mobile

Card Layout & Alignment Controls

• Horizontal alignment options using justify-content:
  • flex-start, center, space-between, flex-end, space-around
• Vertical alignment settings:
  • normal, flex-start, center, flex-end
• Flex direction configuration:
  • row, row-reverse, column, column-reverse
• Content centering spacing controls for desktop and mobile

Border & Shadow Customization

• Border style, width, and color controls
• Adjustable border radius
• Enable or disable box shadow

Spacing Between Cards

• Column and row spacing settings for:
  • Desktop, tablet, and mobile
• Inner column spacing within cards for:
  • Desktop, tablet, and mobile
• Outer row spacing between cards for:
  • Desktop, tablet, and mobile

The Successful Stories module lets you showcase client testimonials in a modern and engaging layout. It helps build trust and credibility by presenting customer reviews, ratings, and success stories, with flexible layouts and optional slider functionality.

Features

• Custom Class and ID fields for advanced styling and targeting
• Layout options including Layout One and Layout Two
• Use the Main Heading rich text field for both heading and description content
• Heading and content fields for the main section title

• Main Heading & Button Alignment:
  Toggle options to align the main heading and button as left, right, center, or normal.

• Button configuration options, including:

  • Button types: Primary, Secondary, Tertiary, Simple
  • Button sizes: Regular, Large, Small
  • Button text and button link

• Testimonial content management using an inner repeater, including:

  • Testimonial content text

  • Client section:

    • Client name
    • Client role or designation
    • Client image
    • Star rating reviews

• Client Info Position:
  Choose whether client details appear at the top or bottom of the testimonial card.

• Two Columns Per Row:
  Enable to display testimonials in a two-column layout per row. When disabled, testimonials appear in a single column.

• Testimonial Card Left Border:
  Toggle to enable a left border on testimonial cards. When enabled, the left border becomes fully editable.

• Background customization options, including background color and background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile

Layout-Based & Slider Styling Controls

• Star icon color customization
• Toggle option to enable or disable the testimonial slider

• When the slider is enabled:

  • Autoplay enable/disable option
  • Speed control displayed when autoplay is enabled

  • Responsive slider settings for desktop, tablet, and mobile, including:

    • Slides to show
    • Slides to scroll
    • Dots and arrows enable/disable options
  • Custom styling options for slider dots and navigation arrows

Testimonial Content Style

• Testimonial content alignment options: Left, Right, Center
• Adjustable testimonial content width
• Testimonial background color
• Testimonial box shadow color
• Client image size controls

• Quote styling options:

  • Quote color
  • Quote background color
  • Quote box shadow color

The Simple Form module allows visitors to subscribe to your newsletter and receive the latest updates. It provides flexible content, form visibility, and styling options to match your website design.

Features

• Custom Class and ID fields for advanced styling and targeting
• Title and content fields with an option to add custom content

• Toggle option to show or hide the subscribe form

  • When enabled, the following fields are available:

    • Subscribe form selection
    • Bottom text content
• Background customization options, including background color and background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile

Styling Options:

• Form styling options with Theme or Custom style selection:

  • Theme style – uses default theme styling
  • Custom style – enables advanced form customization

• When Custom style is selected:

  • Input Field Style

    • Border radius controls for input fields and buttons
    • Input border style, width, and color options

  • Button Style

    • Button text color
    • Button border style, width, and color
    • Button background color

    • Button hover styles, including:

      • Hover text color
      • Hover border style, width, and color
      • Hover background color
    • Option to show or hide the submit button in absolute position

  • Submitted Message Style

    • Background color customization

• Form width control:

  • Adjustable maximum width for the subscribe form

The FAQ (Frequently Asked Questions) module helps organize common questions and answers in a clear, expandable format. It improves user experience by allowing visitors to quickly find relevant information while keeping the page clean and structured.

Features

• Custom Class and ID fields for advanced styling and targeting
• Rich text field for adding a section heading

• FAQ management using a repeater, including:

  • Question (rich text)
  • Answer (rich text)
• Toggle option to enable FAQ view
  • When enabled, FAQs are displayed in an expandable accordion format
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image

• Maximum content width controls:

  • Toggle to show or hide max-width settings

  • When enabled, options include:

    • Custom max-width for the FAQ container
    • Adjustable left and right padding

FAQ Style Options

• FAQ list background customization:

  • Background color

• Border and radius settings:

  • Border style, width, and color
  • Active border style, width, and color
  • Border radius control

• Icon types and styling options:

  • Icon type selection, including:

    • Plus / Minus
    • Arrow Down / Arrow Up
    • Arrow Right / Arrow Down
    • Plus Circle / Minus Circle
    • Caret Down / Caret Up
  • Icon size control
  • Icon boldness adjustment
  • Icon color settings
  • Icon hover and active color options

  • Option to show or hide icon background

    • When enabled, background color and active color options are available

• Hover and active state styling:

  • Background color
  • Question text color

• Box shadow customization:

  • Box shadow enable/disable option

    • When enabled:

      • Shadow type (inset / outset)
      • Horizontal offset (X)
      • Vertical offset (Y)
      • Blur radius
      • Spread radius
      • Shadow color
• FAQ item spacing controls for desktop and mobile
• Two-column layout option:
  • Toggle to enable or disable two-column layout

  • When enabled:

    • Option to show FAQ items in the left column
    • Adjustable center column spacing

The Team Cards module allows you to showcase your team members in a clean and structured card layout. It is ideal for presenting profile images, names, roles, descriptions, and social media links in a visually consistent and professional format.

Features

• Custom Class and ID fields for advanced styling and targeting
• Rich text field for adding a main section heading

• Team card management using a repeater, including:

  • Profile image
  • Profile name
  • Description or role

  • Social icons repeater with:

    • Icon type selection (HubSpot icons or custom SVG icons)
    • Icon link configuration

Style Options

• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image

• Container Style

  • Container stylestrong> options, including page-centered and custom container layouts. When the custom container option is selected, fields for container width and left/right spacing become available.

Card-based styling controls include:

• Spacing controls for for desktop, tablet, and mobile
• Cards per row settings for desktop, tablet, and mobile
• Adjustable gap between cards
• Card background color customization
• Card border styling options, including style, width, and color

• Image Styling

  • Image border radius control
  • Object position options (top or center)
  • Adjustable image height and width

• Social Icon Styling

  • Social icon color
  • Social icon hover color
  • Social icon size
  • Social icon background color
  • Social icon hover background color
  • Social icon background size

• Content Alignment

  • Card content alignment options: left or center

The Team Cards module is designed to display team members in a structured and visually engaging layout, with flexible content, styling, and interaction options.

Features

• Custom Class and ID fields for enhanced styling and advanced targeting

• Section Heading Rich Text field for headings and introductory content

• Team Cards repeater for easy team member management

Team Card Content Options

• Each repeater item includes:

  • Team profile image
  • Team details Rich Text field
  • Description Rich Text field

• Social icons support with flexible input options:

  • Add icons using the HubSpot icon library
  • Upload and use custom image icons
  • Individual link option available for each social icon

Section Styling

• Maximum Content Width
  Controls section layout alignment and readability.

  • Show / Hide – Enable or disable custom width settings

  • Max-Width – Sets the maximum width of the content container

  • Padding Left / Right – Adjusts horizontal spacing inside the container

• Section background customization options:

  • Background color
  • Background image with overlay support

• Responsive section spacing controls for:

  • Desktop
  • Tablet
  • Mobile

Popup Settings

• Popup enable/disable toggle

• When enabled, the popup displays:

  • Team profile image
  • Team member name and title
  • Description content
  • Social icons

• Popup overlay customization options:

  • Overlay color selection
  • Adjustable overlay opacity

Card & Content Styling

• Social icon styling options:

  • Icon background color
  • Icon color
  • Icon border styling

• Text alignment controls for card content:

  • Left
  • Center
  • Right

Slider Options

• Slider enable/disable toggle

• When slider is enabled:

  • Navigation dots styling options
  • Arrow styling options

The Image With Content List module displays an image alongside a structured list of content. It is ideal for highlighting services, features, or key offerings in a flexible two-column layout with a clean, modern design.

Features

• Custom Class and ID fields for advanced styling and targeting
• Rich text fields for adding a main heading and description
• Content management using a repeater list for adding multiple content items.

• Button configuration options, including:

  • Button types (Primary, Secondary, Tertiary, Simple)
  • Button sizes (Regular, Small, Large)
  • Button text and link
  • Optional button icon using HubSpot icons or custom SVG icons
• Image upload support(option)

Style Options

• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image
• Custom container option with toggle to enable custom container width

• Flexible layout controls, including:

  • Left and right column width settings
  • Center spacing controls for desktop and mobile
  • Vertical column alignment (top, center, bottom)
• Content direction options (Image / Content or Content / Image)
• Button icon styling with adjustable icon size

• Image styling options, including:

  • Image border radius
  • Maximum image height

• Listing content styling options, including:

  • Repeater item circle border style, width, and color
  • Circle width
  • Circle border color
  • Circle background color

The Horizontal Tabbing module allows you to present content in an interactive tab-based layout. It is ideal for showcasing processes, workflows, features, or related content in a structured and user-friendly way, enabling visitors to switch between sections without page reloads.

Features

• Custom Class and ID fields for advanced styling and targeting
• Rich text fields for adding a main heading and description

• Tab content management using a repeater, including:

  • Tab name

  • Tab content fields:

    • Icon or image display with title
    • Media selection options: image, HubSpot icon, or custom SVG code
    • Description content for each tab

  • Content layout direction options:

    • Content / Image
    • Image / Content

Style Options

• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image

• Maximum content width controls:

  • Toggle option to enable or disable max-width settings
  • When enabled, options for: Custom max-width and Left and right padding adjustment

• Tab color customization options:

  • Default tab text color and background color
  • Active tab text color and background color

The Social Links module allows you to display social media icons that link to your social profiles or sharing URLs. It provides flexible icon and styling options, making it easy to match your brand design while encouraging users to connect or share content.

Features

• Social icon management using a repeater, with support for:

  • HubSpot icons
  • Image icons
  • Custom SVG code
  • Icon link configuration for each social icon

Style Options

• Module visibility toggle to show or hide the social sharing links

• Custom social icon color toggle:

  • When enabled, icon styling options are available, including:
    • Icon color
    • Icon background color
    • Hover: icon color and Hover background color

The Contact Form module helps you create a flexible and conversion-focused contact section by combining forms, images, headings, and contact detail in a single layout. With multiple styling and layout controls, this module adapts easily to different design needs across your website.

Features

• Custom Class and ID fields for advanced styling and targeting
• Image / Form display choice with an option to show image and form together based on the selected field
• Heading and description fields to introduce the contact section

• Contact information management using a repeater, supporting:

  • HubSpot Icons
  • Custom Image Icons
  • Heading text
  • Clickable links

Style Options

• Module visibility toggle to show or hide the module
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image

• When Form is selected, additional options are available:

  • Form background color control
  • Form title background with gradient and color options
• Flex direction row toggle to control layout orientation

• Icon style customization options, including:

  • Icon color
  • Icon background color
  • Hover : icon color and background

The Google Map module allows you to easily display a location map on your website by adding a Google Maps embed code. It is ideal for showing office locations, business addresses, or service areas in a simple and responsive layout.

Features

• Custom Class and ID fields for advanced styling and targeting
• Rich text field to add and manage the Google Maps embed code

Style Options

• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile

The Button module is used to create clickable button links that guide users to important pages or actions across your website.

Features

• Button settings to add button text and link

Style Options

• Text styling options using font controls
• Background color customization
• Border styling with style, width, and color options
• Corner radius control for rounded edges
• Spacing options for top, bottom, left, and right padding
• Alignment options to position the button left, center, or right

The Blog Banner module displays a simple banner for blog pages, allowing you to add a blog title and supporting description for clear context and visual consistency.

Features

• Custom Class and ID fields for advanced styling and targeting
• Title / Content with a rich text field to add a heading and description

Style Options

• Module visibility toggle to show or hide the module
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image

The Blog Listing Post module is designed to display blog posts in a structured and visually appealing card-based layout. It supports showcasing a featured latest post, recent or tag-based posts, and full blog listing pages with flexible display, content, and styling controls.

Features

• Custom Class and ID fields for advanced styling and targeting
• First Post Heading option using a rich text field to add a custom heading
• First full-width post show/hide toggle to highlight the latest blog post

• Blog content source selection with options for:

  • Tag-related posts
  • Recent blog posts
  • Blog listing page posts
• Blog listing heading using a rich text field
• Blog selection field to choose which blog’s posts are displayed

• Show/Hide toggle options for:

  • Author name
  • Publish date
  • Topics
  • Read More link (with custom Read More text field when enabled)

Style Options

• Module visibility toggle to show or hide the module
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image

• Card styling controls, including:

  • Cards per row and gap controls with separate settings for desktop, tablet, and mobile layouts
  • Card border radius
  • Card content alignment (left, center, right, justify)
  • Card border style, width, and color
  • Card background color
  • Image border radius
  • Card content inner padding for desktop and mobile
  • Box shadow toggle with controls for X offset, Y offset, blur radius, spread radius, and color

• Tag styling options, including:

  • Tag text color
  • Tag background color
  • Tag border color
  • Top-right border radius for tags

• Slider show/hide toggle with additional slider options when enabled:

  • Autoplay enable/disable with autoplay speed control
  • Dots and arrows toggle
  • Slides to show and slides to scroll settings for desktop, tablet, and mobile
  • Dot style and arrow style customization
• Heading style settings with options to control maximum width and bottom margin of the heading
• Number of posts setting using a number field to control how many blog posts are displayed in the listing

The Blog Subscribe Module is used to display a subscription section that encourages users to sign up for blog updates or newsletters. It combines a heading with a subscription form and provides styling options to match the design of your blog or website.

Features

• Custom Class and ID fields for advanced styling and targeting
• Heading and content management using a rich text field for adding the section title and description
• Form selection option to choose and display a HubSpot form

Style Options

• Background styling with gradient color support

• Custom form styling toggle to enable or disable advanced form styles

  • When custom styling is enabled, the following options are available:
    • Form title text color
    • Form title background gradient
    • Outer border radius
    • Form box shadow color
    • Form background color
    • Input field background color
    • Input field border radius

The Blog Tag Post module displays blog posts based on selected tags in a clean and consistent layout, allowing control over visible post details and card styling.

Features

• Custom Class and ID fields for advanced styling and targeting
• Heading management using a rich text field to add a custom title

• Post display controls with toggle options for:

  • Post summary
  • Author name
  • Publish date
  • Topics
  • Read More button show/hide, with custom button text
  • Post read time show/hide, with custom text
  • Number of posts to display

Style Options

• Module visibility toggle to show or hide the module
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Background customization options, including background color and background image

• Card styling controls, including:

  • Cards per row and gap controls with separate settings for desktop, tablet, and mobile layouts
  • Card border radius
  • Card content alignment (left, center, right, justify)
  • Card border style, width, and color
  • Card background color
  • Image border radius
  • Card content inner padding for desktop and mobile
  • Box shadow toggle with controls for X offset, Y offset, blur radius, spread radius, and color

• Tag styling options, including:

  • Tag text color
  • Tag background color
  • Tag border color
  • Top-right border radius for tags

• Slider show/hide toggle with additional slider options when enabled:

  • Autoplay enable/disable with autoplay speed control
  • Dots and arrows toggle
  • Slides to show and slides to scroll settings for desktop, tablet, and mobile
  • Dot style and arrow style customization
• Heading max-width option to set a custom maximum width for the heading area

The Logo With Link module allows you to display a logo with an associated link and short description.

Features

• Custom Class and ID fields for advanced styling and targeting
• Logo image with link option for making the logo clickable
• Rich text field for adding logo description or supporting content

Style Options

• Module visibility toggle to show or hide the module

The Navigation Menu module is used to display the primary header navigation of your website. It helps organize pages and sections into a clear, user-friendly menu with support for dropdown levels.

Features

• Menu selection field to create and choose the menu you want to display
• Max levels option to control the number of dropdown menu levels shown

The Pagination Blog module is used to navigate between multiple blog pages, making it easier for visitors to browse older and newer posts in an organized way.

Features

• Custom Class and ID fields for advanced styling and targeting
• Pagination text options to customize Previous and Next button labels

Style Options

• Spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Pagination style choice with Theme or Custom options
• When Custom is selected, additional styling options are available:
  • Background color
  • Text color

  • Active/ Hover

    • Background color
    • Color color

The Advanced Pricing Card module is designed to display flexible pricing plans with support for monthly and yearly pricing, customizable card styles, icon-based feature lists, and responsive layout controls. The module offers extensive styling and layout options for full design flexibility.

Features

• Custom Class & ID
  Add custom CSS class and ID for advanced styling and targeting.

• Main Heading
  Rich Text field for the main section heading.

• Pricing Plan Toggle

  • Toggle/Boolean option to switch between Monthly and Yearly pricing plans.

Pricing Cards Repeater

• Repeater to add multiple pricing cards.

Pricing Tag Settings

• Text field for pricing tag label.

• Background color option.

• Text color option.

• Border radius (Number field).

Pricing Group Settings

• Tag selection option for price text:

  • H1–H6

  • Paragraph (p)

• Monthly price (Text field).

• Yearly price (Text field).

Title & Description

• Title tag selection:

  • H1–H6

  • Paragraph (p)

• Title text (Text field).

• Description text (Text field).

Icon Text Repeater

• Repeater to add multiple feature points.

• Text field for each feature item.

• HubSpot icon field available for each icon item.

Button Options

• Support for:

  • Theme buttons

  • Custom buttons

Card-Level Style Options

Each pricing card includes individual style controls:

• Card background color.

• Card border color.

• Heading color.

• Content text color.

• Content bottom border color.

Styling Options

• Responsive section spacing controls for:

  • Desktop

  • Tablet

  • Mobile

• Background options:

  • Background image with overlay

  • Background color

Container Settings

• Toggle/Boolean option to set maximum content width.

• Max-width (Number field).

• Left and right padding controls.

Card Styling

• Card inner spacing controls for:

  • Desktop

  • Tablet

  • Mobile

• Card hover box shadow color.

• Card border radius (Number field).

The Social Links module allows you to display social media icons that link to your social profiles or sharing URLs. It provides flexible icon and styling options, making it easy to match your brand design while encouraging users to connect or share content.

Features

• Social icon management using a repeater, with support for:

  • HubSpot icons
  • Image icons
  • Custom SVG code
  • Icon link configuration for each social icon

Style Options

• Module visibility toggle to show or hide the social sharing links

• Custom social icon color toggle:

  • When enabled, icon styling options are available, including:
    • Icon color
    • Icon background color
    • Hover: icon color and Hover background color

The Custom Buttons module allows you to add multiple buttons with flexible styles and links, making it easy to create call-to-action groups across your pages.

Features

• Buttons repeater to add multiple buttons
• Button text and custom button class support
• Button style selection: Primary, Secondary, Tertiary, Simple, and Custom
• Button link configuration

• Button icon toggle to enable or disable icons

  • Icon type selection: SVG or Font Awesome (HubSpot Icon)
  • Icon position control with left or right alignment

Style Options

• Spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Alignment options to position the button left, center, or right

The Footer Menu module is used to display navigation links in the website footer, helping visitors quickly access important pages and resources.

Features

• Menu type selection with options for Simple Menu or Default Menu
• Menu fields are displayed dynamically based on the selected menu type

The Icon & Text Grid module is used to display key information with icons and text in a clean, grid-based layout. It is ideal for showing footer contact details such as phone numbers, email addresses, locations, or other quick info blocks in a visually consistent way.

Features

• Custom Class and ID fields for advanced styling and targeting

• Repeater-based items to manage multiple entries, including:

  • Link field for clickable items
  • Icon or image choice (Image, HubSpot Icon, or custom SVG code). Based on the selected option, the relevant fields are displayed
  • Content text field for labels

Style Options

• Background customization options, including background color and background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Icon Text Grid Alignment control for items (start, center, end)
• Icon Text Grid Per row settings for desktop, tablet, and mobile
• Icon Text Grid Gap control between for desktop, tablet, and mobile

• Icon styling options, including:

  • Icon background size
  • Icon background color
  • Icon size
  • SVG icon color
  • Icon and text flex direction (column layout) enable/disable toggle

The Scroll To Div module is designed for documentation pages to help users quickly navigate between different sections on the same page. It improves usability by organizing content into categories and allowing smooth scrolling to related sections, with support for images and videos.

Features

• Category label text field to display section headings or navigation labels

• Resources management using a repeater with the following fields:

  • Navigation text
  • Category assignment for grouping related items
  • Description field for supporting content

  • Media type choice (Image or Video)

    • When Image is selected, image field and an option to enable/disable 100% image width are shown
    • When Video is selected, video options are available, including embed URL or embed code

Notes : Automatic slider behavior when more than one image/video is added to a resource item

Style Option

• Module visibility toggle to show or hide Scroll To Div

The About Impact module highlights key achievements, progress, and important information using headings, lists, progress bars, images, and buttons in a flexible two-column layout.

Features

• Custom Class and ID fields for advanced styling and targeting
• Heading & Description: Rich text field for adding the main heading and supporting description
• Ordered List: Content managed using a repeater, including:
  • Icon or Image choice (HubSpot Icon or Image, based on selection)
  • Rich text field for list content
  • Icon color control
• Progress Bar: Managed using a repeater with:
  • Progress percentage value (0–100)
  • Progress bar background color
  • Progress bar label (rich text)
• Button Options: Includes:
  • Button type (Primary, Secondary, Tertiary, Simple, Custom)
  • Button size (Regular, Large, Small)
  • Button text and link
  • Button icon show/hide toggle
  • Icon choice (SVG icon or HubSpot icon, shown based on selection)
• Left Column Image: Image field for adding a supporting visual

Style Options

• Module visibility toggle to show or hide the module
• Background customization options including:
  • Background color
  • Background gradient
  • Background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Column Direction: Image / Content or Content / Image layout choice
• Column Alignment: Flex alignment options (Start, Center, End)
• Container Settings: Page Center or Custom Container option
  • Custom container width
  • Left and right spacing controls
• Image Border Radius: Control for adjusting image corner rounding
• Two-Column Layout Toggle: When enabled, the Ordered List and Progress Bar are displayed side by side

The Feature Overview Cards module is used to present key features or offerings in a structured card-based layout. It supports flexible layouts, rich content, icons or images, and optional buttons, making it ideal for highlighting services, product features, or core benefits.

Features

• Custom Class and ID fields for advanced styling and targeting
• Layout Choice:
  • Card Box Layout
  • Inline Card Layout
• Heading & Description: Rich text field for adding the main heading and supporting description
• Section Button Options:
  • Button type (Primary, Secondary, Tertiary, Simple, Custom)
  • Button size (Regular, Large, Small)
  • Button text and link
  • Button icon show/hide toggle
  • Icon choice (SVG icon or HubSpot icon, shown based on selection)
• Cards Content: Managed using a repeater, with each card supporting:
  • Icon format choice (HubSpot Icon, SVG code, or Image)
  • Relevant icon fields displayed based on the selected format
  • Rich text field for card title and description
  • Button options including:
    • Button type (Primary, Secondary, Tertiary, Simple, Custom)
    • Button size (Regular, Large, Small)
    • Button text and link

Style Options

• Background customization options including:
  • Background color
  • Background gradient
  • Background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile
• Column Settings:
  • Left and right column width controls
  • Gap between columns
  • Column direction change toggle
  • Even items vertical transform toggle
• Card Style:
  • Card background color
  • Icon size and SVG color controls
  • Background circle size and color with show/hide toggle
  • Card justify-content options (Flex Start, Space Between, Center, Space Around, Flex End)
  • Border, corner radius, and box shadow controls
• Box column and row spacing controls for desktop, tablet, and mobile
• Card inner (column inside) spacing controls for desktop, tablet, and mobile
• Card outer (row outside) spacing controls for desktop, tablet, and mobile
• Alignment & Direction:
  • Icon and content center alignment toggle
  • Icon direction options (Top Left, Top Right, Center, None)

The Call To Action module is designed to highlight key messages with flexible content, buttons, and icon support. It provides extensive styling controls, visibility options, and responsive settings to match various design requirements.

Module Features

• Custom Class & ID
  Add custom CSS class and ID for advanced styling and targeting.

• Box Content

  • Rich Text field for main CTA content.

• Button Options

  • Support for:

    • Theme buttons

    • Custom buttons

  • Custom button style options:

    • Background color

    • Text color

    • Border color

    • Hover State Styling:

      • Button hover background color

      • Button hover text color

      • Button hover border color

• Icon support:

  • HubSpot icons

  • SVG icons

• Icon color customization:

  • Default icon color

  • Icon hover color

• Bottom Text

  • Rich Text field for additional supporting content below the button.

Styling Options

Module Visibility

• Toggle/Boolean option to show or hide the module.

Section Styling

• Responsive section spacing controls for:

  • Desktop

  • Tablet

  • Mobile

• Background options:

  • Background image with overlay

  • Background color / gradient field

• Section border radius option.

Layout & Alignment

• Page-center class:

  • Show/Hide toggle option.

Box Style Settings

• Box background options:

  • Background color

  • Background image with overlay

• Box border:

  • Show/Hide toggle option.

• Box shadow:

  • Show/Hide toggle option

  • When enabled:

    • Box shadow color

    • Shadow opacity control

• Box spacing:

  • Show/Hide toggle option

  • When enabled, spacing controls for:

    • Desktop

    • Tablet

    • Mobile

• Border radius:

  • Show/Hide toggle option

  • When enabled, Number field to control box border radius.

• Custom content width:

  • Show/Hide toggle option

  • When enabled, content width control via Number field.

Button Styling

• Button alignment option.

• Button top margin control.

Section Border Radius:

• Option to apply and control border radius for the entire section.

The Tab Cards module allows you to display content cards filtered by tab menu tags. Each card can have multiple tags, and the cards shown will correspond to the selected tab(s). Cards can include images, profile names, descriptions, and buttons, offering a flexible way to organize and present content.

Features

• Custom Class & ID: Add custom CSS class and ID for advanced styling and targeting.

• Heading: Rich Text field for the main section heading.

• Cards Repeater:

  • Category Text: Enter multiple categories using a text field repeater
  • Add image
  • Profile name (Rich Text field)
  • Description (Rich Text field)
  • Button link

Style Fields

Section Styling:

• Background options: background image with overlay, background color/gradient field
• Section spacing controls for Desktop, Tablet, and Mobile

Container Settings:

• Choice between Page Center or Custom Container
• If Custom Container is selected: set container max width and left/right padding

Tab Menu Styling:

• Tab text color, background color, border
• Active tab style: tab text color, background color, border
• Tab menu alignment: Center, Left, Right

Cards Styling:

• Cards per row for Desktop, Tablet, and Mobile
• Gap between cards
• Content background color & opacity
• Content text color
• Card border and box shadow (toggle to enable/disable; shadow settings adjustable)
• Card image styling: background position (top/center), minimum height
• Card content alignment: Center or Left

The Blog Popular Post module allows you to showcase selected blog posts in a visually appealing and highly customizable layout. It enables highlighting featured posts, displaying recent and popular posts, and giving full control over content, layout, and styling, making your blog section more engaging and organized.

Features:

• Custom Class & ID: Assign custom CSS classes and IDs to the module for advanced styling or scripting.
• Main Heading: Rich text field for the main heading of the section.
• Blog Selection: Option to select a specific blog or display posts automatically.
• Show Recent Posts: Toggle to display the most recent blog posts.
• First Post Custom Content: Enable to add a custom layout for the first post including featured image, tag text, content excerpt, and a button.
• First Recent Post Tag Selection: Choose a tag to filter the first recent post display.
• Left Column Heading: Rich text field for the left column heading.
• Show Popular Posts: Toggle to display the most popular posts.
• Right Column Heading: Rich text field for the right column heading.
• View All Posts Button: Button linking to the blog listing page.

Style Fields:

• Section Spacing: Customize spacing for desktop, tablet, and mobile devices.
• Section Background Choice: Options include background image with overlay, background color, or gradient.
• Most Popular Tag Style: Set background color and text color.
• Recent Featured Post Tag Style: Set background color and text color.
• Image Style: Set image height as a percentage and define border radius using the number field.
• Show Post Tags: Toggle to display post tags.
• Show Published Date: Toggle to display the publication date of posts.
• Show Author Name: Toggle to display the author’s name.
• Show Post Title: Toggle to display the post title.
• Main Heading Style: Set maximum heading width and bottom margin for the heading.

The Our Team Cards module allows you to showcase your team members in a visually appealing and fully customizable layout. You can add multiple team member profiles with images, names, descriptions, and social icons. The module also provides extensive styling options for section layout, cards, images, and social icons, ensuring consistency with your website design.

Features:

• Custom Class & ID: Assign custom CSS classes and IDs for advanced styling or scripting purposes.
• Main Heading: Rich text field for the main heading of the section.
• Team Cards Repeater: Add multiple team member profiles with the following fields:
  • Profile Image: Upload a team member’s photo.
  • Profile Name: Rich text field for the name of the team member.
  • Description: Rich text field to provide a short bio or description.
  • Social Icons Repeater: Add multiple social icons with options:
    • Icon Choice: HubSpot icon or SVG icon.

Section Style:

• Section Spacing: Customize spacing for desktop, tablet, and mobile devices.
• Section Background Choice: Options include background image with overlay or background color/gradient.

Cards Style:

• Inside Spacing: Adjust card padding for desktop, tablet, and mobile.
• Cards Per Row: Choose the number of cards per row for each device type.
• Card Gap: Adjust spacing between cards.
• Background Color: Set card background color.
• Card Border & Border Radius: Customize border style and corner radius.
• Box Shadow: Show/hide toggle; if enabled, adjust the card shadow.
• Card Image Style:
  • Image Radius: Customize corner radius of the image.
  • Object Position: Center or top alignment.
  • Object Fit: Cover or contain.
  • Image Height: Set height in percentage or pixels.

Social Icons Style:

• Icon Color & Hover Color: Customize the default and hover colors.
• Icon Size: Adjust size of the icons.
• Background Color & Hover Background: Set background colors for icons.
• Background Size: Adjust the size of icon backgrounds.
• Border Radius: Set corner radius for social icon backgrounds.

Container Style:

• Container Choice: Page centered or custom container.
• Custom Container Settings: Maximum width and left/right padding.

This module allows you to create flexible content sections with icons, rich text, and an optional image or video. You can choose between multiple layouts, control alignment and width across different screen sizes, and fully customize the visual styling of sections, containers, media, and icon content.

Features:

• Custom Class & ID:
  Assign custom CSS classes and IDs for advanced styling or scripting.

• Layout Choice:
  Select between content with image/video or single content layout.

• Heading & Content:
  Rich text field to add headings and descriptive content.

• Icon Content Repeater:
  Add multiple icon-content items with the following options:

  • Icon choice: SVG code, image, or HubSpot icon

  • Content: Rich text field for each icon item

• Image / Video Choice:
  Choose between displaying an image or a video.

  • When Video is selected, a toggle option is available to enable popup video.

  • Video source options include video file upload, HubSpot video, or embed code.

  • Video thumbnail image can be added for preview display.

• Button:
  Add a configurable button with link and label options.

• Wrapper Settings:

  • Maximum width settings for large, medium, and small screens

  • Block alignment (left, center, right) for each screen size

  • Text alignment (left, center, right) for each screen size

Section Style

• Section Spacing:
  Control spacing for desktop, tablet, and mobile devices.

• Section Background Choice:
  Options include background image with overlay or background color/gradient.

Container Settings

• Container Type:
  Page centered, full width, or custom container.

• Custom Container Options:
  Adjust maximum width and enable a boolean option to fix the container or section to the left or right.

Image / Video Style

• Right Image / Video Settings:

  • Set maximum width of the image or video

  • Choose media alignment: left, center, or right

  • Video Play Icon Style:
    Customize play icon background color, border color, and icon color.

• Image Box Shadow:
  Enable or disable box shadow and adjust its values.

• Image / Video Border Radius:
  Customize corner radius of the media element.

Two Column Settings

• Column Width Control:
  Number fields to adjust left and right column widths.

• Flex Direction:
  Boolean options to enable row-reverse for desktop and mobile.

• Column Gap:
  Adjust spacing between the two columns.

Icon Content Repeater Style

• Icon Size:
  Adjust the size of the icons.

• Icon Color:
  Set the icon color.

• Icon Background Size:
  Control the size of the icon background.

• Icon Background Color:
  Customize the background color of icons.

• Border Radius:
  Set corner radius for the icon background.

This module is designed to showcase a step-by-step process using tab-based cards along with an optional popup video. It helps present workflows, service steps, or methodologies in a structured and visually engaging way, with full control over content, buttons, media, and styling.

Features

• Custom Class & ID:
  Add custom CSS classes and IDs for advanced styling or JavaScript usage.

• Heading & Description:
  Rich text field to add the main section heading and descriptive content.

• Tabs Repeater:
  Each tab card includes the following options:

  • Tab heading and description using rich text fields

  • Media choice: image or video

• Button Options:
  Flexible button settings for each tab:

  • Button types: Primary, Secondary, Simple, and Quaternary

  • Button size options: Regular, Medium, Large

  • Button icon toggle with support for HubSpot icons and SVG code

• Popup Video Toggle:
  Enable popup video functionality using a toggle option.

  • Popup video sources: video file upload, HubSpot video, or embed code

  • Popup video opens on button click when enabled

Section Style

• Section Background Choice:
  Choose between background image with overlay or background color/gradient.

• Section Spacing:
  Control top and bottom spacing for desktop, tablet, and mobile devices.

Tabs Style

• Content Style:
  Customize both default and active tab states.

  • Default tab content opacity

  • Heading color and description color

  • Content background color with opacity control

  • Border color with opacity control

  • Active tab heading color and description color

  • Active tab background color with opacity control

• Step Number Style:
  Control background color and text color of step numbers.

• Border Line Color:
  Set the color of the vertical or connecting border line between steps.

• Image Border Radius:
  Adjust corner radius for tab images or video thumbnails.

The Resource Listing Post module is used to display blog posts in a flexible, card-based layout. It supports multiple listing types such as recent posts, tag-based posts, and blog listing pages, along with advanced styling, slider, and layout controls.

Module Features

Custom Fields

• Custom Class
  Add a custom CSS class for advanced styling.

• Custom ID
  Add a unique ID for section-level targeting.

Post Source & Content Settings

• Post Display Type
  Choose how posts should be displayed:

  • Tag-Based Related Posts
  • Recent Blog Posts
  • Blog Listing Page Posts

• Blog Listing Heading
  Rich text field to add the section heading.

• Select Blog
  Choose the blog from which posts will be fetched.

• Number of Posts to Show
  Number field to control how many posts are displayed.

Content Visibility Toggles

• Show Author Name
• Show Publish Date
• Show Topics
• Show Read More Button

• Read More Text
  Text field to customize the “Read More” button label.

Style Settings

Module Visibility

• Module Visibility Toggle
  Show or hide the module without removing it.

Background Options

• Background Image with Overlay
• Background Gradient

Section Spacing

Control spacing for different screen sizes:

• Desktop
• Tablet
• Mobile

Card Style Settings

Layout Controls

• Cards Per Row

  • Desktop
  • Tablet
  • Mobile (Controls how many cards appear per row and the gap between cards.)

Card Appearance

• Card Padding – Desktop & Mobile
• Card Border Radius
• Card Border
• Card Background Color
• Card Content Alignment

Image Styling

• Image Border Radius

Content Spacing

• Card Content Inside Padding – Desktop & Mobile

Box Shadow

• Box Shadow Enable Toggle
  When enabled, box shadow settings become adjustable.

Tag Style Settings

Customize blog tag appearance:

• Tag Text Color
• Tag Background Color
• Tag Border Color
• Tag Border Top Right Radius

Slider Settings

Slider Toggle

• Enable / Disable Slider

When the slider is enabled, the following options become available:

Autoplay Settings

• Slider Autoplay Toggle
• Autoplay Speed Control

Responsive Slider Controls

Configure separately for:

• Desktop
• Tablet
• Mobile
• Slides To Show
• Slides To Scroll

Slider Navigation Style

• Dots Style
  • Default Color
  • Active Color
• Arrow Style
  • Arrow Color
  • Arrow Background
  • Arrow Alignment

Container Settings

Container Type

• Full Width
• Page Center
• Custom Container

If Custom Container is selected:

• Max Container Width can be adjusted.

Heading Style

• Heading Max Width
• Heading Bottom Margin

Use Cases

This module is ideal for:

• Blog listing pages
• Resource and article sections
• Tag-based blog layouts
• Slider-based featured blog sections

The Sidebar Post Global is a global module designed to display blog-related content in the sidebar area. This module allows you to showcase Recent Posts, Topics, and Popular Posts using a tab-based interface with full control over content, headings, buttons, and styling.

As this is a global module, any updates made to it will be reflected automatically wherever the module is used across the website.

Module Features

Custom Fields

• Custom Class
  Add a custom CSS class for advanced styling.

• Custom ID
  Add a unique ID for section-level targeting.

Tab Text Settings

• Recent Tab Text – Text field
• Topics Tab Text – Text field
• Popular Tab Text – Text field

Content Visibility Toggles

• Show Recent Posts – Toggle to display recent posts
• Show Topics – Toggle to display blog topics
• Show Popular Posts – Toggle to display popular posts

Button Settings

• Button Style
  Choose button type:

  • Primary
  • Secondary
  • Tertiary
  • Simple

• Button Size
  Select button size:

  • Small
  • Regular
  • Large

Heading Settings

• Recent Posts Heading

  • Heading Tag Choice (H1–H6, P)
  • Heading Text Field

• Topics Heading

  • Heading Tag Choice (H1–H6, P)
  • Heading Text Field

• Popular Posts Heading

  • Heading Tag Choice (H1–H6, P)
  • Heading Text Field

Style Settings

Section Spacing

Control spacing separately for:

• Desktop
• Tablet
• Mobile

Tab Box Style

• Tab Box Spacing
  Adjustable spacing for desktop, tablet, and mobile.

• Background Color

• Box Shadow Toggle
  Enable or disable box shadow. When enabled, shadow settings become editable.

• Title Style

  • Title Background Color
  • Title Border Radius
  • Title Border
  • Title Hover Background Color
  • Title Hover Border

Tab Menu Box Style

• Tab Menu Box Border Radius
• Tab Menu Box Background Color

• Box Shadow Toggle
  Enable or disable box shadow. When enabled, shadow settings can be customized.

Use Cases

This global sidebar module is ideal for:

• Blog sidebar layouts
• Resource and article pages
• Displaying recent, popular, and topic-based posts
• Maintaining consistent sidebar content across multiple pages

The Email Subscription module allows visitors to subscribe to your newsletter and receive the latest updates. It provides flexible content, form visibility, and styling options to match your website design.

This is a Global Module, so any changes made to this module will automatically reflect across all pages where it is used.

Features

• Custom Class and ID fields for advanced styling and targeting
• Title and content fields with an option to add custom content

• Toggle option to show or hide the subscribe form

  • When enabled, the following fields are available:

    • Subscribe form selection
    • Bottom text content
• Background customization options, including background color and background image
• Section spacing controls for top, bottom, left, and right padding on desktop, tablet, and mobile

Styling Options:

• Form styling options with Theme or Custom style selection:

  • Theme style – uses default theme styling
  • Custom style – enables advanced form customization

• When Custom style is selected:

  • Input Field Style

    • Border radius controls for input fields and buttons
    • Input border style, width, and color options

  • Button Style

    • Button text color
    • Button border style, width, and color
    • Button background color

    • Button hover styles, including:

      • Hover text color
      • Hover border style, width, and color
      • Hover background color
    • Option to show or hide the submit button in absolute position

  • Submitted Message Style

    • Background color customization

• Form width control:

  • Adjustable maximum width for the subscribe form