Getting Started Guide

To access the theme settings, follow these steps:

1. Log in to your Hubspot account and go to the Hubspot CMS.

2. Click on the "Design Manager" tab in the top menu.

3. Select the theme you want to edit from the list of available themes.

4. Click on the "Theme Settings" tab on the left side of the screen.

5. From here, you can use the various options and controls to customize your theme to your liking.

6. When you're finished making changes, be sure to click "Save" to apply your changes.

If you have any questions or need help accessing or using the theme settings in the Hubspot CMS, you can reach out to the Hubspot support team for assistance.

How to set up a Global Header?

Edit page → Contents

By clicking on Language Switcher you can choose a display mode that means the language of the text in the language switcher:

- Localized, the name of each language will display in that language. 

- PageLang, the names of languages will display in that language. 

- Hybrid, the combination of the two. 

How to set up a Global Header No Navigation?

Edit page → Contents

How to set up a Global Footer?

Edit page → Contents

Content Options:

You can set properties like:

• Selection of a blog
• Period of popular posts
• Number of posts

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules:

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

You can set properties like:

• Selection of a blog
• Number of posts

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules:

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

You can set properties like:

• Content (RichText)
• Selection of a form

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules:

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

1. Click Settings and edit:

• Items - the number of cards to display for each device
• Space between slides
• Autoplay - video will play as soon as the page loads
• Loop - video will play continuously in a loop
• Navigation:
  ➡️ Color
  ➡️ Size
• Pagination:
  ➡️ Active - make the pagination visible or not
  ➡️ Color and color active
  ➡️ Size
  ➡️ Space between
  ➡️ Offset top - the distance between pagination and case studies cards

2. Individual elements are built on a repeater so you can easily add any number of Case Studies. You can also edit/clone/delete the elements. Each element has:

• Image type
• Image
• Alt text
• Width and height
• Background height
• Content (RichText)
• Link information

Styles Options:

You can set custom styles like:

• Spacing
• Border - style, color, width, and radius
• Background color

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

You can set properties like:

• Link to type
• URL
• Open link in new window
• Link type
• Button text
• Modal ID

Styles Options:

You can set custom styles like:

• Font
• Background
• Border
• Corner
• Spacing
• Alignment

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

1. Click Settings and edit:

• Font
• Map background color
• Country color
• Country border color
• Country hover color
• Map max width

2. Individual elements are built on a repeater so you can easily add any number of Countries. You can also edit/clone/delete the elements. Each element has:

• Choice - select the country
• Text

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules:

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

1. Click Settings and edit:

• Items - the number of cards to display for each device
• Space between slides
• Autoplay - video will play as soon as the page loads
• Loop - video will play continuously in a loop
• Navigation:
  ➡️ Color
  ➡️ Size
• Pagination:
  ➡️ Active - make the pagination visible or not
  ➡️ Color and color active
  ➡️ Size
  ➡️ Space between
  ➡️ Offset top - the distance between pagination and case studies cards

2. Individual elements are built on a repeater so you can easily add any number of Logos. You can also edit/clone/delete the elements. Each element has:

• Image
• Alt text
• Width and height

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules:

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

1. Click Menu and choose:

• Menu from the list:
  ➡️ Edit the existing menu
  ➡️ Create a new one

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules.

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

1. Click Settings and edit:

• Items - the number of cards to display for each device
• Space between slides
• Autoplay - video will play as soon as the page loads
• Loop - video will play continuously in a loop
• Navigation:
  ➡️ Color
  ➡️ Size
• Pagination:
  ➡️ Active - make the pagination visible or not
  ➡️ Color and color active
  ➡️ Size
  ➡️ Space between
  ➡️ Offset top - the distance between pagination and case studies cards

2. Individual elements are built on a repeater so you can easily add any number of Rich Text. You can also edit/clone/delete the elements. Each element has:

• Rich text → you can put headline, image, icon, and description

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules.

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

You can set properties like:

• Label text
• Placeholder text
• Include search button
• Search results include

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules.

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

