Start now
Stock placeholder image

Documentation

Here you can find all the information about Buddy, your next HubSpot theme.

Our modules

The following list contains all the available modules and their fields. Please note that you can use any of the native HubSpot modules in addition to the Buddy modules.

CTA Banner

This module contains the following fields:

  • CTA Banner text (Text): The main section text that will display on the page
  • Text color (Choice): The color for the text based on the theme settings
  • Text alignment (Choice): The text alignment - Left, Right or Center
  • CTA (CTA): A repeater in order to display one CTA or more
  • Show background images (Boolean): An option to display background images
  • Background image left (Image) - Only shows if 'Show background images' is set to 'true': A field to choose the background image you want to display on the left
  • Background image right (Image) - Only shows if 'Show background images' is set to 'true': A field to choose the background image you want to display on the right

Custom Background Element

This module contains the following fields:

  • Image (Field group): Find all the informations about your background image
    • Image (Image): The main image you want to display as a background element
    • Background repeat (Boolean): Select whether you want your background to be repeated on all section or not
    • Background size (Choice): Choose if you want your background to be 'Cover', 'Contain' or 'Custom'
    • Custom background size (Number) - Only shows if you set the 'Background size' to 'Custom': Choose the background percentage number
    • Background position (Choice): Choose the background position
    • Container width (Number): Choose the container width
    • Container height (Number): Choose the container height
    • Container width unit (Choice): Choose the container width unit between 'Pixels', 'Percentage' 'Rem' or 'Viewport width'
    • Container height unit (Choice): Choose the container height unit between 'Pixels', 'Percentage', 'Rem' or 'Viewport width'
    • Container position (Choice): Choose the container position between 'Left', 'Right' or 'Center'
  • Add element before image (Boolean): Check this option if you want to display another element on your background image
  • Element before image (Field group) - Only shows if 'Add element before image' is set to 'true': Find all the informations about the element to put before your background image
    • Image (Image): The image you want to display before your background element
    • Background repeat (Boolean): Select whether you want your image to be repeated on all section or not
    • Background size (Choice): Choose if you want your image to be 'Cover', 'Contain' or 'Custom'
    • Custom background size (Number) - Only shows if you set the 'Background size' to 'Custom': Choose the background percentage number
    • Background position (Choice): Choose the background position
    • Container width (Number): Choose the container width
    • Container height (Number): Choose the container height
    • Container width unit (Choice): Choose the container width unit between 'Pixels', 'Percentage' 'Rem' or 'Viewport width'
    • Container height unit (Choice): Choose the container height unit between 'Pixels', 'Percentage', 'Rem' or 'Viewport width'
    • Container top position (Number): Choose the container top position (in percentages)
    • Container left position (Number): Choose the container left position (in percentages)
  • Add background before image (Boolean): Check this option if you want to display a background color block behind your image
  • Background before (Field group) - Only shows if 'Add background before image' is set to 'true': Find all the informations about the background to put behind your image
    • Background before color (Color): Select the background color
    • Background before width (Number): Select the width of your background block (in percentages)
    • Background before height (Number): Select the height of your background block (in percentages)
    • Background before top position (Number): Set the top position of your background block (in percentages)
    • Background before left position (Number): Set the left position of your background block (in percentages)

Custom Image

This module contains the following fields:

  • Image (Image): The main image you want to display
  • Image position style (Image): The main image you want to display
  • Top position (Number): Set the image top position (in percentages)
  • Left position (Number): Set the image left position (in percentages)
  • Width (Number): Choose the image width
  • Height (Number): Choose the image height
  • Image size unit (Choice): Choose the image width unit between 'Pixels', 'Percentage' 'Rem' or 'Viewport width'
  • Add image background shape (Boolean): Select whether you want to display a background shape or not
  • Background shape color (Color) - Only shows if 'Add image background shape ' is set to 'true': Select the background shape color
  • Background shape top position (Number) - Only shows if 'Add image background shape ' is set to 'true': Set the background shape top position (in percentages)
  • Background shape left position (Number) - Only shows if 'Add image background shape ' is set to 'true': Set the background shape left position (in percentages)
  • Background shape width (Number) - Only shows if 'Add image background shape ' is set to 'true': Choose the Background shape width
  • Background shape height (Number) - Only shows if 'Add image background shape ' is set to 'true': Choose the Background shape height
  • Background shape size unit (Choice) - Only shows if 'Add image background shape ' is set to 'true': Choose the image width unit between 'Pixels', 'Percentage' 'Rem' or 'Viewport width'
  • Background shape orientation (Choice) - Only shows if 'Add image background shape ' is set to 'true': Choose the background shape orientation between 'Left', or 'Right'

Infinite carousel

This module contains the following fields:

  • Logo (Image): A repeater to show one image or more
  • Lower speed (Boolean): An option to make the carousel go slower (usefull when using two carousels or more)

Key number

