How to Copy HubSpot Sections Into a HubL Code Template

  • read
How to Copy HubSpot Sections Into a HubL Code Template

HubSpot CMS has recently added the ability to copy sections built with the visual editor and then paste the HubL code into a template. Previously, this had to be done by manually.

Why you might want to use this

A designer or marketer could visually design the page. Get 80% there and then hand off to a developer to fine-tune the layout. Or templatize the layout so it can be easily replicated instead of having to clone a page.

Add the URL parameter below to the URL when editing a page.


Then reload. You will then see a header that looks like this.

If you hover over a section and click the actions dropdown menu, you will see the option to copy as HubL. Then you can add it to a coded template to templatize a layout building a visual editor.

Written by: Jacob Lett, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn

Category: Code Snippets
Tags: ,