How To Build HubSpot Landing and Website Pages

Host: Robert Gonzalez

September 8, 2020

Today we'll be taking a look at HubSpot's Landing Pages and Website Pages tools. We'll discuss how to make page edits, create new pages, how to make your pages look great across all screen sizes.

Click to Play Video


Getting started with website pages and landing pages: 

Full Transcript:

Before diving into the nitty gritty, let’s first define the differences between website pages and landing pages. Their editing interface, as we will see, are practically identical but the real difference between them is what kind of pages fit under them categorically. Website pages are your evergreen pages, pages that are at the core of your website and will be around for years to come. This includes things like your homepage, about page, and contact page.

Landing pages on the other hand are pages that are focused on conversion. Almost all, if not all landing pages should include a form and oftentimes includes a content offer such as an eBook. People often also choose to exclude the website's main navigation on these pages, so that the user is totally focused on the content this landing page provides. Let’s take a look at all of this in more detail!

To get to either website pages or landing pages, click on Marketing, Website, and then the appropriate website option. After doing so, you will actually find that each of these website tools, including blogs, exist under tabs that you can easily switch between. The only difference between the WP tab and LP tab, is that LPs have the option to organize their pages into folders. Other than that everything is the same.

The first set of options you will find are a set of filters. This includes the option to filter by domain, campaign, page type, and finally page state. This last option includes pages in draft, scheduled to be published, published, and archived pages. The “All pages” view does not include archived pages.

By hovering over a page, you will see several options to either edit or clone the page, and a more dropdown with several options including unpublishing, archiving, deleting, and more. You can also mass delete or archive pages, by selecting multiple pages at once.

Now that we have covered the basics, let’s take a look at how we actually create and edit pages. There are several ways to do this but we are going to be creating pages using templates with a flexible column. If you are creating your pages using either static templates or HubSpot’s new theme editor, check the description for links to videos on those topics.

To create a new page, click create page and then select website page or landing page. The process for both types is identical. Then choose a template, give your page a name, and then click create. From there, on the left-hand side page you’ll see options to add new modules. To add a module, cimply search for the one you want, and then drag it onto the page. Now once you have added a module, there are two ways to edit it. In-line or in the side pane. Custom modules like this banner, contain all their editing options in the side pane. This includes things like images and a text. Once you have made your changes, click apply and continue. Default HubSpot modules like this rich text, often allow editing in-line directly on the page like so. Modules on pages can also be rearranged or deleted if desired.

If you make any mistakes while editing, you have two main options to fix it. First is the undo and redo arrows located here and these are best used for immediate fixes. If you want to revert the page back to an earlier point in time, click here to find revisions, and select your preferred version.

You also have the option to do A/B testing, but we will cover that in a separate video.

Once you have the page exactly how you want it, there are several ways in which you can test your page, to make sure it is looking exactly how you want across all your devices. To do so, simply click the preview button here, and you’ll have the option to test several kinds of devices including desktop, tablet, and phone. You also have the option to open a preview link of the page in your current browser which you can then share with your colleagues. 

Now while these tools are useful, they aren't always totally reliable. So it's especially important to make sure to also check your page on other browsers, such as Chrome, Firefox, and Safari, and on actual devices like your iPhone, PC, MacBook, and Android.

Next, let’s take a look at settings. Here you can set the title for the page that will be seen by your users, as well as the URL, meta description, campaign and featured image. Page title and meta description are especially important, so make sure it is an accurate and succinct description of your page with key words and phrases so browsers can more easily identify what your page is about and you can rank for the topics you want.

Next is the optimize tab, which will give you hints and suggestions for how you might make your page more SEO friendly. Some of these things may not apply to you though, so it is up to your discretion.

Finally we have the schedule tab, which allows you to either publish your page immediately or have it scheduled to be published in the future.

Recommended Videos