Individual elements are built on a repeater so you can easily add any number of Social Links. You can also edit/clone/delete the elements. Each element has:

• Social account
• Social link
• Open link in new window
• Link type
• Accessibility options

Styles Options:

You can set custom styles like:

• Fill
• Size
• Background
• Corner
• Spacing
• Alignment

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

Content Options:

1. Click Settings and edit:

• Font
• Layout type
• Reverse layout
• Max width of your content
• Accent color for the progress bar

2. Click Content (RichText) and add:

• Title, text, videos, images, tables, icons, CTA, anchor, horizontal line, emoji, horizontal line, non-breaking space, and special characters.

3. Click Video Settings and edit:

• Video size
• Video margin top

4. Individual elements are built on a repeater so you can easily add any number of Items. You can also edit/clone/delete the elements. Each element has:

• Title
• Description

5. Click Bottom Content and edit the concluding section:

• Content (RichText)

Styles Options:

Based on the selected device you can show or hide the visibility of specific modules.

• Show - displays the module added
• Hide - hides the module at the defined breakpoint

Style Section/Column:

You can set properties like:

• Alignment and spacing
• Background

6Minded theme includes the Homepage that allows you to create a custom page that can include various sections like:

6Minded theme includes an About page template that can be used as a starting point for creating an about page for a website.

The template includes placeholder text and images that can be replaced with specific information for the website. Some common elements that might be included in an About page template are:

• An introduction: a brief overview of the website or organization, including its mission or purpose.
• History: a section that provides background information on the origins of the website or organization.
• Team: a section that includes biographical information and photos of key team members or staff.
• Contact: a section that includes contact information such as an email address, phone number, and physical address.

It's also common that the About page template includes images, such as logos, photographs, or illustrations to make the page more visually appealing and highlight what is the organization/company all about.

6Minded theme includes the Blog Listing Classic page that has the next elements:

• Search bar: that allows searching through a collection of blog posts.
• Categories: a way to organize and filter the blog posts by topic.
• Thumbnail: an image that represents the post, often used as the post's main image.
• Date: the date the post was published.
• Post title: a list of the titles of the blog posts, linking to the full post.
• Post excerpt: a brief summary or excerpt from each post, providing a preview of the content.
• Pagination: a way to navigate through multiple pages of blog posts, usually through numbered page links or next/previous buttons.
• Popular articles: the list of the most read articles on the blog. 
• Subscription banner: the user can subscribe to the newsletter. 

Blog posts on HubSpot can be used to attract visitors to a website, educate and engage with potential customers, and increase search engine rankings. The platform allows users to easily create, optimize and publish blog post, track the performance of the post and integrate with other marketing tools like email, social media, and analytics.

• Categories: a way to organize and filter the blog posts by topic.
• Post title: name of the blog article.
• Date: the date the post was published.
• Reading time: how much time the user will spend reading the article.
• Sharing on social media: the option to share a blog post on social media.
• Thumbnail: an image that represents the post, often used as the post's main image.
• Description text: whole text of the article.
• Progress bar: that shows the progress of reading.
• Right panel with tags, popular articles, and subscription banner.
• Related articles: the list of articles that fits some topic.
• Subscription banner: the user can subscribe to the newsletter. 

6Minded theme includes the Lead Magnets Landing Page, so you can provide information about some of your resources. It can have the next elements:

• Hero banner with download form: to present the main message and encourage users to do some action (download/register etc.)
• Rich text section: to describe specific information. 
• Multi-column section: to provide more details. 
• Testimonials section: to show feedback from happy clients. 

6Minded theme includes the Thank You Page that allows you to create a custom page that can include various sections like:

• Rich text section: to describe specific information. 
• Social media links: to allow the users to follow you.  
• Recent blog posts: to share the latest articles. 

6Minded theme includes the Contact page that allows you to create a custom contact page with various sections like:

• Contact information: including your company's address, phone number, and email address.
• Contact form: allowing visitors to fill out and submit a form to contact you.
• Map: showing the location of your company.
• Social media links: linking to your company's social media profiles.
• Additional sections: like business hours, or frequently asked questions.

