Go to your website pages
From your HubSpot Dashboard, navigate to Content > Website Pages.
Click on Create a new website page
Click on the Create a new website page button.
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.
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.
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.
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.
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.
Edit your page settingsTo edit your page settings, click on the Settings tab at the top of the website page editor.
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.
Below the Basic Info is the Advanced Options section, which emcompasses page settings, style settings, and template settings.
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.
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.
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.
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.
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.
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).
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.