small-hand-brand-new

Documentation

Discover all modules provided by the Buddy Theme.

Carousels

Logos carousel

This module lets you add any logos you want to show to your visitors in a carousel display. You can add a description and set all carousel settings directly in the module.

Fields available in this module:

  • Customer Logos description: Set the title and description here.
  • Logo: Set as many logo as you want to display here.
  • Animation duration: Select the animation duration here. A long animation duration combined to a small animation interval will create an infinite animation (default state of the module).
  • Animation interval: Select the animation interval here. A long animation duration combined to a small animation interval will create an infinite animation (default state of the module).
  • Slides per view: Select the number of slides you want to display by default.
  • Slides per view - Tablet: Select the number of slides you want to display on tablet devices.
  • Slides per view - Mobile: Select the number of slides you want to display on mobile devices.
  • Show arrows: Check this box if you want to display arrows on the left and right of your carousel.
  • Show dots: Check this box if you want to display dots below your carousel.

Resources carousel

This module lets you add any resource you want to show to your visitors in a carousel display. You can add a description and set all carousel settings directly in the module, and set all resources manually by defining their titles, images and descriptions.

Fields available in this module:

  • Resource: Find all settings regarding your resources here. You can add as many resource as you want to display.
    • Resource image: Set the resource image here.
    • Resource text: Set the resource text here.
    • Resource link: Set a link for the resource button here.
    • Resource link text: Set the button text here.
  • Animation duration: Select the animation duration here. A long animation duration combined to a small animation interval will create an infinite animation.
  • Animation interval: Select the animation interval here. A long animation duration combined to a small animation interval will create an infinite animation.
  • Slides per view: Select the number of slides you want to display by default.
  • Slides per view - Tablet: Select the number of slides you want to display on tablet devices.
  • Slides per view - Mobile: Select the number of slides you want to display on mobile devices.
  • Show arrows: Check this box if you want to display arrows on the left and right of your carousel.
  • Show dots: Check this box if you want to display dots below your carousel.

Testimonials carousel

This module lets you add any testimonial you want to show to your visitors in a carousel display. You can add a description and set all carousel settings directly in the module, and set all testimonials manually by defining their titles, ratings, images and descriptions.

Fields available in this module:

  • Author text color: Set the author text color here.
  • Review: Find all settings regarding reviews here. You can set as many review as you want to display.
    • Stars rating: Set the stars rating for the review here.
    • Review text: Set the review text here.
    • Review Author Image: Set the review author image here.
    • Review Author First name: Set the review author first name here.
    • Review Author Last name: Set the review author last name here.
    • Review Author Job role: Set the review author job role here.
  • Animation duration: Select the animation duration here. A long animation duration combined to a small animation interval will create an infinite animation.
  • Animation interval: Select the animation interval here. A long animation duration combined to a small animation interval will create an infinite animation.
  • Slides per view: Select the number of slides you want to display by default.
  • Slides per view - Tablet: Select the number of slides you want to display on tablet devices.
  • Slides per view - Mobile: Select the number of slides you want to display on mobile devices.
  • Show arrows: Check this box if you want to display arrows on the left and right of your carousel.
  • Show dots: Check this box if you want to display dots below your carousel.

Content

Card

This module lets you feature your content in a card display. You can add an image, some text and a link to the card. You can also set the inner spacings for the card and add a border or not.

Fields available in this module:

  • Image: Set the image you want to display.
  • Text: Set the text you want to display below the card.
  • Add link: Check this box if you want to add a link on the card.
  • Link: Set the link you want to send the visitor to.
  • Top inner spacing: Set the card top inner spacing.
  • Bottom inner spacing: Set the card bottom inner spacing.
  • Left inner spacing: Set the card left inner spacing.
  • Right inner spacing: Set the card right inner spacing.
  • Add border: Check this box if you want to add a border to the card.
  • Border color: Select the card border color.
  • Background color: Select the card background color.

Countdown

This module lets you show a countdown to a date. Simply select your date, we're doing the magic for you!

Fields available in this module:

  • Numbers text color: Select the numbers color.
  • Date and time: Select the date for your event. The countdown will be based on this date.
  • Days text: Set the text for days.
  • Hours text: Set the text for hours.
  • Minutes text: Set the text for minutes.
  • Seconds text: Set the text for seconds.

