How to create a HubSpot CMS template out of HTML/ CSS OR PSD / illustrator / XD / Sketches


First create an account on HubSpot

Click on the link given above and follow the registration process.

After successful registration you need to create a landing page. You will find create landing page link in sub-menu of marketing main menu.



When you click on landing page sub-menu then following page will appear.




In Next screen select a template. You need to select template from "my templates" tab according to your needs.




If given templates does not full fill your needs listed in my templates tab then you can buy template from marketplace tab.




In my example I have selected this template “Vast Homepage”. I selected this template because i had to create a 3 column layout with banner.



Then click on selected template. A pop-up will be open to give the page name.




I have given the page name “Home “.


Home page has been created. Now you can edit existing template according to your needs.




In order to check what is completed till now, it needs to publish the home page. In setting tab it needs to fill the page detail. After putting required details publish the page by clicking the publish button given in the top right section of the attached screen below.





After publishing the page you will be prompt to this screen where you will get URL for created home page.






You can switch from landing page to website page and vice versa





By default there are three menus. If you want to add edit then you need to click on setting icon, which will be on top right.





On this page there will be link in left bottom navigation under website menu.





Here you can edit add menu

On same page you can change logo and favicon. You need to click on pages under website in left side menu.



If you want to replace banner with slideshow then you need to follow steps given below.

There will be design tools link under Marketing > Files and Templates > Design Tools

On this page you can edit template. Here you can edit structure of an template and add section according to your needs.





Here I have deleted banner area.


Now you need to add image gallery module from add tab. For this you need to click add tab and search key image gallery.

And drag and drop that module where you want to place slide show.




Now click on publish button in top. It will show all changes made.

I will create one slideshow on the home page that is common in any website. Go to the below given menu to edit landing page

Marketing > Websites > Landing Pages

And edit your created home page.

Then click on image gallery section and in left setting tab will open where you can Add / Edit image and caption.





Now publish your changes then you will able to check slide show. Great! we created slideshow for our home page template section.

Similarly, you can edit any section on this page according to your needs. You can remove/ add any section.

In My case i got my HubSpot homepage template like below attached screenshot.




Add new comment