The contact page can be customized to match the design of your website. The contact form on the page can be configured to send data to the CRM, sales, or service tools. This way, you can track and manage the leads generated from the contact form easily.

It is a great way for website visitors to easily find and reach out to the company for any inquiry or support, and for businesses to capture leads and manage them through the CRM.

To create a custom "404 error page" in a Hubspot theme, you can follow these steps:

1. In your Hubspot account, navigate to the "Content" tab and click on the "Design Manager" option.

2. In the Design Manager, click on the "Edit Theme" button for the theme you want to edit.

3. In the left sidebar, click on the "Templates" option and then click on the "404" template.

4. In the right-hand panel, you can use the available design tools to customize the appearance of your 404 error page.

5. When you are finished designing your 404 error page, click the "Publish" button to make your changes live.

6. To test your 404 error page, try accessing a non-existent URL on your website. The custom 404 error page you created should now be displayed.

To check more detailed information, visit the Knowledge Base of Hubspot: https://knowledge.hubspot.com/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages

To create a custom "500 error page" in a Hubspot theme, you can follow these steps:

1. In your Hubspot account, navigate to the "Content" tab and click on the "Design Manager" option.

2. In the Design Manager, click on the "Edit Theme" button for the theme you want to edit.

3. In the left sidebar, click on the "Templates" option and then click on the "500" template.

4. In the right-hand panel, you can use the available design tools to customize the appearance of your 500 error page.

5. When you are finished designing your 500 error page, click the "Publish" button to make your changes live.

6. To test your 500 error page, you can try simulating a server error on your website. You can do this by making a change to your server-side code that causes an error to be thrown. The custom 500 error page you created should now be displayed.

To check more detailed information, visit the Knowledge Base of Hubspot: https://knowledge.hubspot.com/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages

To create a custom "subscription page" in a Hubspot theme, you can follow these steps:

1. In your Hubspot account, navigate to the "Content" tab and click on the "Design Manager" option.

2. In the Design Manager, click on the "Edit Theme" button for the theme you want to edit.

3. In the left sidebar, click on the "Templates" option and then click on the "Subscription" template.

4. In the right-hand panel, you can use the available design tools to customize the appearance of your subscription page. This page will be displayed to your email recipients when they want to manage their email subscriptions or unsubscribe from all emails.

5. When you are finished designing your subscription page, click the "Publish" button to make your changes live.

To check more detailed information, visit the Knowledge Base of Hubspot: https://knowledge.hubspot.com/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages

To create a custom "email backup unsubscribe page" in a Hubspot theme, you can follow these steps:

1. In your Hubspot account, navigate to the "Content" tab and click on the "Design Manager" option.

2. In the Design Manager, click on the "Edit Theme" button for the theme you want to edit.

3. In the left sidebar, click on the "Templates" option and then click on the "Unsubscribe" template.

4. In the right-hand panel, you can use the available design tools to customize the appearance of your unsubscribe page. This page will be displayed to email recipients who are trying to unsubscribe, but HubSpot is unable to determine their email address.

5. When you are finished designing your unsubscribe page, click the "Publish" button to make your changes live.

To check more detailed information, visit the Knowledge Base of Hubspot: https://knowledge.hubspot.com/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages

To create a custom "subscriptions update page" in a Hubspot theme, you can follow these steps:

1. In your Hubspot account, navigate to the "Content" tab and click on the "Design Manager" option.

2. In the Design Manager, click on the "Edit Theme" button for the theme you want to edit.

3. In the left sidebar, click on the "Templates" option and then click on the "Subscription Update" template.

4. In the right-hand panel, you can use the available design tools to customize the appearance of your subscription update page. This page will be displayed to your email recipients when they want to update their subscriptions.

5. When you are finished designing your subscriptions update page, click the "Publish" button to make your changes live.

To check more detailed information, visit the Knowledge Base of Hubspot: https://knowledge.hubspot.com/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages

