Section 01

How to Create a Child Theme

Section 02

How to Edit Your Theme Settings

Created your child theme? Great! It’s time to move on to your Theme Settings.

Your Theme Settings are where you can globally change your theme's styling to match your company brand. This includes colors, fonts, borders, box shadows, and more. To access your theme settings and discover what you can edit, follow these steps or view our video:

1. Click the gear icon in your portal menu to access Theme Settings. This will take you to the portal settings page.
2. In the left-hand sidebar, navigate to Tools, then Website, and finally, click on Themes. This takes you to a listing of the themes available in your portal. Here you'll hover over the theme you want to edit and click View theme.
3. You'll have a preview on the right side in that theme's settings. You can change the view from the dropdown to any template in the theme or any page using a template from the theme. The buttons in the top right will allow you to create a page or blog post, view the preview in responsive mode, and publish any changes you make to the theme settings.
4. To the left is a sidebar where you make those changes. You'll see several groups here, including Global Settings. All the other groups here are connected to Global Settings, so the changes you make will reflect across all the options available.
5. In Global Settings, if you have brand colors set up in your portal, most global colors will automatically pull in those brand colors. If you still need to set up brand colors or don't like where the colors are being used, you can edit the colors directly. If you don't see any changes you make in the preview pane, click the Apply changes button to refresh the preview.
6. In Fonts, you can choose from any web safe or Google font to change the font family of your headings and base text. Other options available here may vary between themes, but generally, you'll see options to change the max width of the content, global shadows, and borders.
7. While in Theme Settings, you'll also want to look at your Website Header and Website Footer settings. Website Header includes options such as predefined header layouts (if available), making the header sticky, the max header width and height, and other settings specific to your header. You can change any color from the background to the child menu links in Header Colors. Website Footer will have options specific to the footer of your website, such as font and color options for text, links, and menus.
8. If you're happy with the distribution of colors and fonts after editing these three groups, publish your changes and move on to the next step. If you want to edit the styling further, you can go through the other groups available to change font settings and colors more granularly.
9. When you're done editing the Theme Settings, click the Publish button in the top right to publish your changes.

Section 03

How to Edit Your Header and Footer

After you've styled your theme to your liking, it's time to focus on the header and footer, which are critical elements of your website. As they are global, any changes made to them will apply to the entire site. Editing them requires a slightly different approach than editing a page. Follow these steps or view our video guide to set up your header and footer:

1. You'll need at least one page using the theme to access your header and footer. You can create a page directly from the theme settings or navigate to Marketing, Website, then Website pages to reach the website pages dashboard.
2. Click the Create button in the top right. In the dialog, choose the Website domain, enter a page name, and click Create page. Then select the template you want to use on this page.
3. Once in the page editor, you can either click directly on the header or open the Contents tab on the left and click the Website Header module. Click the Open in global content editor button to redirect to the editor for your header. This global content editor is similar to the page editor and lets you drag and drop any modules you want into the available areas above and below the site navigation menu.
4. The menu itself is a static area. To edit the modules within, click the Contents tab and select the module you want to edit. By default, your logo and the link on the logo will be pulled in from your portal settings. However, you can change them here by selecting the Override default logo. This also allows you to change the logo's alt text, width, height, and link.
5. After editing your site header, click the Publish button in the top right to publish your changes. This will redirect you back to the page you entered, where you can scroll down to the bottom and click your footer or open the Contents tab and click on the Website Footer module to take you to the global content editor again.
6. Unlike the header, the entirety of the footer is drag and drop, so you can remove, add, and rearrange modules to build your footer in any way you like. By default, predefined footer layouts usually include a social links module, simple menus, and a rich text module with copyright information. When you're done editing your footer, click the Publish button to publish your pages and be redirected back to the page editor.

Section 04

How to Build Pages

Now that your header and footer are ready, it's time to build and publish your content. If you're new to HubSpot or just aren't familiar with HubSpot's drag-and-drop functionality, follow these steps or watch our video to get started:

1. In the page editor, click on the Contents tab, where you'll see a drag-and-drop page comprising Sections, Columns, and Modules.
2. Sections are a wrapper around a single row of columns. You can also go to the Layouts tab from saved sections to add predefined column layouts. Each section has a style section button that opens a list of section settings in the left-hand sidebar.
3. Under Visibility, you can show or hide a section on the breakpoint you're viewing. Under Alignment and spacing, you can change the vertical alignment of the columns in the section, make the content in the section stretch to the full width of the section, center the content to a certain max-width, and add padding and margins to the section. Under Background, you can add a color, image, or gradient background to your section.
4. To make navigating through sections easier on pages with a ton of content, use the Contents tab to find and clone, edit, hide, or delete your sections. You name the section to organize the Contents tab better and use the collapse all functionality to give you a simplified view of your content.
5. Moving on to columns, HubSpot works on a 12-column grid. You can add up to 12 columns in a section sized at one wide. Within the page editor, you can click between columns and drag them left or right to change their width.
6. Hovering over a single column allows you to clone, delete, or style the column. The settings here are similar to sections with options for breakpoint visibility, padding, margin, background, and a button to reset any changes you've made.
7. Inside columns, there are modules which make up the main content of the page. Clicking on a module in the page editor will open the module settings, and hovering on it will give you options to clone or delete the module.
8. In the module settings, there are two tabs: Content and Styles. The Content tab will generally contain all the fields you need to change the content of a module, such as text, links, images, layout options, etc. The Styles tab will generally contain fields to change the module's styling, such as colors, text alignment, spacing, and more.
9. To add new modules, return to Home on the sidebar, then the Add tab. All your theme modules will be listed under Theme modules, followed by HubSpot's default Common modules, and then All modules that are in your portal.
10. To add a module to your page, grab it, drag it, and drop it wherever you want. You can drag it into an already set-up column, next to a column to create a new one, or between two sections to create an entirely new one.
11. After building your page, go through the other tabs in the page editor to fill out the necessary information, and then click the Publish button in the top right to publish your page. Or you can leave it as a draft until you're ready to go live.

