How To Change Blog Listing Page Layout In Hubspot

Using a template lets you control the structure of different types of content on a blog, page, or email. You can create templates in the design manager by dragging and dropping modules. Learn more about building templates in HubSpot in thisAcademy lesson.

Please note: a Marketing Hub Professional orEnterprise subscription is required to build email templates. CMS Hub accounts can create emails using the drag and drop email editor.

What is a HubSpot template?

HubSpot templates set the structure of the blogs, pages, and emails, and your users create in the content editor. You can build a templates by dragging and dropping content modules to create a layout. To create a template using HTML instead, learn more about building a custom coded template.

The layout editor helps you convert an idea, sketch, or prototype into a responsive template for creating content.

Create a new template

In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
At the top of the finder, clickFile >New file

create-new-template

In the dialog box, click theWhat would you like to build today?dropdown menu and select Drag and drop. Then clickNext.
Click thetemplate type dropdown menu and select a type . While most default modules are available for any template, some modules are limited to certain template types. You can select the following template types:
- Blog: templates for individual blog posts and blog listing pages.
- Email: templates for emails.
- Page: templates for your website and landing pages.
- System: templates forerror, password prompt, and emailsubscription pages.
Enter a file name. When you're done, clickCreate.

Structure and customize your template

You can add moremodulesto your template using the inspector on the right-hand side of the design manger. Click + Add in the inspector to search for modules toadd to your drag and drop template layout. Learn more about editing your template's structure.

To customize the styling of your template, you can use the options in the inspector. If no specific modules are selected, you can add styling to the head of the template itself. Click amodule or group to access styling options specific to that component. Learn more about using the inspector to style your template.

Please note: it's not possible to attach CSS or Javascript files to an email template, but you canadd custom HTML markup, body classes, and inline styling to the template.

HubSpot Help article screenshot

Preview and publish your template

In the upper right, click Preview to see a preview of your template on a web browser .If you selectLive preview with display options , you can view your template as it appears on other devices.

Once you've finalized your template, click Publish changes in the upper right.

Once your new template is published, you can use it to create new pages or emails. A blog template can be applied to an existing blog in your blog settings.

Design Manager