How To Use
Theme Settings

What is Theme Settings?

HubSpot Theme Settings is a comprehensive feature within the HubSpot Content Management System (CMS) that serves as the central hub for customizing and controlling various aspects of a website's design and functionality. It empowers users to manage branding elements, general styling settings, responsive design, navigation menus, and much more, all from a single interface. With Theme Settings, users can ensure a consistent and professional online presence, optimize their website for visitors, and potential customers, and tailor the user experience to their specific needs, making it an essential tool for website administrators, developers, and marketers looking to create, maintain, and enhance their websites within the HubSpot ecosystem.

Introducing 'Essence,' a HubSpot theme that embodies the very essence of web design sophistication and versatility. With 'Essence,' you gain unprecedented control over your website's visual identity, thanks to its Global Color and Font Settings, enabling you to effortlessly harmonize your brand's palette and typography across every corner of your site. Our Header and Footer options let you craft stunning top and bottom sections, while the Typography features ensure pixel-perfect text presentation. 'Essence' also elevates user engagement with customizable Button Styles, sleek Forms and tables, and captivating Animations. Precision in Layout and spacing keeps your content looking impeccable, and its intuitive Blog Configuration takes your content strategy to the next level. Unleash the 'Essence' of your brand, and transform your HubSpot-powered website into a masterpiece of design and functionality."

2. Global Color and Font Settings

The "Global Color and Font" setting allows you to set the font family and font colors of all elements on your website.

2.1 Fonts

Primary Fonts

Defines the font family of the text elements like headers, paragraphs.

Secondary Fonts

Defines the font family and the color of the link elements like CTAs

2.2 Colors

The Primary Color is the main color of your website. This color changes the CTA background, link color, border color on hover, first navigation elements' colors, child navigation elements' hover background colors, Footer elements' hover colors, etc.

You can also change the settings of these elements separately by going to the relevant fields in the theme settings.

The Secondary Color changes the text color of the CTA and sets the CTA background color on hover.
You can also change the settings of these elements separately by going to the relevant fields in the theme settings.

The Tertiary Color defines the Body Background color.
You can also change the background color of each "Section" individually by going to the "Section settings" while on the Page.

3. Header and Footer

3.1 Header

• Enable Sticky Navigation
  • Makes the navigation bar sticky on the scroll.
    
    
• Menu Type
  • Allows you to select menu type (Default Simple Menu or Other. Other version will come soon)
    
    
• Burger Menu Start Point
  • For the screen size smaller than the value you specify here, the Burger (mobile) menu will appear.
    
    
• Minimize the height when scrolling
  • Minimize the height on the scroll for sticky.
    
    
• Capitalization of Level 1 items
  • The text-transform property controls the capitalization of text.
    
    
• Capitalization of Child level items
  • The text-transform property controls the capitalization of text.
    
    
• Indicate for Active menu Level 1 Item
  • Indicate Active Level 1 menu Item using the underline
    
    
• Menu Arrow Down
  • Allows you to use the default arrow icon or no icon at all.

3.2 Header > Color Styles

3.2.1 Default Mode

Default State

• Bar Background Color
  • Sets the background color of the navigation bar
    
    
• Main Items Color
  • Controls menu links' color in the header
    
    
• Bar Background Color - Sticky
  • Sets the background color of the navigation bar when the page is scrolled down
    
    
• Main Items Color - Sticky
  • Controls menu links' color of the header when it is scrolled down
    
    
• Dropdown Child Background
  • If a "child item" is added under the "main navigation item", it will automatically be added as a dropdown. This setting sets the "background color of the child Item" inside the dropdown.
    
    
• Child Items Color
  • Controls child links' color in the header
    
    
• Child Items Border Color
  
  • Controls child links' border color in the header

Hover State

• Bar Background Color
  • Sets the background color of the navigation bar on hover
    
    
• Main Items Color
  • Controls menu links' color in the header on hover
    
    
• Bar Background - Sticky
  • Sets the background color of the navigation bar when the page is scrolled down on hover

• Main Items Color -  Sticky
  
  • Controls menu links' color of the header when it is scrolled down

• Dropdown Child Background
  • If a "child item" is added under the "main navigation item", it will automatically be added as a dropdown. This setting sets the "background color of the child Item" inside the dropdown on hover.

• Child Items Color
  • Controls child links' color in the header on hover
    
    
• Child Items Border Color
  • Controls child links' border color in the header on hover
    
    

3.2.2 Dark Mode

Dark State

In case some pages have different color palettes (For example, a Hero Banner with a bright background color on a specific page), this setting can be activated on a page-by-page basis, making the page more readable. The same settings as in the "Default" State apply. Color styles are applied when the dark navigation is selected at the page level. (Page > Contents Tab > Hidden Modules > Dark Navigation > Checked)

3.3 Footer

• Background Color
  • Sets the background color of the footer
    
    
• Text Color
  • Sets the text color
    
    
• Text Color on Hover (For Links)
  
  • Sets the text color on hover

4. Typography

You can make separate adjustments on Desktop, Tablet, and Mobile devices from the Typography setting and define Heading 1-6, links, paragraphs, colors of list items, font families, font sizes, font weights, letter spacings, and line heights.

5. Button Styles

5.1 Font

• Sets the text font size, family, weight and underline options

5.2 Styles

5.2.1 Default State

• Text Color
  
  • Sets the text color
• Background Color
  • Sets the button background color
• Border Color
  • Sets the button border-color
• Border Width
  • Sets the button border width
• Border Radius
  • It rounds the corners of an element's outer border edge

5.2.2 Hover State

• Same settings with the "Default State" with "on hover"

5.2.3 Side Animation

• Animation Type
  • For now, we can only select the "swipe right" animation and turn it on/off. It will be enriched with different animations very soon.

5.3 Padding

5.3.1 Horizontal Padding

• It sets the horizontal padding of the button

5.3.2 Vertical Padding

• It sets the vertical padding of the button

6. Forms & Tables & Animations

6.1 Forms

• Form Background Color
  • Sets the form background color
• Form Border Color
  • Sets the form border-color
• Header Background Color
  • Sets the header background color in the form
• Header Text Color
  • Sets the header text color in the form
• Label Color
  • Sets the label color in the form
• Help Text Color
  • Sets the help text color in the form
• Field Border Color
  • Sets the field border color in the form
• Field Focus Border Color
  • Sets the field focus border color in the form
• Form Button Color
  • Sets the form button color
• Form Button Background Color
  • Sets the form button background color
• Form Button Border Color
  • Sets the form button border-color
• Form Button Color on Hover
  • Sets the form button color on hover
• Form Button Background Color on Hover
  • Sets the form button background color on hover
• Form button border color on hover
  • Sets the form button border color on hover

6.2 Tables

6.3 Animations

• Image Animation
  • If animations are desired, Please check the box and visit any modules then select animation type in the Styles Tab. If you want to disable all animations please uncheck the box.

7. Layout & Spacing

7.1 Maximum content width

• It sets how many pixels the borders of all elements on the page will expand. (Generally recommended is between 1200px and 1400px)

7.2 Side (left-right) spacing)

• It sets the number of spacing of pixels left and right of the edges of all elements on the page.

7.3 Section Spacing Control (Top & Bottom)

• Sets how much section space should be at the top and bottom. Each section spacing can also be adjusted individually on a page basis manually. To change the breakpoint, visit Theme Settings > Typography

8. Blog Configuration