Section 05

How to Update Your Pages

After learning how to create new pages, you might wonder how to update an existing website on HubSpot with a new theme. In this video, you’ll learn three options for doing just that:

Option 1: Change the Template to update a page with a new theme template. Start by opening the page editor for the page you want to update. Then, go to the Settings tab and scroll down to Advanced options. Click to expand this section and then scroll to the Template section. Click the Use different template button to open the theme selection window and choose your new theme. When you switch templates, most of the content will disappear, so you must use saved sections and modules to rebuild the entire page.

Option 2: Create a New Page. If you want to use predefined layouts but don't have Content Staging, you can create a new page, select the theme template you want to use, and build out the page from scratch. Once you're ready to go live with the new page, rename the URL path of the old page to include "-old" at the end, archive it, and then set the URL path of the new page to the one you're replacing and publish.

Option 3: Use Content Staging. If you have Content Staging, you can seamlessly replace pages with new ones without downtime. To access Content Staging, go to the Website pages dashboard and click More tools in the top right corner. Then select Content staging from the dropdown menu. From there, you can stage a blank or cloned page, choose your new theme template, and then build out the page as desired. Once you're ready to go live, return to the Content Staging dashboard, select the pages you want to publish, and click Publish all to the live domain to publish the changes.

Remember, no matter which option you choose, review your work and publish when ready!

Section 06

How to Set Theme Templates on Blogs

Other than website pages, updating your blog to use new theme templates may also be necessary. Watch our video below or follow our steps here:

1. Click the gear icon in your portal header to navigate to the Settings page.
2. Look for Tools, then Website, and finally, click Blog in the Blog settings dashboard.
3. Set the Current view to the blog you want to update or select Create new blog or Import blog to create a new blog.
4. Click the Templates tab, and under Blog Post Template, choose Change template from the Actions button. Select your theme and the blog post template.
5. Next, update the blog listing template. Under Blog Listing Page, click the Actions button and select Change template. Choose your theme and the blog listing template to use.
6. After choosing a template for the blog listing, the page editor will open. This is fully drag-and-drop. You can add or remove any modules you want. Make your changes and click the Update button in the top right when you're done.
7. If your theme's Blog Listing module has an infinite load functionality, you may need to go back to the Blog settings, click into the Templates tab, and set the Number of posts per listing page to 100000000 to ensure that all posts are available in the infinite load.
8. To edit a blog post, go to the Blog dashboard by clicking Marketing, Website, and then Blog. You can either edit an existing post or create a new one.
9. Blog post templates mainly consist of static modules. Only the blog post body has drag-and-drop functionality. You can click any of the modules to change the settings or click into the Contents tab to view all the modules available on the page in a simple list.
10. In the blog post body, you can drag any available modules into a single column. Once you've finished editing your post and updated any necessary settings in the other page editor tabs, click the Update or Publish button in the top right to send the blog post to live.

Section 07

How to Set Theme Templates on System Pages

To set up your system pages, such as your 404, 500, subscription pages, password prompt, and membership pages, check out our video or use this step-by-step guide. 

• Navigate to the Settings dashboard by clicking the gear icon in your portal header.
• In the left-hand sidebar, click Tools, Website, and then Pages to access the Pages dashboard.
• Click the System Pages tab and select the appropriate template for each system page, including the 404 error page, 500 error page, password prompt, and search results.
• Click the Save button in the bottom left to save your changes.

Next, update your subscription pages by following these steps:

• Stay in Settings. Then navigate to Tools, Marketing, and finally click Email in the left-hand sidebar.
• Click the Subscriptions tab and select the templates you want to use for each subscription page, such as the Subscription preference page, Subscription update confirmation page, and Unknown contact subscription preferences (also known as Backup Unsubscribe).
• Click the Save button in the bottom left to save your changes.

Finally, if your theme comes with membership templates that you want to use for private content, follow these steps:

• Navigate to Tools, Website, then click Private Content in the left-hand sidebar.
• Click the Pages tab and select the appropriate template for each membership page.
• Click the Save button in the bottom left to save your changes.
• Once done with your selections, click the Save button in the bottom left.

Reach Out for Help With Your Theme

Now you should be up and running! There’s plenty more you can do in your HubSpot portal and many options and settings in your theme for you to play around with, but hopefully, this guide has helped you get through those first grueling steps of going live with a marketplace theme.

If you have questions or need support, don’t hesitate to check out our support website for more tutorials, frequently asked questions, and a way to contact us directly for help by submitting a support ticket.