Skip to main content

HubSpot Landing Pages

A standalone web page created in HubSpot

C
Written by CMM Admin
Updated over 11 months ago

Create a Landing Page

  1. In the top navigation bar, click on Marketing and then select Landing Pages from the dropdown menu.

  2. In the upper right, click the Create dropdown menu and select Website page or Landing page.

  3. In the dialog box, specify a name and domain for the page:

    1. In the Page Name field, enter an internal name for the page.

    2. Click Create page.

  4. On the template selection screen, templates from your active theme will appear at the top of the page, while all other templates will be in the Other templates section at the bottom. If you haven’t selected an active theme, hover over a theme and click Set as active theme.

  5. Hover over a template and click Preview template to open a preview or Select template to proceed to the content editor.

  6. In the content editor, the editing options available depend on the page's template type and modules used.

  7. Customize your landing page template. HubSpot's landing page editor allows you to easily customize the design, layout, and content of your landing page. You can modify text, images, colors, fonts, and other elements to match your branding and messaging. Simply click on the element you want to edit and make the necessary changes using the editing tools provided.

  8. Add and arrange modules on your landing page. Modules are pre-built sections that you can drag and drop onto your landing page to add different types of content. Examples of modules include headers, forms, images, videos, testimonials, and more. You can add, remove, and rearrange modules to create the desired layout and structure for your landing page.

  9. Customize the settings and properties of your landing page by clicking on settings. HubSpot provides various options to control the behavior and functionality of your landing page. You can set the page title.

  10. Preview and test your landing page. Before publishing your landing page, it's important to preview how it looks on different devices and screen sizes. HubSpot's editor allows you to switch between desktop, tablet, and mobile views to ensure your landing page is responsive and visually appealing.

  11. Publish your landing page: Once you're satisfied with the design and functionality of your landing page, click on the Publish button to make it live. HubSpot will generate a unique URL for your landing page, which you can use to promote and drive traffic to it.

Make a Landing Page Multilingual

  1. In your HubSpot account, navigate to Content > Landing Pages.

  2. Hover over a page, then click the More dropdown menu and select Create multi-language variation.

  3. In the dialog box, click the Variation language menu and select a language.

  4. Click Create. This will create a clone of your existing page in the selected language.

  5. Replace all the English text on the page to the selected language.

    1. To switch between multi-language variations, click the Language dropdown menu at the top of the page and select a variation.

  6. To edit the language for a variation, click the Page language dropdown and select a language. This will automatically update the language slug in the Language field of the page URL.

  7. On the page editor, click on each module that needs to be translated and update text or images as needed.

  8. Translate the form as follows:

    1. Create another form as follows:

      1. Click on the form

      2. Under Content click Actions

      3. Under Choose a form and click Clone form

      4. Add Spanish text in the existing form name and click clone.

    2. Replace the text in the cloned form to Spanish translated text.

    3. Don’t forget to translate the thank you message as well.

  9. Click the Publish button on the top right.

Use a Language Switcher

A language module allows visitors to switch between translated versions of a page. This module will only appear on a page if multiple pages in its multi-language group have been published. Follow these steps to add a language switcher to a page:

  1. On the editing page, on the left side column, click Home.

  2. Add the Rich Text Tool module and customize the text to Choose your preferred language by clicking the pencil icon on the module.

  3. In the content editor, enter language switcher in the search bar of the sidebar editor.

  4. Click the Language Switcher module and drag it onto the page.

  5. On the left side column, click the Smart rules button.

  6. Choose category: Preferred Language and select English for the English page.

    1. If you’re doing this in a Spanish page, select Spanish language.

  7. Go to Language Switcher and in the Display mode, click Hybrid.

    1. This sets how languages will be displayed on your language switcher. Other options are:

      • Localized: the name of each language will appear in that language. For example, if you're viewing the English version of a page with a French translation, you'll see English and Français as the language names in the language switcher.

      • Pagelang: the name of each language will appear in the language of the current page. For example, if you're viewing the English version of a page with a French translation, you'll see English and French as the language names in the language switcher.

      • Hybrid: the name of each language will appear in the language of the current page, as well as in that language. For example, if you're viewing the English version of a page with a French translation, you'll see English and French (Français) as the language names in the language switcher.

  8. Click on all modules and set the Smart rules to the preferred language.

  9. In the upper right, click Publish or Update to take your changes live.

Advanced Features

The multi-language variations for a page combine to form a multi-language group. You can edit a multi-language variation or group from your pages dashboard. Navigate to your content: In your HubSpot account, navigate to Marketing > Landing Pages.

  1. Hover over a page with multi-language variations. This is indicated by the language globe icon.

  2. Click the right arrow icon to view all multi-language variations of the page.

  3. To delete a multi-language variation:

    • Hover over the variation and click the More dropdown menu, then select Remove from multi-language group.

    • In the dialog box, click Remove. This will make the multi-language variation its own page.

    • Hover over the page and click the More dropdown menu, then select Delete.

    • In the dialog box, type delete, then click Delete.

  4. To add a page to an existing multi-language group:

    • Hover over the page and click the More dropdown menu, then select Add to multi-language group. If your page is already part of a group, select Remove from multi-language group, then restart these steps.

    • In the dialog box, click the Select a primary page dropdown menu and select the primary page in your existing group.

    • Click Save.

  5. To switch which multi-language variation is the primary page in the group:

    • Hover over the page and click the More dropdown menu, then select Make this the primary page of your multi-language group.

    • In the dialog box, click Continue.

Did this answer your question?