This module contains the following fields:

  • Text alignment (Choice): Choose the text alignment between 'Left', 'Right' or 'Center'
  • Number (Number): Choose the number you want to display
  • Number sign (%,€, ...) (Text): Choose the number sign you want to display
  • Number text (Rich text): Write the number text you want to show below the key number
  • Number sign alignment (Choice): Choose the number sign alignment between 'Sup', 'Sub' or 'Normal'

Logos carousel

This module contains the following fields:

  • Logo (Image): A repeater to show one image or more

Map

This module contains the following fields:

  • Google map Iframe URL (URL): Write the URL from your google map iframe in order to display the map

Menu section

This module contains the following fields:

  • Primary menu field (Menu): Choose the menu you want to display

Multiple CTAs

This module contains the following fields:

  • Logo (Image): A repeater to show one CTA or more

Pricing details

This module contains the following fields:

  • Pricing table details (Rich text): Write the main text that displays above the table
  • Close icon background (Choice): Choose the close icon background color base on the theme settings
  • Rows (Field group): A repeater used to display one row or more
    • Row name (Rich text): Write the row name in order to display on the page
    • Value (Field group): A repeater used to display one value or more
      • Icon or text (Choice): Choose between showing an icon or text
      • Icon (Choice): Choose between 'Check', which mean it does feature this row or 'Cross', which mean it doesn't feature this row
      • Value Text (Rich text): Write the row text in order to display in the table

Pricing offer

This module contains the following fields:

  • Offer title (Rich text): Write the offer title in order to display on the page
  • Pricing description (Rich text): Write the pricing description in order to display on the page
  • Show price (Boolean): Set this option to 'true' if you want to show the price of the feature
  • Price (Number) - Only shows if 'Show price' is set to 'true': Select the price you want to show
  • Price sign (Text) - Only shows if 'Show price' is set to 'true': Write the price sign you want to display
  • Price sign alignment (Choice) - Only shows if 'Show price' is set to 'true': Choose the number sign alignment between 'Sup', 'Sub' or 'Normal'
  • Details & Description (Rich text): Write the details you want to show below the title
  • Show detail link (Boolean): Set this option to 'true' if you want to show the pricing details on a link (use this option only if using the 'Pricing details' module)
  • Pricing link text (Text) - Only shows if 'Show detail link' is set to 'true': Write the text you want to display in the button

Question

This module contains the following fields:

  • Question (Rich text): Write the text you want to display in the question part of the module (visible by default)
  • Answer (Rich text): Write the text you want to display in the answer part of the module (visible on click)
  • White text for background sections (Boolean): Set this option to true if you want the text to be white (useful for dark background sections)

Resources carousel

This module contains the following fields:

  • Show dots (Boolean): Set this option to 'true' if you want to display dots below the carousel
  • Show arrows (Boolean): Set this option to 'true' if you want to display arrow on the left and right of the carousel
  • Resource (Field group): A repeater to display one resource or more
    • Resource Image (Image): Choose the resource image to display
    • Resource text (Rich text): Write the resource text you want to display
    • Resource link text (Text): Write the text you want to display in the resource button
    • Resource link (Link): Select or write the link you want to put in the button

Search results

This module contains the following fields:

  • Languages (Field group): As this module is used on system pages, this repeater is used for setting fields on multiple languages
    • Language prefix (Choice): Choose the language you want to edit
    • Display featured images (Boolean): Set this option to 'true' if you want to display results featured images
    • No results sentence (Text): Write the sentence that will show if there's no results on the page
    • Try again sentence (Text): Write the sentence that will show to tell the user to retry if there's no results on the page

Social follow

This module contains the following fields:

  • Social link (Field group): A repeater in order to display one Social account or more
    • Social account (Choice): Choose the social account you want to display between 'Facebook', 'Twitter', 'Linkedin' and 'Instagram'
    • Link (URL): Write the URL you want to put in the social icon

Team member

This module contains the following fields:

  • Text alignment (Choice): Choose the text alignment between 'Left', 'Right' or 'Center'
  • Icons background (Choice): The icons background color based on the theme settings
  • Icons color (Choice): The icons color based on the theme settings
  • Member job title color (Choice) : The member job title color based on the theme settings
  • Member Image (Image): Choose the member image to display on the page
  • First name (Text): Write the member first name to display on the page
  • Last name (Text): Write the member last name to display on the page
  • Member job title: Write the member job title to display on the page
  • Bio (Rich text): Write the member biography to display on the page
  • Show socials (Boolean): Set this option to 'true' if you want to display member socials
  • Member Socials (Field group): Set the member socials URLs in this section
    • Facebook URL (URL): Set the member Facebook URL
    • Twitter URL (URL): Set the member Twitter URL
    • Linkedin URL (URL): Set the member Linkedin URL

Testimonials carousel

