Complete website setup

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.
Use anchor navigation to go to the specific place you need after the page reloads.

Before you start

Begin with HubSpot CMS tutorial.

  • This tutorial will show you the step-by-step process you need to follow to start and launch a website with the GrowBig theme.

    Copy and paste this URL https://youtu.be/j0NwSb_X594 into your browser as links are not clickable in the HubSpot page editor.

Go to the theme settings if you are not already there.

  • Navigate to the theme settings in the top left corner and select "Edit" -> "Theme: Growbig" to access the theme settings.

Deactivate the "Guide notification."

  • The purpose of this notification is to help find the "quick start" website setup.

    Deactivating this notification is possible in the primary "quick start" theme settings.

What is the result of using the "Quick start" website setup?

  • Allowing you to preview how your website will look before you start building it.
  • Avoid wasting your time customizing unfamiliar theme options and modules to determine if the “GrowBig” theme is the right choice for you.
The “Quick start” doesn't provide options to build or create pages for your website. Instead, it customizes global settings to help you understand and visualize how your website can look.
After applying changes in the theme settings, the page will be reloaded by the HubSpot portal, which will always take you back to the top of the page. Use anchor navigation to go to the specific place you need after the page reloads.

Do's

  • Follow the “Quick start” step-by-step.
  • Please prepare your design assets, such as the branding guidelines, current website styles, or any other available materials.

Do nots

  • Skipping steps in the website setup.
  • Instead of adding images that doesn't match the recommendation, it is recommended to use placeholders.
  • Do not use primary theme options until you have completed the "Quick start" website setup.

The following design assets are needed

  • Branding guidelines or current website: Define your typography, colors, and design concept.
  • Logos: one for a light background and one for a dark background.
  • The setup requires 5 images: 1:1 ratio image with a max width of 800px, 4:3 ratio image with a max width of 800px, 3:2 ratio image with a max width of 800px, 16:9 ratio image with a max width of 800px and the background image ratio from 16:9 to 16:4.5 with a maximum width of 1500px. If they are currently available.
  • Creativity and knowing what you want.
Don't be afraid of missing some of the steps in the "Quick start" website setup, as all of these options are available in the primary theme options and modules.
Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Colors (2)

Please select the three primary colors

  • Select one primary color even if you have multiple brand colors.
  • If the "secondary" color is not available, use the darkest color available from the brand that is used for headings.
  • If the dark "tertiary" color is not available, use a similar primary color.

Primary

The primary color used across the brand.
  • Links
  • Buttons
  • Highlighted
  • Icons

Secondary

The dark color of the brand follows the primary colors that are used for headings and backgrounds.
  • Heading
  • Background

Tertiary

The darkest color of the brand.
  • Background
  • Dark elements
The theme provides all the tools needed to incorporate multiple brand's colors after this "Quick start".

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Typography (3)

Please select four types of fonts for the typography

Body

16/28
Why should you use GrowBig? That's an excellent question. GrowBig is a new way for your business to create a HubSpot CMS website with a pre-made theme. It helps you visualize a website concept before you begin building it.
Poppins Line spacing: 175%

Heading 1

48/60
You can’t do it alone without HubSpot partner
Poppins Line spacing: 125%

Heading 2

32/40
You can’t do it alone without HubSpot partner
Poppins Line spacing: 125%

Highlighted

16/28
You can’t do it alone without HubSpot partner
Poppins Line spacing: 175%
The option to customize the font size, line height and styles will be available in the theme options after this "Quick start" website setup.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Background (4.1)

Please choose the background colors for the website

  • If the brand does not have a dark shade of color, use the primary color of the brand that is similar to "Color 3".

Website background

The background of your website.

Color 1

The light shade of your website.

Color 2

The website's dark shade for the CTA section and dark background. If a dark shade is unavailable, use the primary "Color 4" or secondary "Color 3" colour instead.

Color 3

The darkest shade of the website for the CTA section and footer.

Color 4

The primary color of the brand.
If the brand does not have a dark shade of color for "Color 2" and "Color 3", use the primary color of the brand that is similar to "Color 4".

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Buttons (4.2)

Please set the styles for the buttons

  • Roundness, border width, colors, and font style of the default buttons.

Primary

This is a button
Large
This is a button
Default
This is a button
Small

Secondary

This is a button
Large
This is a button
Default
This is a button
Small

Tertiary

This is a button
Large
This is a button
Default
This is a button
Small

CTA

This is a button
Large
This is a button
Default
This is a button
Small
The options to customize button padding are available in theme options and module settings after the "Quick start" process.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Module (4.3)

Customize modules that reflect your branding in the best possible way.

  • Roundness, border styles, and shadow of the modules.
  • Primary and secondary colors of the modules.
Set minimal settings that reflect your branding in the best possible way.

Primary colors

Light color

Lighten the elements, text, and background of the modules.

Primary

The color of the primary elements of the modules.

Secondary

The color of headings and dark-colored elements.
If the brand has only one or two colors, use this color for all five "Secondary" colors.

Seconadry colors

Color 1

Color 2

Color 3

Color 4

Color 5

Inbound growth

Describe the service you offer clearly; Focus on the solutions your services provide, rather than just listing features. Utilize the primary keywords in this description.
  • Marketing automation
  • Blog & content creation tools
  • Video hosting and management
  • Analytics dashboards
  • Marketing automation
Learn more
Consulting