To create a custom "search results" in a Hubspot theme, you can follow these steps:

1. In your HubSpot account, navigate to the "Design Manager" from the main navigation.

2. In the Design Manager, you can edit the existing theme or create a new one.

3. Create a new page for the "Search Results" page, where the search results will be displayed.

4. In the page editor, you can add a search bar or form for users to enter their search query.

5. Once the user submits the search query, you can use a search API provided by Hubspot, to retrieve the results and display them on the page.

6. You can also include options to filter or sort the results based on different criteria, such as relevance, date, or price.

7. You can also add pagination to the search results page, to show multiple pages of results, if there are many results for the query.

8. Once you've designed the search results page, you can add the search bar or form to the pages where you want it to be available.

9. Finally, you will need to set up a search engine or use a search API provided by Hubspot, to index your website's content and enable search functionality.

To create a custom "membership registration page" in a Hubspot theme, you can follow these steps:

1. In your Hubspot account, navigate to the "Content" tab and click on the "Design Manager" option.

2. In the Design Manager, click on the "Edit Theme" button for the theme you want to edit.

3. In the left sidebar, click on the "Templates" option and then click on the "Membership Registration" template.

4. In the right-hand panel, you can use the available design tools to customize the appearance of your membership registration page. This page will be displayed to new members when they want to sign up and create a new account.

5. When you are finished designing your membership registration page, click the "Publish" button to make your changes live.

To create a custom "membership login page" in a Hubspot theme, you can follow these steps:

1. In your Hubspot account, navigate to the "Content" tab and click on the "Design Manager" option.

2. In the Design Manager, click on the "Edit Theme" button for the theme you want to edit.

3. In the left sidebar, click on the "Templates" option and then click on the "Membership Login" template.

4. In the right-hand panel, you can use the available design tools to customize the appearance of your membership login page. This page will be displayed to your members when they want to log in to their account.

5. When you are finished designing your membership login page, click the "Publish" button to make your changes live.

To create a custom "reset password" in a Hubspot theme, you can follow these steps:

1. In your HubSpot account, navigate to the "Design Manager" from the main navigation.

2. In the Design Manager, you can edit the existing theme or create a new one.

3. Create a new page for the "Reset Password" form, where the user can enter and confirm their new password.

4. In the page editor, you can add the form fields for "New password" and "Confirm password" and a "Submit" button.

5. Once you've designed the form, you can add the form submission action in your hubspot account, to update the user password.

6. To secure the reset password page, you can use a time-limited token which is sent along with the reset password link. The token can be verified on the server-side to ensure that the link is still valid.

7. You can also check for the strength of the password, using built-in validation tools provided by the HubSpot, such as requiring a minimum length, or including letters, numbers, and special characters.

8. Finally, you will need to create an email template for the password reset link, and set up the email to be sent to the user's email address after they request a password reset.

To create a custom "reset password request" in a Hubspot theme, you can follow these steps:

1. In your HubSpot account, navigate to the "Design Manager" from the main navigation.

2. In the Design Manager, you will see the option to "Create a new theme." Select this option.

3. Give your theme a name and choose the template you want to use as the starting point.

4. Once your theme is created, you can navigate to the "Forms" section in the Design Manager.

5. Click on the "Create a new form" button to create a new form that will be used for the password reset feature.

6. In the form editor, you can add the "email" field and a "submit" button.

7. Once you've designed the form, you can add it to the pages where you want the password reset feature to be available.

8. Next you will need to create a form submission action in your hubspot account, to send an email with password reset link to user's email address.

9. Finally, you will need to create a new page for the password reset form, where the user can enter their new password.

How to set up a Global Header?

Edit page → Contents

By clicking on Language Switcher you can choose a display mode that means the language of the text in the language switcher:

- Localized, the name of each language will display in that language. 

- PageLang, the names of languages will display in that language. 

- Hybrid, the combination of the two. 

How to set up a Global Header No Navigation?

Edit page → Contents

How to set up a Global Footer?

Edit page → Contents