This module contains the following fields:

  • Carousel style (Choice): Choose between the two styles designed in this theme
  • Author job title color (Choice): The author job title color based on the theme settings
  • Review (Field group): A repeater to display one review or more
    • Stars rating (Number): Choose the stars rating number to display
    • Review text (Rich text): Write the review text to display
    • Review Author Image (Image): Select the author image to display
    • Review Author First name (Text): Write the author first name to display
    • Review Author Last name (Text): Write the author last name to display
    • Review Author Job role (Text): Write the author job role to display

Text and picto

This module contains the following fields:

  • Icons or Image (Choice): Choose if you want to display an icon or a custom image
  • Icon (Icon): Choose the icon you want to display (in the HubSpot icons library)
  • Picto Image (Image): Choose the custom image you want to display
  • Icon color (Choice): The icon color based on the theme settings
  • Text alignment (Choice): Choose the text alignment between 'Left', 'Right' or 'Center'
  • Feature text (Rich text): Write the feature text you want to display

Timeline step

This module contains the following fields:

  • Number (Number): Choose the number you want to display
  • Number Color (Choice): The number color based on the theme settings
  • Number background (Choice): The number background color based on the theme settings
  • Number style (Choice): Choose the number style between 'Circle', 'Square' or 'Round'
  • Number vertical alignment (Choice): Choose the number vertical alignment between 'Top' or 'Bottom'
  • Feature text (Rich text): Write the feature text you want to display
  • Text alignment (Choice): Choose the text alignment between 'Left', 'Right' or 'Center'

Video

This module contains the following fields:

  • Video type (Choice): Choose what kind of video you want to display between 'YouTube' or 'HubSpot'
  • Youtube video (Field group) - Only shows if 'Video type' is set to 'YouTube': Find all informations to fill for the YouTube video
    • Youtube Video ID (Text): Write the YouTube Video ID (can be found in the Youtube iframe video URL , after '/embed/')
    • Video Width (Number): Choose the YouTube video width (in pixels)
    • Video Height (Number): Choose the YouTube video height (in pixels)
    • Automatic play (Boolean): Set this option to 'true' if you want the video to start automatically
    • Show controls (Boolean): Set this option to 'true' if you want to display controls
    • Muted video (Boolean): Set this option to 'true' if you want the video to be muted
  • HubSpot video (Field group) - Only shows if 'Video type' is set to 'HubSpot': Find all informations to fill for the HubSpot video
    • Video File (File): Choose the HubSpot video file
    • Video Width (Number): Choose the HubSpot video width (in pixels)
    • Automatic play (Boolean): Set this option to 'true' if you want the video to start automatically
    • Show controls (Boolean): Set this option to 'true' if you want to display controls
    • Muted video (Boolean): Set this option to 'true' if you want the video to be muted
    • Video Poster (Image): Choose an image to display during the loading of the video
    • Video ID (Text): Write an unique ID (important if you want multiple videos on the same page)

Word cloud

This module contains the following fields:

  • Text alignment (Choice): Choose the text alignment between 'Left', 'Right' or 'Center'
  • Tags (Field group): A repeater to display one tag or more
    • Button Text (Text): The text you want to display in the button
    • Show link (Boolean): Set this option to 'true' if you want to put a link in the button
    • Button Link (Link) - Only shows if 'Show link' is set to 'true': Select or write the Button link

Our templates

You will find in the list above every templates and how they're set up. Please not that you can add any of the available modules in each template.

Homepage

This templates contains:

  • Hero section
  • Custom background element section
  • Text and image sections in order to describe the main purpose of the website
  • Text and picto sections in order to describe the main features of the website
  • Carousel sections in order to show visually some features of the website
  • CTA Banner for conversion purposes

About page

This templates contains:

  • Hero section
  • Text and image sections in order to describe the main purpose of the website
  • Team members section
  • CTA Banner for conversion purposes

Blank page

This templates contains:

  • Hero section

Blog index

This templates contains:

  • Hero section
  • Blog listing and pagination

Blog post

This templates contains:

  • Hero section
  • Main blog post content
  • Sidebar showing related posts

Contact page

This templates contains:

  • Hero section with form
  • Text and image sections in order to describe the main purpose of the website
  • Text and picto sections in order to describe the main features of the website

Features page

This templates contains:

  • Hero section
  • Text and image sections in order to describe the main purpose of the website
  • CTA Banner for conversion purposes

Pricing page

This templates contains:

  • Hero section
  • Pricing offers
  • Pricing details (when clicking on 'view more' buttons)
  • Testimonials carousel
  • FAQ
  • CTA Banner for conversion purposes

Meeting page

This templates contains:

  • Hero section
  • Meeting form
  • Carousel sections for logos

Simple landing page

This templates contains:

  • A landing page header containing Logo and CTAs only
  • Hero section with form
  • A landing page footer containing legal links only

Resource landing page

This templates contains:

  • A landing page header containing Logo and CTAs only
  • Hero section with form
  • Text and image sections in order to describe the main purpose of the website
  • A landing page footer containing legal links only

Thank you page

This templates contains:

  • Hero section
  • CTA Banner for conversion purposes

Start creating your websites with Buddy in just a few clicks! Easy peasy !