How to create and edit website pages

Last updated: February 2, 2018

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Add-Ons: Website

You'll use the website content editor to create and edit the content for your actual website pages.

Follow the steps below to create website pages for your HubSpot-hosted website.

Go to your website pages

From your HubSpot dashboard in your Marketing Basic, Professional, or Enterprise account, navigate to Content > Website Pages.

main-nav-content-website-pages-2016.png

Create a website page

Click on Create website page in the upper right-hand corner.

create-new-website-page---website-pages.png

Choose a template for your page

Next, select a template to use as the structure for your page. You can search through the existing templates in your account, purchase a premium template through the HubSpot marketplace, or create a new template layout.

Click the thumbnail image of the template you'd like to use for your page. In the dialog box that appears, give your new page a name, then click Create page.

Add your content to the website page

Once you've created your page, you'll be taken to the editor where you can begin adding or editing your content. To edit the content on your page, hover over a module and click to make changes to the content and styling of that module.

edit-module.gif

You can also click the box icon on the left-hand side to see all of the modules on your page. Click the module you'd like to edit and make edits in the pane on the left. Make your edits then hit Save and go to module list.

edit-module-left-sidebar.gif

Add modules to layout (flexible columns)

If your template is using flexible columns, you'll see a plus sign icon on the left-hand side. Click this icon to see a list of available module types. Choose the module type you'd like to add to your flexible column, then drag and drop the module to add it to your page layout.

Please note: you will not see the plus sign icon on the left if your template does not have flexible columns.

add-module-flex.gif

Style your modules

Your modules will be styled by default based on the stylesheets that are applied to the page, but you can also apply some custom inline styles at the page level. To do this, hover over the module you'd like to style, then click the paint brush icon at the top left of the module. A pane will appear with the styling options for that particular module. 

style-module.gif

Edit your page settings

To edit your page settings, click on the Settings tab at the top of the website page editor.
edit-page-settings.png

At the top of the Settings screen, you'll see a Basic Info section. This is where you'll add in the basic page information for search engines and browsers: 

1. Internal page name - this is the internal name for your website page. You should have already given this a name when you first created the page, but you can still edit it here. This is an internal name to help with organization; your website visitors will not see this name.
2. Page title - this is the phrase that displays in the tab at the top of your web browser when the page loads.
3. Page URL - this is the URL for your page. It appears in the URL bar within the browser when visitors navigate to this page.
4. Add page to a menu - this allows you to add the current website page you're working on to a new or existing advanced menu in your content settings.
5. Meta description - this is the content that will appear in search results below the page title.
6. Campaign - from this dropdown menu, you can choose to associate your website page to a HubSpot campaign. You can also click Add new to create a new campaign.

Below the Basic Info you can click on Advanced Options to see more options which include page settings, stylesheets, template settings, and customizing your page's canonical URL.

You can enter code into either Head HTML or Footer HTML to add raw HTML snippets, embed code, or tracking javascripts to the <head> or <footer> tags of your page. Insert your code, then click Save.

 

HubSpot Help article screenshot

You can also password protect your page here. This option is helpful to use for the following:

  • Create a page on your website just for staff. Keep sales collateral and marketing materials here, where only your team can access them.
  • Create a "client-only" page on your website, post templates and client-specific materials there.
  • Have a page for resellers and partners to get advanced materials ahead of a product launch.

To turn on a password for this page, check the box next to Password protect this page, and enter your password into the text field that appears.

HubSpot Help article screenshot

You can also choose whether or not you want your page to expire at a certain date and time. This can be useful if you have to create a website page that has a limited offer or product you want to showcase. Check the box next to Set page expiration date and time to turn this feature on, select an expiration date, an expiration time, and where you want to redirect this page to once it expires.

HubSpot Help article screenshot

You'll see a Stylesheets section, where you can edit the following:

  • Domain Stylesheets - this shows you the CSS file that's set at the domain level and allows you to enable, disable, or use the default from the dropdown menu.
  • Template Stylesheets - this shows you the CSS file you have attached to the template this page is using and allows you to enable, disable, or use default from the dropdown menu.
  • Page-specific Stylesheets - this shows you any CSS files that are being applied to this page only. You can click Attach a stylesheet if you want to apply a CSS file to this specific page.

For more information about how these stylesheets are attached, click here.

HubSpot Help article screenshot

Within the Template settings section, you can click Select a different template if you'd like to use a different layout for your page. To edit the template that you're currently using, you can click directly on the template name to open a pop-up editor and make any changes you wish.

template-settings.png

SEO optimization

Click on the bar graph icon on the left-hand side to navigate to the SEO optimization section. Here you can input keywords into the text field for this particular page. Below this you'll see any to-do items -- these are actionable items for you to optimize your page. 

seo-optimize-icon.png

Preview your page

Also on the left-hand side menu, you can choose the eye icon to view the preview section. From here you can do the following:

  • Device preview - click on one of the icons here to view your page as if you were on a tablet, mobile phone, etc.
  • Smart preview - check the box next to Preview page as specific contact and choose a contact from the dropdown menu. This will show you the page as if you were that specific visitor viewing it; this can help if you're utilizing smart content on your page.
  • Shareable preview - click this button and you'll be provided with a live preview link that you can share with colleagues (even if your page isn't live yet). 
HubSpot Help article screenshot

Publish or schedule your page

Now that you're done editing your content, you've optimized it for search engines, and are happy with the look from your preview, select the Publish or Schedule tab.

From here, you can choose to Publish now or Schedule for later. Click the radio button under whichever option you prefer (if you choose Schedule for later, make sure you choose your schedule date and time), then click the blue button at the top-right to Schedule or Publish

HubSpot Help article screenshot

Was this article helpful?

Previous article:

Measuring Your Performance Project

Next article: