Build an incredible online user experience for your business using HubSpot's website tools. With an intuitive drag and drop editor and pre-built themes, you can design and edit content across your website.
Not ready to straightway jump into building something as huge as a website? Don't worry. Because with HubSpot, you can also host specific parts of your site only, such as landing pages to get leads or a blog to gain more subscribers.
By the end of this guide, you will figure out how to set up and edit your existing theme template and work with modules, rows, and columns as the building blocks of your template.
So, let’s dive in!
Getting started with Template Customization
Organize your website resources and design a consistent design using templates and themes.
Templates are reusable layouts that act as the base for individual pages on your website. A theme, on the contrary, is a set of templates and other resources to streamline the content creation process.
You can either use HubSpot's free starter templates or themes or browse the Asset Marketplace to buy new templates and themes.
Now, let's jump to the steps on how you can edit existing HubSpot theme templates.
- With the layout editor in the design manager, you can instantly create your content layout without having to write any HTML code.
- In your HubSpot account, navigate to Marketing > Website > Website Pages.
- Select the template you want to customize. Now you're on your page, navigate to the theme editor.
- On the editor's left-hand side, go to "Design," then "Edit Theme Settings." This is where you can adjust your existing theme settings.
- Publishing changes to theme settings will update the styles across all the pages where the theme was used.
Add a new Section to your Template
- This is a simple drag and drop process by which you can effortlessly add new elements to the section.
- The process is explained in the given video. Like this one section, you can add as many sections as you want in your template.
- Let's take an example of one template. Watch the video clip to see how you can quickly edit your theme template.
Hero Slider Settings
- The Hero slider Settings can be fully customized. Users can add, clone, delete and edit the sliders as per their application.
- Content Setting: In this setting of the Hero slider, you can customize and edit the heading, subheading, button-text in the hero slider banners.
- Image Overlay Setting: This setting is used to add color to your slider, and you can adjust the opacity as well, which makes the slider more attractive.
- Slider Background Image: Here, you can update the background image with its width and height, respectively.
Content Setting
- Here, the heading and subheading can be edited by clicking over the "Edit in Expanded View" button. On clicking, you will get the options to edit the text, font size, color, etc.
- In the card section, you can edit the image and text. In this section, you can add the heading and Sub-content.
- Also, in this section, you get the privilege to adjust the alignment/spacing and background type, as shown in the section 1 banner. Here you can add the heading and subheading content using the rich text editor.
- Now it's time to edit the Template Series module. Here you get the option to replace and remove the icon accessibility options. Also, you get the privilege to style the icons by picking the size and color.
- After icon style, the rich text section can be edited. You have to use the same process for the following items as well.
- You will find the option to replace/remove the image, edit the alt text, size, maximum size, and add the link over the image, which is optional.
- After the image, the rich text section is editable and can be edited in the rich text editor.
CTA Setting
- In this setting, you get the options to edit, style, clone, and delete modules.
- You also get the options to change the button type, button text, button link, etc.
- Then you'll find two advanced options like solid button style and transparent button style.
- In Solid button style, you get the edit options like font size, background color, hover background color, font color, hover font color, border color, hover border color.
- In transparent button style, you get the edit options like font color, hover font color, border color, hover border color, hover background color.
Listing Module
- This section contains repetitious elements where you can either add the same elements or remove them.
- Then you'll find the option to edit the respective elements according to your preference.
Page Publish Settings
- Click on the Settings tab to customize your page title, language, meta description, and URL before publishing.
- The page title is a must to publish a page.
- Click on the Domains dropdown menu to choose your domain for publishing. In case you don't find the domain you want to use, work with your web developer to connect your domain to HubSpot.
- In the Content slug field, enter the rest of the URL for this particular page.
- Remember that the page title and meta description will be visible in search engine results.
Publish or Schedule your Page
- Before your page goes live, click on preview in the top right to see how your page will appear on different devices (desktop, mobile phones, and tablets).
- Once you're happy with your page's preview, click on publish, right above the preview button on the top right. Click on Publish now to publish your page instantly, or Schedule for later if you want to publish this page later.
- In case any required items are missing from your page, you'll notice an alert in the top right corner of the Publish button.
- Once you are done completing all the required items for your page, click on Publish.
Wrapping Up
Hope, by now, you have understood how you can customize a template or theme and use it to create and customize new pages. In case you have any doubts, please do let us know.
New to HubSpot and don't know how to get started?
Well, get in touch with us now, and our HubSpot experts will take care of the rest.
Editor: Richa Sharma
.svg){kind=small}
