How to create and edit website pages

Last updated: June 13, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise
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, navigate to Content > Website Pages.

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

Click on Create a new website page

Click on the Create a new website page button.

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

Choose the template for the page

Next, you'll want to 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 by converting a mockup into a template layout. To learn how to convert a mockup into a template layout, click here.

Once you've decided on the template you'd like to use, click on that template, give your new website page a name, then click create.

select-a-website-page-template.png

Add your content to the website page

Once you've created your page, you'll be taken to the Edit screen. Here, you can begin adding or editing your content. 

To edit the content in the modules of your page, hover over the module until you see a transparent-grey shade and pencil icon appear over the module, then click into the module to edit it.

edit-module.gif

You can also click the box icon on the left-hand side of your page to edit the modules on your page. When you click this icon, a list will appear of all the editable modules on your page. Click the module you'd like to edit and the pane on the left will show your edit options. Make your edits, then hit Save and go to module list at the top left. 

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.

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 paintbrush 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 Setting screen, you'll see a Basic Info section. This is where you'll want to add in the basic page information for search engines and browsers. 

1. 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 is what appears in the URL bar within the browser when visitors navigate to this page.
4. Meta description - this is the content that will appear in search results below the page title.
5. Campaign - from this dropdown, you can choose to associate your website page to a HubSpot campaign. You can also click the add new button to create a new campaign.
HubSpot Help article screenshot

Below the Basic Info is the Advanced Options section, which emcompasses page settings, style settings, and template settings.

You can click on the links to either Edit Head HTML or Edit Footer HTML which will allow you to add raw HTML snippets, embed codes, or tracking javascripts that will be added within the <head> or <footer> tags of your page. Insert your code into the pop-up window, then 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 and date" 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 Style Settings section which will allow you to edit the following:

  • Primary CSS File - this shows which Primary CSS file is set for the page and allows you to enable, disable, or use default from the dropdown menu.
  • 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 + Add 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 choose to Swap template if you'd like to use a different layout for your page or Edit template to go into the current layout and make edits. In this section, you'll also see the name and preview of the current template your page is using.

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. You can see some examples of actionable items in the screenshot below.

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, you'll want to head to 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: