How To Fix A Logo Size In Hubspot Templates

A theme is a set of styles and templates yous tin utilise to your website pages and blogs in HubSpot. To make certain that your website looks consistent, manner settings for all pages using the aforementioned theme are managed in your theme settings. You tin easily customize your theme'south settings by clicking the Design tab on the left console in the page editor. Theme settings can be adjusted with intuitive controls such as toggles, switches, and color pickers.

Before y'all go started

Theme settings control the master colors, fonts, and push styles for pages using your theme templates.

Please note: the styling options available in your theme setting depend on the theme field options included by the spider web developer who created your theme.

Some of the content for your website is managed in other parts of your account settings, including:

Your company logo: update your company logo in your Account Defaults in the Branding tab.
Your navigation carte du jour: card colors are gear up in theme settings, but your navigation carte du jour content and links are managed in yourNavigation settings. Larn how to create a navigation bill of fare you tin add to the global header or global footer content within the page editor.
Your domain for publishing:the number of subdomains, brand domains, and top-level domains you lot can connect depends on your subscription. Learn more almost nearly subscription limits for domains and connecting a domain to HubSpot.

Edit theme settings

To edit your theme settings, you'll first need to create a folio with a theme template. The theme settings tin can be accessed inside the page editor past clicking theDesign tab on the left. Then clickEdit theme settings.

edit-global-themes-from-editor

Customizing colors, fonts, and spacing will set the default styles for all the elements on your folio. If yous desire to edit specific details such as link colors, push colors, or default form colors, click Edit side by side to More than settings to view additional theme settings available for your templates.

Colors

Your theme's color settings use a primary, secondary, and groundwork colour to all elements included in your theme templates. These styles will be practical to all elements on your website. To customize more specific settings for headings, fonts, and links, click Edit next toMore than settings.

edit-global-theme-colors

Fonts

Choose a primary and secondary font to utilize to your website's headings, forms, buttons, and torso text. All Google fonts are supported. Click the colour bubble to customize your main or secondary font colors. You can choose a elementary colour value or click the Avant-garde tab and choose a specific hexadecimal value with a colour picker.

edit-global-theme-fonts

Spacing

Your theme settings for spacing control the maximum width of your folio content, and the vertical spacing in between different elements on your page.

edit-global-theme-spacing

More settings

Inside your theme settings, y'all may have additional detailed settings to more specific styles on your folio. The style options in your theme are based on the theme fields included in your theme'due south coded template. If you aren't able to locate the setting you're looking for, reach out to your template designer to encounter what options were included in your template.

The instance below is a general guide to what types of additional may exist included within your theme. For a complete reference of theme fields that may be included on your templates, see the designers documentation.

Please note: remember that yous can customize fonts, colors, and styles within a rich text module on your page, or by overriding default styles of your theme inside the page editor. Only modify these styles if yous want them to be applied to all pages using this theme.

Typography

In your typography settings, yous can command the fonts applies to certain elements in your templates. All Google fonts are supported. You can besides select custom colors for certain headings, fonts, or links in your theme.

Headings:you tin can customize the verbal font, colour, size, and fashion for whatever headings included on your theme.
Body:customize the font, colour, or text size of the body of your page merely.
Links:customize the default color of links on your website. Yous tin can besides customize the color and behavior of links when a visitor hovers over or clicks your link.

Buttons

You can set custom colors, fonts, and styles for buttons on your pages and blog. Inside the page editor for a specific page, you may be able to swap button sizes or types, depending on how your theme was created by your website programmer.

Size: specify the dimensions of small, regular, and big buttons on your folio.
Primary: a chief push is for the most important action a visitor takes on your page. This color should stand out and take hold of your visitor'due south attending.
Secondary: a secondary button is used for relatively less important actions when at that place's already one primary push button on your page. Secondary buttons are typically practical to pages for lower priority actions.
Simple: these are the default fonts and styles applied to simple push button modules in your page.

Forms

Customize the default colors, fonts, and text styles, and buttons styles for your forms.

Championship: these are styles applied to the text field that appears above your entire grade. This typically includes a greeting and instructions for completing the form. These styles on your class can only be managed here in your theme'south settings.
Labels: styles applied to the labels that appear above a form field.
Fields: styles practical to the names of the form fields themselves.
Help text:this is the sample content that appears inside each form field, indicating what type of information your visitor should submit.
Submit: choose which button style and size should exist practical to your forms.
Background color:the groundwork color applied to your grade.
Border:the border color effectually the form fields.
Padding: the amount of spacing around the course on your page.

Tables

Set the default colors, fonts, spacing, and borders for tables added to your page.

Tabular array head:the colors applied to fonts in your table header, and the default groundwork color across the total width of the first row of your table. Y'all can also set a bottom edge for an accent colour along the bottom of edge of your table header.
Font color: default colour for fonts in your table.
Background color:default background color for the groundwork of your tabular array'southward cells.
Border:the default border color, width, and style of your table.
Padding: the corporeality of space to a higher place and beneath your table on your folio.

Learn more almost how to insert a table into a rich text module on your page.

Website header

These settings command the colors and fonts that appear in your page header, including your navigation card. Learn how to ready upward your navigation menu in your business relationship settings. To set your company logo on your theme templates, add together your logo image to your account defaults in the Branding section.

Menu:select the color and manner of the font for your navigation menu when visitors view, hover over, or click a card particular. These styles tin only be managed hither in your theme settings.
Background color:select the color for the background of the header of your website.
Bottom border: if desired, yous can add a horizontal line as a border underneath your website header. Select a mode to activate the bottom border, and so select a color and width for your border.

Footer

These settings control the colors and fonts that appear in your folio footer, including whatever navigation menus. Learn how to gear up your navigation menu in your account settings.

Menu:select the color and style of the font for the navigation menu in your theme's footer. You can customize the colors for when visitors view, hover over, or click a menu item. These styles can only be managed hither in your theme settings.
Background color:select the color for the background of the footer of your website.
Bottom border: if desired, y'all can add a horizontal line as a edge underneath your website footer. Select a way to activate the lesser border, then select a color and width for your border.

Blog

These settings command the mode of your listing page template and blog post template.

Banner images: upload images to employ in the background of your blog template'southward header. You lot can choose one image for your blog's homepage, and i image to utilise to all your blog posts.

Tags: set the default color, fonts, and styles for your blog tags, which appear at the height of your blog posts.