Stay up-to-date with the latest in marketing technology

    The Ultimate Guide to crafting Landing Pages for your website  with HubSpot

    Posted by Shantha Kumar on Mar 13, 2020 7:04:16 PM

    BO_WebsiteWithHubSpot_Blog1If you’re new to making landing pages for your website, this article will be the ultimate guide for setting up your landing pages in 2020. HubSpot offers some powerful and simple templates to help you get started. In this guide we will cover all the basics for you to confidently create beautiful attractive landing pages to keep your customers and clients impressed and engaged.

    Don’t forget to check out our blog post on best practices of creating web pages. Our guide is split into a few steps:

    • Step 1: Learning the Page Editor
    • Step 2: Editing your Page Content
    • Step 3: Using Styles
    • Step 4: Enabling follow-up emails
    • Step 5: Optimize your page for SEO
    • Step 6: Update your Page Settings
    • Step 7: Previewing your Page
    • Step 8: Publish your Page or Schedule for Later

    Content Credits: Hubspot

    Step 1: Learning the Page Editor

    To Create a new page from scratch:

    • Click Marketing in the dropdown menu and select Landing page
    • Click a template to use it as the layout of your new page
    • Give a name to your page, and press Create page. In your page settings give your page a public name for the search results. Before you publish it you need to give your page another title in your settings.

    To Edit an existing page:

    • Click Marketing in the dropdown menu and select Landing page
    • In your landing page dashboard, select an existing page and click Edit


    Step 2: Editing your Page Content

    You can edit the contents of each module included in your template within the content editor. If you want the ability to edit your page layout or add new modules to the page editor, use your web developer to add a drag-and-drop area to your page template.

    Edit content in a module

    You can incorporate content in two ways, directly into the blocks of content where the pencil icon is shown:

    BO_WebsiteWithHubSpot_Blog3Image Credits:

    Or go to the left side where the outline of a 3D box is shown; this is the list of modules and you can edit different sections of the page in there.

    Rich text, header, and single line text modules can all be modified directly in the page editor. The rest of your module types can be edited in the left panel editor.

    If your template has a drag and drop area or customizable columns, the modules can be edited or rearranged in the page editor or in the sidebar of the module.

    To undo or redo an action in the page editor, click the undo icon or redo icon in the upper left.

    Step 3: Using Styles

    Use the sidebar module to play around with the page's order and structure: experiment with column placement, form and other modules using the 'Styles' icon until you're satisfied with how it looks – always note that your form is the most important part of the landing page so make sure it's the first thing visitors can see:


    In the left panel, click the styles paintbrush icon to access styling options available for the module in your template. A sidebar panel will appear with the styling options for that particular module.

    Step 4: Enabling follow-up emails

    This sidebar tab also helps you to pick where your user will be routed to once they submit their form (see below). Typically this will be a page of thanks, expressing your gratitude to the customer and providing as promised the download You can easily add the link to the' redirect link' area (and make the thank-you page just like the landing page you're making).

    BO_WebsiteWithHubSpot_Blog5Image Credits:

    Step 5: Optimize your page for SEO

    In the top navigation, click the Optimize tab to open to the SEO optimizer tool. Here you can attach your page to one of your topics and review recommendations to improve your content.

    BO_WebsiteWithHubSpot_Blog6Image Credits:

    This is also the place that will notify you that you lack any key drivers for optimization, such as broken links, page length and title errors of the URLs. If anything needs to be fixed, it will be highlighted in this list; once it has been corrected, it will turn green as below:

    Step 6: Update your Page Settings

    BO_WebsiteWithHubSpot_Blog7Image Credits:

    To update your page settings and add some basic page information, click the Settings tab at the top of the page editor:

    • Internal Page Name: The Internal Page Name is the name you added when you first created the page and is referred to in the dashboard. It is not shown to visitors.
    • Page Title: The Title that displays in the tab at the top of your web browser when the page loads.
    • Page URL: The URL for your page. It appears in the URL bar within the browser when visitors navigate to this page. You can edit your page URL even after it's been published.
    • Add Page to a Menu: Add the current website page you're working on to a new or existing advanced menu in your content settings.
    • Meta Description: The content that will appear in search results below the page title.
    • Campaign: Associate your page to a HubSpot campaign. Select Add new to create a new campaign.
    • Featured Image: Click to toggle this switch on for a specific image to be featured when your page is shared on social media. Click Upload to select an image from your computer or Browse images to select an image from your file manager.

    Step 7: Previewing your Page

    In the upper right, click Preview to see how your page will appear to visitors to your page.


    Device Preview: Click ‘Open’ in a new window to see a live preview of your page in a new tab in your browser. This preview link will work before your page is actually published. Click ‘Copy Shareable Link’ to copy the link to your clipboard to share it with your team.

    Smart Preview: Click the ‘Preview as Dropdown Menu’ to preview how your page will appear for different contacts in your database.

    • Select a contact to preview how personalization will appear based on that particular contact's property values. Click the second dropdown menu to select a specific contact from your database.
    • Select a smart rule to preview how smart content on your page will appear to contacts who meet its criteria. Click the second dropdown menu to select a specific smart rule to preview.

    Device Type: Click Mobile + Tablet to see a live preview of your page on a phone or tablet device. Click Desktop to see a preview of how your page will appear on a web browser.

    Step 8: Publish your Page or Schedule for Later


    After you've added your content, optimized it for search engines, and previewed how it will look to visitors, you're ready to publish your page.

    • Click the Publish or schedule tab and select Publish now to publish immediately, or Schedule for later to publish this page at a future date and time.
    • If there are any required items missing from your page, you'll see an alert in the upper right corner of the Publish button.
    • Once you've finished completing all the required items for your page, click Publish.


    Gated content is one of the most important things your company can do to produce leads and establish trusting relationships with them. We hope that this article has been helpful in walking you through how to use the functionality of the landing page in HubSpot –get trained and we believe you can quickly begin to see positive results. For more information on building landing pages subscribe to the BlueOshan newsletter or Contact Us for a free consultation!

    Topics: Hubspot CMS

    Leave a Reply

      Subscribe Here!

      Recent Posts