This is a heading for your client success stories

Describe how the business has helped you achieve the desired results with your company's services.

Learn more

Integration issues

Describe and demonstrate that you understand the customer's plan; you have been in the same situation, so you empathize with how it feels to have this issue.

Data management problems

Describe and demonstrate that you understand the customer's plan; you have been in the same situation, so you empathize with how it feels to have this issue.

High costs

Describe and demonstrate that you understand the customer's plan; you have been in the same situation, so you empathize with how it feels to have this issue.

Limited customization

Describe and demonstrate that you understand the customer's plan; you have been in the same situation, so you empathize with how it feels to have this issue.

Market competition

Describe the transformation that will occur if customers follow all the recommended steps using the solution you provide.

Client acquisition and retention

Describe the transformation that will occur if customers follow all the recommended steps using the solution you provide.

Technological changes

Describe the transformation that will occur if customers follow all the recommended steps using the solution you provide.
The options to customize module spacing, font size, and styles are available in the theme options and module settings after the "Quick start" website setup.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Icons (4.4)

Please select the default icon settings

  • Icon roundness and border width.
Variant 1
Variant 2
Variant 3
Variant 4
Variant 5
Variant 6
The options to customize icon size, colors, and type are available in the module settings after completing the "quick start" process.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Layout (4.5)

Set the default website maximum width.

Use the value 9999 to set the website width to full width.
The website maximum width is 1240px

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

4.6) Header

Set the default settings for the website header.

  • Select the header type and width.
  • Navigation color and fonts.
Use the value 9999 to set the website width to full width.
Close
  • There are no suggestions because the search field is empty.
Book a call
Get started
The options to customize navigation padding, elements, and all styles will be available in the global header section within the "header" module.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Footer (4.7)

Set the default settings for the website footer.

  • The maximum width of the footer.
  • Footer font settings.
Use the value 9999 to set the footer to full width.
The options to customize footer typography separately will be available in the theme options and the global footer section within the "footer" module.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Elements (4.8)

Please select vector elements that reflect your branding in the best possible way

  • Select 3 vectors that can best define the branding.
If vector elements are not needed in the design, select "none" from the options.

Vector 1

Vector 2

Vector 3

The theme allows users to use an unlimited number of other vector elements by customizing theme modules with the necessary requirements.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Images (4.9)

Replace placeholder with your images

  • Avoid adding graphical content if you don't have content with a similar ratio.

  • Crop the image if there is excessive white space.

    Example:

    Avoid the extra spacing that is displayed in gray in the example.

It is recommended to use placeholders if images with requirements are missing.

Placeholder 1

placeholder 1

Requirements

  • Image ratio 1:1, close to the square shape rectangle.
  • Do not upload high-dimensional images; instead, use a maximum width or height of 800 pixels.

Do's

Do nots

Two simple rules: an image ratio close to 1:1 and an image with a maximum width or height of 800 pixels.

Placeholder 2

placeholder 2

Requirements

  • Image ratio 4:3, close to the square shape rectangle.
  • Do not upload high-dimensional images; instead, use a maximum width or height of 800 pixels.

Do's

Do nots

Two simple rules: an image ratio close to 4:3 and an image with a maximum width or height of 800 pixels.

Placeholder 3

placeholder 3

Requirements

  • Image ratio 3:2, close to the square shape rectangle.
  • Do not upload high-dimensional images; instead, use a maximum width or height of 800 pixels.

Do's

Do nots

Two simple rules: an image ratio close to 3:2 and an image with a maximum width or height of 800 pixels.

Placeholder 4

placeholder 4

Requirements

  • Image ratio 16:9, close to the square shape rectangle.
  • Do not upload high-dimensional images; instead, use a maximum width or height of 800 pixels.

Do's

Do nots

Two simple rules: an image ratio close to 16:9 and an image with a maximum width or height of 800 pixels.

Placeholder 5

background

Requirements

  • Use the image ratio from 16:9 to 16:4,5.
  • Do not upload high-dimensional images; instead, use a maximum width of 1500 to 2000 pixels.

Do's

Do nots

Two simple rules: an image ratio from 16:9 to 16:4,5 and an image with a maximum width of 1500 to 2000 pixels.
Skip the step if high-quality content meeting these requirements is not currently available.

Next step

  • If you are unable to see the update that has been applied, please refresh the browser or update the page in the module settings.

Before you start
0
Read this before you begin.
Logo
1
Here is where the website begins to transform.
Colors
2
Give the website the branding color.
Typography
3
Select three types of fonts for the typography.
Design
4
4.1) Background
4.2) Buttons
4.3) Module
4.4) Icons
4.5) Layout
4.6) Header
4.7) Footer
4.8) Elements
4.9) Images
Preview
5
Navigate to the "View On" dropdown and enjoy the preview design.

Preview

The preview website will be ready once you complete all the steps

  • Navigate to the top left corner of your screen and find the dropdown navigation menu labeled "View on:".

    Selecting a template allows you to preview every page style with your branding.

  • The "Quick start" settings can now be disabled if they are no longer necessary, as all these options are available in the primary theme setting as well.

    Navigate to the primary theme setting and then to "Typography" to hide the "Quick start" theme settings.

Before leaving the theme settings, make sure you have saved all theme settings by clicking on the "Publish theme" button.

Next step

  • Ready to continue building a website in the page editor? Save the theme settings by clicking on the "Publish theme" button.