Hi everyone. Today I’m going to talk a little bit more about content staging in HubSpot, specifically the HubSpot CMS. Right now I am in HubSpot and I’m going to navigate to marketing website pages and on the left hand side you should see something called more tools.
Now, you’re going to have to have the content staging enabled on your HubSpot plan for CMS Hub. It is included in both professional and enterprise. You can see content staging is checked in both types of plans. And if I hover over this you could see it says build out a brand new site without touching your existing web presence. Content staging allows you to build safely in a separate staging area, test changes and seamlessly take the new design live.
So you could see the different pricing here for CMS Hub. This is a new product so you might be grandfathered in with the type of a HubSpot plan that you have at your company right now but if not this is the pricing if you wanted to get the CMS Hub so that content staging can work. So if you do have content staging in your plan you would click on more tools and you would see content staging. Click on that. It would take you to the content staging portion of the HubSpot CMS management tool here.
And there are three different things you could have on here. You could have an unmodified stage draft or stage proof. So, these are the three different levels of stage content. Obviously, unmodified means that you haven’t touched it, you haven’t staged it. It’s whatever is on your website either published or draft. Then you have staged draft and staged proof. Now, the great thing about content staging is that it allows you to take a page and make a duplicate of that page and it’s in a sandbox. It puts it in a sandbox and you can change that page as much as you want. It wouldn’t affect the page that you’ve cloned. People still see that page that they may be used to but you’ve created a new page that you go work on that you could possibly make a copy of the template, update the template and update the page content.
Now, if I go onto a regular page, let’s just take this homepage for example, and I edit it, whatever changes I make in here and the editor if I hit save and update that’s going to be live. So you see that on the fly. But what if I wanted it to go beyond just simple changes to say text or images. Say I wanted to maybe revamp this page a little bit. I go back into my content staging and that would look at unmodified at home page new 2020. And what I would do is I would stage it. So you could stage this and you could either stage a blank page where you’re starting from scratch or you could do a stage clone page. With a clone page it’s going to take everything that was on that page as far as the content and the template that was applied to it and just make a copy of it so that you could work on it, update it. And then when you’re ready you could just replace the old page or the current page.
So say we’re going to work with a stage clone page which is what most people use for content staging, any stage of the page. So this version right here is a clone stage page. Whatever changes you make to this it’s not going to affect the whole page, the real life homepage. So I’m just going to exit out of that and you’re going to see it’s in stage draft. I go back in to edit and I can publish just the staging. By doing that, if I click on publish the staging it moves it down to stage proof which is one step below publish. So, just to walk through this with you I’m going to click on edit and I’m going to push this through to the next stage which is publish to staging. So I’m going to click on publish and keep on editing. That means you can continue to work on the page and I could exit there.
Go back into the content staging that you see. Now it’s no longer in stage draft it is in stage proof. Great. And a couple of things we could do here, we could continue to edit, we could view, we could even clone this one or revert it to draft or we could delete. So let’s view. If you click on that it’s going to open up the page and you can see it’s got a different URL from the URL. The URL here would be inecta.com but it’s got this different sandbox URL that if you give somebody a link to this they’ll be able to check it out but you could only access it through the link. It’s not like it’s going to be through the navigation on the website or through the search engines. That’s pretty much the way it works. It’s a private link. Unless you have it you can’t see it. And that’s great because then you could work on your new version of the page without having to expose it to the world. Only when you’re ready will you go ahead and publish it.
So as I look at this page and I go to edit… If you’re familiar with the HubSpot CMS and editing templates the way it works is, and I can do a video on this later, you have templates and then pages are based off of templates. So the main purpose of a developer or a development team is going to be to create templates that are easy to work with. For instance, this template makes it easy for the user to go ahead and change things without having to be a designer. They could change the banner heading, the button text, create links. It’s fairly easy to make these changes.
Now, if you wanted to make changes to save the layout then you would have to go into the template. So in order to do that, to find out what template this homepage is using, we would go into settings and then go into advanced options. And then, that’s a template that it’s using. Now keep in mind that this template is being used by not just this clone page but also the page that’s live. So what a lot of people do and what I do sometimes is I’ll make a clone of this. You’re going to see when I click on edit this template that’s going to give me a warning, other pages are using this template. The following two pages are using this template. Edit this template to update all pages that are using this template or clone this template to only update this page. So it looks like it’s showing two of the same but really what’s happening is one of these is the actual live on page and the other one is the clone page that is in content staging. So if you make any changes it’s going to affect both of these pages.
So what I’ll do is what I like to do is maybe clone and edit the new template or you could edit and copy it inside of the design manager. So I’m going to go ahead and edit this template. So whatever changes I make to this is going to affect those two pages remember. So what I like to do is I like to go in here in the HubSpot and I like to find the page because when you have it here in the tab that’s live or active you could see it here in your assets viewer. And you could go into file, clone. And you could just rename it. Let’s call it version two. See it’s there. Going back into this page you could use a different template. So I could select this template that I just created. It’s called Inecta Homepage 2020 Version Two.
You can see that it’s this one so this is the one that the actual live homepage is using and this is the one that we cloned. So, when we use this one we’re going to select this template and that’s going to apply only to the page that is in content staging, the cloned page. So now it’s using this one. So we could go into the design manager as a developer and make whatever changes you want to this template and it’s only going to affect this clone page. So once those changes are done and you’re ready to publish you go into stage proof and then you click publish. And what you would do is you would just click this button to publish. So it’s saying, “Publish to live domain. Tell us a little bit about what you’re doing. This will help you and your team understand it later.” And you could name whatever you want as far as the published job name and the published job description. And you’ll see that once you’ve published you’ll have a track record of all the different times that you’ve published stage content live.
So I’m not going to do this because I don’t want to replace that page obviously and I think it’s an obviously new page already, So I’m not going to do that but if you just follow this and keep going it’ll publish it live and it’ll replace the page that you cloned. And you can see the log here, all the times that new pages have been published. So, we did the same thing earlier for this homepage. It was replaced on a certain date, 09-18- 2020 at 5:39 PM, so it’s all going to be here in the log.
That’s pretty much how cloning pages and staging them works. It’s a great tool that you have in the HubSpot CMS for you to create different versions of your pages without having to worry about pushing something live that’s maybe broken and not working. You can test on different browsers. You can make absolutely sure that your changes look great before you even push the publish. And when you do that, it replaces your page that you want replaced and you’ve got a great new page and everything works great.