Integrating your WPHubSite WordPress website with HubSpot is extremely powerful. The ability to drag and drop any type of page you’d like with WPHubSite’s Site Builder is even more powerful. If you can dream it then you can do it with Site Builder.
Site Builder is an easy yet powerful drag and drop page builder that sits on top of WordPress to make it easier to create complex pages. You can still use the old WordPress way of creating pages or even Gutenberg, the newer way, but Site Builder is the most powerful.
Because part of the ease of using WPHubSite is the drag and drop Site Builder, we’re going to cover it almost exclusively. At the end of this article, we’ll point out a few things you need to know if you choose to use the standard editor, though.
Table of Contents
- Create A New Page
Create A New Page In WPHubSite
Step 1: Open your WPHubSite WordPress website admin dashboard by going to your website address with /login/ at the end. For example, type in yourdomain.com/login/ or websitename.wphubsite.com/login/.
Step 2: Hover over the New item on the top bar and click the Page link. You can also access all your pages and create a new page in the main menu under Pages.
Update All Page Settings & Options First
Before you start getting into the details of adding content to your page and formatting it, there are some settings that need to be properly set up. This section will help you make all these updates and understand the general functions of the back end of pages.
Site Builder is used on the front end so you can both edit a page and see how it will look in the same place. You will still need to make some changes on the back end, though. It’s easy to go back and forth between the front end and back end of pages using the Site Builder link in the top bar for front end editing or the Edit Page link to access the back end.
Now for the settings that you should be aware of at the least and in most cases need to update before editing your page.
Step 3: Update your page with the name of the page. You can name a page whatever you want but it’s good to keep it under 55 characters. This title will be used for SEO (search engine optimization) and can also be used in the Site Builder so you only have to update it one place if you need to make a change (we’ll get to that later).
Item 4: There’s nothing you have to do here but be aware of these settings. When you create a new page it’s automatically in draft mode. That means it’s not visible to anybody who’s not logged in with the correct permission. It’s recommended that you keep your page in draft mode until everything is ready on it and you’d like to make it public by publishing it. You can also preview the page from the back end or you can schedule a date and time to publish the page.
Item 5: Nothing to do here either but it’s an easy way to see the current status of the page. It’ll show whether the page is in draft mode or public. It’s also possible to change it from public to draft. If the page is in draft mode you can select the immediately link to select a date/time you’d like it published. When the page is published and public you’ll see the date and time it was published. This date can be updated which is great for blog posts but not really useful for pages.
Step 6: This only shows up if you’d saved your page to draft. Make sure you always do this and see what’s in the URL slug box. It’s likely that the URL slug is awfully long and full of useless words. What does it do, though? This box determines the URL of the page you’re on. So, if the slug box says contact-us-and-learn-more-about-us then the URL of that page will be domain.com/contact-us-and-learn-more-about-us/ which is horrible.
The slug is automatically created based on the name you’ve given your page in the title. So, in the example the title of the page was likely Contact Us And Learn More About Us.
It’s always best practice to update the URL slug to something more manageable such as contact-learn-more. This will create a nice clean short URL for this page of domain.com/contact-learn-more/ or even better for a contact page simply domain.com/contact/. A URL slug should contain one to five words unless absolutely necessary.
Step 7: You can upload a featured image for any page on your website. It’s absolutely not necessary to set a featured image for pages and most pages don’t have one. It’s a different story for blog posts, though. If you do use a featured image it’s best to use a good size image (at least 800px by 400px) and keep them standard across your pages.
Step 8: Pages don’t usually have comments so it’s a good idea to turn this off. If for some reason you do want to allow comments then turn this on. Whether comments actually show up is highly dependent on the page form at in the Site Builder so they may not even show up even if you turn them on.
Step 9: Pages can be contained as sub-pages beneath other pages. For example, you can create an about page and as pages nested under those you can have team, headquarters, etc. If you’d like to do this then just choose the page you’d like this page nested under here. Keep in mind that this will also affect the URL of this page. It will create a URL structure like this: domain.com/main-page/sub-page/ and so on.
This is only the page structure for the URL of your page and how it appears for search engines, you still need to add the pages to your website menus and indent them a bit to make them sub-pages in your navigation also.
Step 10: When you went through the WPHubSite Theme customizer you set defaults for how pages are displayed. You can overwrite those settings in this section and disable certain features.
Note: We highly recommend you disable the title if you’re using the Site Builder and always disable the featured image. You will likely put the title on your page using the Site Builder because this gives you more control. As for the featured image, turn it on and see why we recommend leaving it off for every page.
Step 11: WordPress is built with a page and post (blog posts) editor called Gutenberg. It has become more advanced in the past few years but hold nowhere near the power of the WPHubSite Site Builder. If you would like to explore Gutenberg then select Standard Editor which will change the page you’re looking at to use Gutenberg. If you ever choose to go with the Site Builder then it’s easy to convert a page and all content will be loaded into the Site Builder (not with the exact formatting, though) and you will lose nothing.
You will almost undoubtedly want to click the button for Site Builder. When you click this button it will save your page settings and page as draft and bring you into the Site Builder front end editor. You will see the page as it will appear to visitors. It’s quite a slick drag and drop page editor for WordPress and rivals the drag and drop functions of the HubSpot CMS. This is the power of WPHubSite.
Design Your Page With Site Builder
This is where the good stuff happens. The design of your page will come together and you’ll learn the ease and power of the drag and drop WPHubSite Site Builder. The simplicity and power still amazes us every day.
There are some steps involved in this and some items are simply descriptive to help you understand the interface and how it all works.
The Site Builder settings menu.
Before we get into the process of adding modules, columns, and rows to the layout, let’s take a step into the Site Builder menu. This one is outside the normal process because only a few of these options will regularly be used in designing your page with the WPHubSite Site Builder (only preview and responsive editing).
So, the Site Builder settings menu is always accessible by clicking the menu drop down in the left top of the window. It also shows you what item you’re editing. Click the box with the drop down labeled A.
Now for defining what every part of the editor is:
- Publish Layout: This can be used just like the final steps in the help article but instead of clicking Done and then Publish, you can skip right to the Publish step.
- Save Template: Any page can be saved as a template which you can then easily load into a new page (or replace the contents of a page). This is great for content pages that will be laid out identically.
- Duplicate Layout: You can duplicate the page you’re on to a copy that you can then begin editing as a new page that looks identical. This is useful when you want a copy but you will only need it once so a template would be overkill.
- Preview Layout: This is handy because you can see how your design will look while you’re editing it. You can also choose to preview it in tablet and mobile modes.
- Responsive Editing: If you’d like to edit the current page in either tablet or mobile this is a great way to do it. The icons that are next to some editable elements in Site Builder will also put you in Responsive Editing mode for tablet and mobile modes.
- Revisions: If you have revisions saved of your page then you can restore a previous version. Keep in mind that a revision typically created only when you publish the page.
- Layout CSS & Javascript: These settings only apply to the page you’re on so if you need certain CSS rules or javascript only to apply to this page then you can put them in this section.
- Global Settings: There are several settings that you can control globally which are important to set up before you do too much. Important settings you should always set first are padding and margins for rows, columns, and modules. You can also control the breakpoints which are the pixel widths that determine what’s a desktop, tablet, or mobile. Also, you can insert global CSS rules and javascript for the entire site in the respective tabs.
- Site Builder Pro – Global Settings: You can choose whether you’d like the Site Builder to adopt global settings from the scene or not. Our recommendations is to leave this setting alone which is No.
- Change UI Brightness: In case you prefer a dark interface, this toggles between light and dark modes.
- WordPress Admin: A quick way to access different parts of the WPHubSite WordPress admin dashboard.
- Help: Shortcuts to help for the Site Builder including a link to this knowledge base and the support page.
- Keyboard Shortcuts: A list of all the keyboard shortcuts you can use in WPHubSite Site Builder.
There are also keyboard shortcuts shown to the right of each item on the menu.
Onward to creating your own page with the power of over 70 modules!
Placing a module on the Site Builder layout.
Item 12: This is the layout where you can drop any type of module, rows, columns, or more. When you start a new page the layout is blank but it will take the form of your first module as soon as you drop something onto it.
Step 13: Click the + button to open up the drawer with everything you can put on the page.
Item 14: The default tab selected is Modules which contains all the elements you can drop on your page layout. There are more tabs which contain different features you can use in Site Builder.
- Rows: You can place a row with one or more columns or even different pre-formatted rows. One you drop a row you will be able to add more to create columns and can even format the width of each column. Everything can be changed later so don’t worry about getting rows and columns perfect. You can also save and access rows on other pages (more on that later).
- Templates: There are hundreds of different page templates you can use which can either replace this page or append to the end of it, your choice. You can also save your own templates for use on other pages.
- Saved: Access all your saved rows, columns, and modules from this tab.
Item 15: Each tab has a drop-down menu immediately below it which lets you select between different types of items that can be used on your page.
- Modules
- Standard Modules (everything you should need).
- WordPress Widgets
- Saved Modules
- Rows
- Columns
- Prebuild Rows (this one drops down into tons of different types of prebuild rows you can use on your page).
- Site Builder Pro (these are pro prebuild rows that provide even more options for rows that are all prebuilt for you).
- Saved Columns
- Saved Rows
- Templates
- Landing Pages
- Content Pages
- Template Cloud (even more landing pages and content pages for you to choose from).
- Saved Templates
Step 16: Drag the Heading module onto your page layout and drop it. This will open up the Heading settings menu.
Updating module settings.
Item 17: These tabs let you switch between options for each module. Some modules have 3 tabs while others may have 4, 5, or even 6.
- General: The content for the module typically goes on the General tab and there are also some options.
- Style: This allows you to format how the module appears. You can control things like alignment, color, font size, and more depending on the module.
- Advanced: You can control spacing, who the module shows up for, animations, and more in here. This is also where the settings are located for running AB tests which can be done for modules or rows.
Item 18: Type in the heading for your page title if you’d like to manually enter it. This is mostly useful for h2 and higher. H1 level headings are best connected to the page title (next up). If you want the heading to have all first letters capitalized you don’t have to type it in like that. In the format tab you can choose to “transform” the text types in the box.
Step 19: Click this little + icon next to the heading box to learn the power of connections. We’re going to replace the heading with the title of the page.
Step 20: Click the Connect button next to Post Title which will replace the content of this heading with the site title. Post title will also work with pages which pull the page title into the heading content. Just a bit of a misnomer.
Step 21: Choose h1 from this drop-down menu. We put the page title in here and page titles should always be h1. All the following heading modules on your page should be h2 and lower but organized hierarchical for good search engine optimization.
We’re not going to make the heading a link because that wouldn’t make much sense but for some modules filling in the link box would make sense. If you click the Select button then you can search for the page you’d like to link to which will fill in the URL or you (handy!).
Step 22: Click the Save button if you’re done styling and setting the advanced options for this heading module. If you’re working on a lot of modules it’s kind of a pain to always have to click save after each module. Good news! You don’t have to click save before clicking over to edit another module, row, or even columns. When you click on another item then the item you’re editing will automatically be saved.
Adding columns to the layout.
Item 23: Drag two columns right below the page title (which is a row on its own). When you’re dragging over additional modules or rows you can choose to drag them into the same row, nest them in the same column, or create a new row. Your choice will depend on if the new items you’re dragging over are related to what’s on the page already or a new section. It’s nice to have separate rows for content that isn’t related.
What each Site Builder toolbar does.
Item 24: The gray control bar signifies that you’re editing a row and has tools to perform several different actions. In order from left to right you can:
- Move the row.
- Open the row settings to makes changes such as background color, text color, height (great for making full-screen sections), background images, and dozens of more settings you can control
- Duplicate the row.
- Reset column and row widths to their defaults (usually evenly distributed).
- Remove the row completely (be careful with this one it’s hard to get it back, just don’t save your page and you may lose other changes!)
Item 25: The blue color control bar signifies you’re editing a module or column. If there’s nothing in a column or row then you won’t have the wrench icon. You can do the following actions with the control bar:
- Move the module unless there’s no module in the column or row in which case this icon will move the column or row.
- Open the settings window for all the module settings.
- Duplicates the module if there’s a module but will duplicate the column if there’s no module. If you duplicate a column it will create a new duplicate column next to the original column.
- If you’re editing a column with a module in it then all the column settings will be located in this icon. You can do many things to the column such as access the settings, move it, duplicate it, delete it, and reset widths. If the column has no module then you’ll only be able to access column settings and reset widths.
- Remove the module if there is a module or remove the column if there’s no module. When you remove a module then there will be a blank column which you can also remove.
Step 26: Click on the Column Settings option on one of the columns you have on your page. Column and row settings are some of the most important parts of controlling how your page is laid out and how larger sections appear (such as full screen height with a background image).
Editing the Site Builder column settings.
Item 27: Just like modules, there are several tabs that let you control how a column looks and functions. The style tab and Advanced tab have the most important settings. The advanced tab lets you control margins, padding, visibility, and animation.
Tip: If you want a whole column animated with the same animation, set the animation at the column level rather than at the module level. That way you only have to set the animation once and all objects in that column will animate the same. You can even combine animations by animating module and column separately which can create cool motion combinations.
Item 28: You can control the width of each column individually which is nice if you have 3 or more columns. The hollow blue circles that appear when you hover over a column also let you change column widths by dragging them. The setting is more accurate and easier to perfect, though.
Important: Just like in the WordPress customizer there are icons next to some settings that can be set independently for desktop, tablet, and mobile. If you only set them for desktops, the tablet will pick up the desktop setting and the mobile verison will pick up the default.
Item 29: Set the minimum height a column must be. This setting is good for when you’d like to align content to at least a minimum height. There is a drop-down next to many fields so you can select a different measurement. For this field, you can select between pixels, viewport height, and viewport width. You will find many different references to unit measurements in module, row, and column settings.
Item 30: This forces all columns next to each other to become the exact same height. That means the shortest column will extend to become as long as the longest column. If you select yes then a new option will appear which allows you to align the content of the column at the top, middle, or bottom of each column.
Item 31: The text settings allow you to control how the text looks in an entire column. This setting also exits for rows but the most specific setting will overrule all others. That means if you set the text color in a row to red and then the text color of one column to green, the entire row will have red text except for one column which will have green text.
Item 32: You can choose what that background is for each row and/or column. These are the options you have for setting the background:
- None: The background will be transparent and take on the background of whatever is behind the row or column.
- Color: Set a color for the background of which you can also set the level of transparency so you can see through the row or column to whatever is behind it. Transparency is a great way to make text more readable when it’s over a busy picture.
- Gradient: Choose the type of gradient (linear or radial), what direction it will go in, and the start and stop colors. It’s possible to set transparency for the start and stop colors or have transparency set on only one stop color.
Note: Rows have more options for backgrounds that columns do. It’s possible to add a photo background, slideshow, video, or parallax to a row background.
Finish editing a new page created with Site Builder.
Step 35: When you’re finished creating or changing everything on your page, click the Done button.
Step 36: Click on the Publish button to make your page live to the world. If you’re not ready to make your page live then you can also click the Save Draft button.
The Save Draft button functions in different ways depending on the status of your page. Here’s how it could function in different scenarios of your page’s status:
- Draft: The page will remain in draft and including all changes you made in Site Builder. Nothing will be published live yet. The discard button will discard all changes made in the session you’re in only.
- Published: The Save Draft button will save al the changes you’ve made during the editing session as a draft. Your page will still remain published and live but with the old version. Your new Site Builder changes won’t be updated to the live version until you click the Publish button. If you make changes and use the Save Draft button then choose to use the Discard button you will lose ALL changes you’ve made since changes were last published.
The Discard button can be a dangerous button if you don’t understand how it works. A good rule of thumb is to never use the Discard button unless you made only a few changes during an editing session and would like to discard all those changes. If you made changes in multiple editing sessions and have been saving those changes as draft then you will lose all your changes that were saved to draft.
The final page built with Site Builder.
That’s it! You created a new page for your WPHubSite website. Don’t forget that once your page is published it’s likely not in a menu yet. That would make it almost invisible to your users. You can either set this page as the home page or you can add the page to one of your website menus.
Keep in mind that this help article covered creating a page but not optimizing the page for search engines (aka SEO). It’s a good idea to review configuring your sitewide SEO settings and also how to configure SEO for pages and posts.
Design Your Page With Standard Editor
There are more basic formatting options with the standard editor but it has come a long ways. Just a year ago you couldn’t easily add columns, now you can. The WordPress standard editor is what you will use for blog posts but it’s not the best option for pages.
These steps will help you get started creating a page with the standard editor. Once you discover it lacks the power of WPHubSite’s Site Builder we’ll show you how to switch the page. Pages can be switched interchangeably from Site Builder to the Standard Builder and back again but with a loss of formatting and proper structure. It’s not recommended to switch back and forth between the two.
Step 1: Click the + icon next to any block to choose the type of block you’d like to add.
Step 2: Choose a block type you’d like for this block. By default when you press enter a paragraph block is created which lets you continue to type. If you’d like a different type of block then the + icon lets you do that. Keep in mind this list of blocks is scrollable and divided into sections which can be expanded by clicking on the section header. There are over 33 blocks to choose from including a special one just for HubSpot Forms.
Item 3: When you are on a new block these icons to the right show up which are a list of your previously used blocks. This is a handy way to quickly select the block types for the most important block types such as images and lists.
Item 4: The Document tab lets you change all the general page settings but when you’re on a block you’ll see the Block tab. The Block tab has all the custom setting specific to each block type. For the paragraph block, you can change the background color, text color, and more.
Item 5: This drop-down settings menu has lots more options for the standard WordPress editor. Some important options in the settings are the ability to enable/disable different block types, manage reusable blocks, and more. Another important feature in the settings menu is the ability to convert a standard editor page into Site Builder. If the Site Builder is enabled for a content type (typically only pages by default) then you’ll see a Convert to Site Builder option.
That’s it for creating a page using the standard WordPress editor. This editor is the same one used for blog posts so if you’re interested in seeing a full walkthrough of the standard editor, that’s a good place to look.
Creating A Page With Site Builder & Standard Editor Video
This video covers many of the details from this article for creating a WPHubSite WordPress page. An actual page is created in the Site Builder and also some of the basics are covered from the standard (block) WordPress editor.