Skip to content
Documentation Ocean Pro Theme

Setup HubSpot blog templates

How to use Ocean templates in your blog.

Blog templates

How to set up templates for the Blog Listing and Blog Posts pages in HubSpot

blog

About blog templates included in Ocean Pro Theme

Ocean Pro has two blog templates, one for the listing and one for the posts.

In the case of the listing you can create unique listings using the drag and drop builder of the page editor.

For blog posts Ocean Pro has 7 styles along with more customization by adding or removing certain elements.

Let's see how to configure blog templates.

Choose the templates for the list and the blog post.

Important: The blog post template must be selected when the global header and footer are configured, as changing them will take effect immediately.

Choosing the Ocean templates on the Blog

Step 1: Access the blog settings by clicking here

There is a template for the blog post and another for the list.

blog_template_hubspot

Step 2: Select template click on Actions and then on Change Theme:

template_blog_post

Step 3: Choose the child theme you created from Ocean Pro.

Blog post template

To adjust the style and other details click on Edit theme settings. 

blog_theme_settings

You can make the available settings. To make the settings for the blog post template, follow these steps:
 

Access the list of Themes and Ocean Pro: View theme.

themes_cms
Click on the Blog options

select_blog
Change View on: Ocean - Blog Post

View-on
Select any style for blog posts from the 7 different styles

blog_post_theme


Blog listing page

Ocean Pro blog listing template was created with the new drag drop version, so consider the following:

If you previously had a blog, it may be necessary to activate the new experience.

new-experience

You can access your listing page with drag and drop: Blog listing.

This applies only to users who already had an active blog using another template:
When you change the Blog Listing template to the Ocean Pro one, you will be able to edit it, but it is likely that the modules they have are those of the other template, you simply have to delete them and drag the ones included in Ocean Pro.
 
The module used in the Ocean Pro template is Blog Listing, you can add other modules as you prefer.
 
Pro Tip: Do not add modules above the list as the same module works for author and tag pages as it can cause a bad experience. You can add the list in two columns to put other modules in the extra column or below the blog list module.
 

To adjust the blog list, choose the blog post, if it already exists you must change it from the page.

listing_blog

On the listing page in Settings, scroll to the Template part. Click on Use different template, choose the child theme that you have created and the list.

edit_template_blog_page

In the case of the list there is a custom module Blog listing.

You can change the style and hide elements that you prefer not to show.

blog-listing

Remember that you can reduce the width from the section, or place a background color.

Apply the best arrangement and styling using the options in the Styles tab.

Layout: Cards, 3 columns

filter_columns_3

Layout: Cards, 2 columns

filter_columns_2

Layout: List

filter_list

Just remember that the template for posts should only be changed when everything is ready, the list template can be edited and previewed without clicking the publish button until everything is ready to go live.

Excellent work.