Google maps

This module lets you show a Google maps iframe to your visitors. Just put the src from your Google Maps Iframe, we're generating the iframe dynamically when the users sees it.

Fields available in this module:

  • Google map Iframe URL : Put the Google maps iframe URL here. Simply copy the Embed Google maps iframe and keep only the url from the src attribute.
  • Set map height: Check this box if you want to set a custom height for your map.
  • Map height: Set a custom height for your map.

Key number

This module lets you feature a key number with a prefix or a suffix (or both), a description and a counter animation if needed.

Fields available in this module:

  • Text alignment: Set the key number text alignment here.
  • Number: Set the number you want to display. This field doesn't work with decimals (eg: 10.9)
  • Show prefix: Check this box if you want to display a sign before the number.
  • Number prefix: Choose the prefix text and alignment in this field group.
    • Number Prefix Text: Set the prefix text here.
    • Number prefix alignment: Select the prefix alignment here.
  • Number suffix: Choose the prefix text and alignment in this field group.
    • Number suffix Text: Set the suffix text here.
    • Number suffix alignment: Select the suffix alignment here.
  • Number text: Set the number text here.

Pricing offer

This module lets you feature a pricing in a card display. You can add a title, a pricing, a description, main features and a button to open pricing details (Module available below).

Fields available in this module:

  • Offer title background: Select the background you want to display behind the pricing offer title here.
  • Offer title color: Select the pricing offer title color here.
  • Offer title: Set the title for your pricing card here.
  • Pricing description: Set the pricing description here.
  • Show price: Check this box if you want to display a price.
  • Price: Set the price for your card here.
  • Price sign: Set the price sign for your card here.
  • Price sign alignment: Select the price sign alignement here.
  • Details & description: Set the pricing card details here.
  • Text alignment: Select the pricing card text alignment here.
  • Show detail link: Check this box if you want to add a link to your card (NB: This option only works with a Pricing details module).
  • Pricing link text: Set the link text here.

Pricing details

This module lets you open a popup table in which you can list every features for your pricing cards. It cannot work if you don't add pricing offer to your page as it depends on the pricing offer button to open.

Fields available in this module:

  • Pricing table details: Set the title and description here.
  • Rows: Set as many rows you want to display here.
    • Row name: Set the row name here.
    • Value: Find all settings regarding the row value here. You can set as many values as you want (it will create a new column for each value automatically).
      • Icon or text: Select the value type you want to use.
      • Icon: Select between a check and a cross icon.
      • Value text: Set the value text here.

Question

This module lets you showcase frequently asked questions in a tab display. You can add a question and an answer that will be visible on click.

Fields available in this module:

  • Question: Set the question text here.
  • Answer: Set the answer text here.
  • White variant: Check this box if you want to display your question text on white (useful when using dark backgrounds).

Speaker

This module lets you feature people on your page with a Name, job role, description and some socials.

Fields available in this module:

  • Text alignment: Select the text alignment here.
  • Speaker Image: Set the speaker image here.
  • First name: Set the speaker first name here.
  • Last name: Set the speaker last name here.
  • Job role: Set the speaker job role here.
  • Bio: Set the speaker small biography here.
  • Show socials: Check this box if you want to display speaker socials.
  • Speaker Socials: Find all settings regarding speaker socials here (If a link is empty, social icon will not show up).
    • Facebook URL: Set the speaker Facebook URL here.
    • Twitter URL: Set the speaker Twitter URL here.
    • Linkedin URL: Set the speaker LinkedIn URL here.

Text and picto

This module lets you showcase a picto or an image with a description.

Fields available in this module:

  • Text alignment: Select the text and picto alignment.
  • Picto Icons or Image: Select if you want to use HubSpot icons library or a custom image.
  • Icon: Set the picto here.
  • Icons color: Set the picto color here.
  • Picto Image: Set the picto image here.
  • Feature text: Set the text you want to display here.
  • Add box shadow: Check this box if you want to display the text and picto in a box with a box shadow.

Timeline step

This module lets you showcase a number with a description. Useful for example to explain next steps when the visitor filled a form.

