Aug 18
2017

A Step-by-Step Guide to Building a HubSpot Landing Page Template with Belch.io

For those of you just getting started with Belch for the first time, here's an easy-to-follow step by step guide on how to use our desktop application:

 

1. Launch the Belch app
and then log into your HubSpot portal: 

(click here to try for free)

Once you log into HubSpot, choose which portal you want to connect with, so we can pull in hubSpot menus and forms from that portal, and publish directly to the portal for you.

 logging into belch


2. Pick a theme to begin building

We have a number of pre-built themes to help you get started, but each of these themes can be transformed into pretty much any landing page layout you can imagine using our builder.

 

pick-a-theme-in-belch.gif

 

3. Open theme settings to set global styles

The theme settings panel will let you control the header, logo, menu and typography globally, and set font sizes for all screen sizes.

 

template-settings-in-belch.gif

 

4. Use the Belch Builder to Add Content Blocks

We've already built the most commonly needed content blocks into your theme, but we've also given you plenty of control over how you configure and style those blocks so that each build can be unique.

 

adding-content-blocks-in-belch.gif

 

5. Upload new images direct to your HubSpot Portal CDN

Belch's OAuth 2.0 integration with HubSpot allows us to immediately upload any image you use directly to your HubSpot media library instantly.

 

uploading-images-to-your-hubspot-portal.gif

 

6. Use the Spacing controls to fine tune your design

We added spacing controls and borders to allow users to fully control the look and feel of their builds, which also means there's no need to pull in someone with CSS skills to get it all nice and tight. 

 

changing-padding-on-content-blocks.gif

 

7. Use the same WYSIWYG you know from HubSpot to edit content

The same easy-to-use inline editor you're used to seeing in HubSpot is presented here in Belch. No split-screen editing here. Just click on text to edit, and even upload images and video into rich text fields.

 

changing-text-in-belch.gif

 

8. Add and style your existing HubSpot forms which we pull in through our integration with HubSpot

Our OAuth 2.o HubSpot integration is at it again, allowing you to choose from your existing HubSpot menus and style them easily using our settings panel. No more ugly forms that don't convert.

 

adding-a-hubspot-form.gif

 

9. Save your new template for future editing and reuse for similar builds

Belch will store your themes for future use or iterations, leaving your theme settings in tact for consistency in the future.

 

saving-a-template-in-belch.gif

 

10. Use Belch's version control to pull up previous versions of the same template

Saved multiple versions of the same theme and revert back to any version using version control.

 

version-control-in-belch.gif

 

11. Once you're happy with your new HubSpot template, just click the PUBLISH-TO-HUBSPOT button in the bottom right of the screen and we'll inject HUBL code into your new template, and even publish a page for you to continue editing within HubSpot.

 

publish-to-hubspot-from-belch.gif

 

CONGRATULATIONS!

You just designed, built and published a brand new landing page for HubSpot without ever needing to call your developer. We'll even remind you where to go to find your new landing page draft if you're still in Belch after publishing.

8a. published to hubspot helper.png

 

Want to see an entire landing page built in less than 7 minutes?
Well, we we did that this week too. 

 

Like what you're seeing, but want a personal 1-on-1 demo with me?
Book a Demo on my calendar to set one up.
 
Build something great and share it with us to get featured: charles@belch.io

 

Alt text

About Charles Drengberg

Charles Drengberg is CEO + Co-Founder of Belch.io and has spent the past 5 years of his life helping businesses implement inbound marketing and sales strategies through his agency, Big Presence, based in Newport Beach, CA. When he's not working, he's either putting dents on golf course greens around Southern California, or spending time being a new father and not sleeping ever, not even a little on weekends. You can follow him on IG: @parlayaddict for baby photos and complaints about everyday things.