Mastering Section Templates for Website Creation in 5 Easy Steps

Section Templates are one of the template types you will find in the CMS Hub of HubSpot. This tool enables you to pre-structure components of a website. By utilizing these templates, users of your theme can easily incorporate those sections into pages using the page editor.

Today, we will explore the power of Section Templates for website creation. Our experienced developer shares valuable tips and insider hacks—even for non-developers. Get ready to elevate your website design with these insights and unleash the true potential of Section Templates.

When building websites or web assets, like landing pages or website pages, it is a good idea not to start from scratch. Developers can use the HubSpot Boilerplate theme or install some HubSpot theme from the marketplace in their HubSpot account. Building quality websites can take time. With sections, content editors can pre-scaffold parts of pages to make website building faster. 

Sections are a powerful tool for building dry themes that offer guardrails and flexibility for content creators. Inside a HubSpot theme, we can find page templates, modules, and also, section templates. Those are very useful tools to create pages in minutes. 

How To Easily Create A Section Template in HubSpot CMS If You Are Not A Developer

It could happen that content editors are happy with the default templates a theme can bring, however, if they want to create something new, they can recycle some sections from a specific template. From there, start building a new and creative layout. They can achieve that by saving sections and using those in the new page they are building.

These are the steps for doing that:

1. Create a website page or landing page and select a template.
Creating Website Page - Image
2. Go to your favorite section and click on the dropdown button to save the section.
Save Section - Image
3. Set a name and a description for your saved section so you can look for it later.

Naming the section - Image

4. Now that the section is saved you can create a new page and in the content editor, you should click the plus button to add a new section.



5. A modal will appear and there you will find the saved sections. Now you are able to select the sections that were saved.

Selecting Sections - Image
  1.  

USE DEVELOPER MODE TO COPY THE CODE OF A SECTION:

If you need to create a section template instead of a saved section, you can easily generate the code using the “developer mode” parameter.

First, do all the necessary edits you want from a module inside a section from the content editor using the editor fields. Then go to the URL of the editor page and add the following parameter “?developerMode=true”


Link - Image


Now that the developer mode is active, go to the section you want to copy the code from and click on the dropdown button.

Copy as HubL - Image


Now you can copy the code of the section by selecting the “copy as Hubl” option.
All the necessary drag-and-drop code is now in your clipboard. So instead of developing the code from scratch, you just need to paste it into a template.
Section Templates offer a time-saving solution for building high-quality websites. By pre-scaffolding parts of pages, content editors can expedite the website creation process. 

Additional resource:
How to Create a Section Template in the CMS Hub

At InboundAV, we are proud to be a HubSpot Platinum Partner and a full-service business development agency. Whether you need assistance with Section Templates or any other aspect of your digital strategy, our dedicated team is here to help you thrive. Contact us today and let's take your business to new heights together.

Talk to us