Fields available in this module:

  • Number style: Select the design of the number here.
  • Text alignment: Select the number and text alignment here.
  • Number vertical alignment: Select the number vertical alignment here. If you select bottom, the number will display below the text.
  • Feature text: Set the timeline step text here.
  • Number: Set the timeline step number here.

Word cloud

This module lets you feature a word cloud on your page. You can set the text and the link and it will have a button display.

Fields available in this module:

  • Buttons style: Set the buttons style here.
  • Text alignment: Select the buttons alignment here.
  • Tags: Find all settings regarding tags here.
    • Button Text: Set the text you want to display here.
    • Show link: Check this box if you want to add a link on the button.
    • Button link: Set the URL you want the visitor to go to on click.

Lead capture

Custom button

This module lets you feature one or multiple buttons on your page. You can choose the link, the text and the styling for each button.

Fields available in this module:

  • Buttons alignment: Select the buttons alignment.
  • Button: Find all button settings inside this group.
    • Button style: Select the button style.
    • Button Text: Set the button text.
    • Link use: Select the type of the button. If you select anchor, please select external URL and put the id you want to scroll to on click (eg: #form-container).
    • Open in a new window: Check this box if you want your link to open in a new window.
    • Button link: Select or write the button URL here.

Form

This module lets you show a form on your page.

Fields available in this module:

  • Form Title & Description: Set the form title and description here.
  • Form: Choose your form and all options related to its content here.
  • Form button alignment: Choose the form submit button alignment here.
  • Send form notifications to specified email addresses instead of the form defaults: Check this box if you want to override default notifications settings for this form.
  • Email Addresses: Choose the email addresses you want to send notifications to on form submit.
  • Add to workflow: Check this box if you want to add this form submission to a workflow.
  • Send a follow-up email: Check this box if you want to send a follow-up email on form submission.
  • Email: Choose or create a follow-up email.
  • Form inputs style: Choose a styling for your inputs here.
  • Make multistep: Check this box if you want to make your form multistep.
  • Inputs to show at each step: Choose the number of inputs you want to show at each steps (Please note that you have to count each fields as the code is not based on row).
  • Show steps text: Check this box if you want to display a text that shows at which step the user is.
  • Step text: Set the step text you want to show before the counter.
  • Prev button text: Choose the previous button text for your multistep form here.
  • Next button text: Choose the next button text for your multistep form here.

Popup form

This module lets you show a popup form on your page. Be careful to use a custom button module to open the form on click.

Fields available in this module:

  • Form Title & Description: Set the form title and description here.
  • Form: Choose your form and all options related to its content here.
  • Form button alignment: Choose the form submit button alignment here.
  • Send form notifications to specified email addresses instead of the form defaults: Check this box if you want to override default notifications settings for this form.
  • Email Addresses: Choose the email addresses you want to send notifications to on form submit.
  • Add to workflow: Check this box if you want to add this form submission to a workflow.
  • Send a follow-up email: Check this box if you want to send a follow-up email on form submission.
  • Email: Choose or create a follow-up email.
  • Form inputs style: Choose a styling for your inputs here.

Medias

Image

This module lets you feature an image on your page. It's using responsiveness and lazyload to have the best performance possible on your pages.

Fields available in this module:

  • Image: Select the image you want to display.
  • Change order on mobile: Check this box if you want to put the image below the text on mobile. It will also add a top margin between the image and the text above.
  • Make 100% width on mobile: Check this box if you want to make the image take all the width on tablet and mobile devices.
  • Image alignment: Set the image alignment here.
  • Add Link: Check this box if you want to add a link to your image.
  • Link: Set a link to link your image to.

Logo polaroid

This module lets you feature a logo and an image in a card display.

Fields available in this module:

  • Text alignment: Set the text alignment here.
  • Logo: Select the logo image here.
  • Company Image: Select the company image here. (Offices, people...)

Video

This module lets you showcase a video on your page. You can choose the provider (Vimeo, YouTube or HubSpot).

Fields available in this module:

  • Video provider: Select which provider you want to use for your video.
  • Vimeo URL: Copy/paste the Vimeo URL here (not the iframe, the URL).
  • YouTube URL: Copy/paste the YouTube URL here (not the iframe, the URL).
  • HubSpot Video File: Set the HubSpot hosted video file you want to display.
  • Change order on mobile: Check this box if you want the video to be below the text on mobile.