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

  0 comments

First create an account on HubSpot https://app.hubspot.com/signup-v2/developers/step/join-hubspot

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

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

template

 

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

 

image_2019_04_18T07_35_00_608Z

 

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

 

image_2019_04_18T07_36_42_491Z

 

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

 

image_2019_04_18T07_37_48_778Z

 

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.

image_2019_04_18T07_38_46_003Z

 

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

 

image_2019_04_18T07_39_29_381Z

 

I have given the page name “Home “.

 

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

 

image_2019_04_18T07_40_27_584Z

 

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.

 

image_2019_04_18T07_41_22_679Z

 

 

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

 

 

image_2019_04_18T07_42_38_634Z

 

 

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

 

image_2019_04_18T07_43_35_080Z

 

 

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.

 

image_2019_04_18T07_44_56_245Z

 

 

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

image

image_2019_04_18T07_48_43_236Z

 

 

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.

image_2019_04_18T07_51_43_322Z

 

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.

 

image_2019_04_18T07_53_28_439Z

 

 

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.

 

image_2019_04_18T07_53_37_119Z

 

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.

 

image_2019_04_18T07_53_42_357Z

 

 

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.

 

image_2019_04_18T07_53_47_851Z

 

Add new comment