How to make easy page development zone for marketers – kitchen sink!

Within HubSpot, we have come up with a great idea in which marketers can independently create web pages and landing pages without the help of the developers. This is in the form of drag and drop which can be called kitchen sink, as seen in the below image. HubSpot COS Design manager ( Beta Version ) has some great improvements in the custom module ( also adding the individual CSS and JS), so marketers can easily make it.

For this, we will create a prebuilt section by the custom module features in HubSpot for which the following process can be followed:

Planning:

In this, we will plan how many sections we will create, the brand guidelines, the colour of the theme and the features.

Section design:

In the section design, we will finalize the design which will be done with special attention to the section “UI & UX”. Only after this will the designer work for the section. In this process, we will also discuss the features used.

Section Development:

The developer helps in the development of sections, each of which will be created in HubSpot Custom module. After which a single template will be created for all the pages which will have a built-in module named Flexible Group, allowing for any changes to be made easily. A separate template will be created just for the blog page, which will include blog listing and blog post.

Documentation:

This document will only be made for marketers so that they can easily make pages by reading it. In this document, we will show the name of the section with the visual image of that section so that marketers can easily understand and follow the process to create a template or page.The above four steps will help marketers easily create pages, sections and such independently within HubSpot.

How does it work:

  • In the HubSpot account, navigate to landing page or website pages.
  • Click Create landing/website page.
  • Click on a template with a flexible model for the new page.
  • Give the page name, then click Create page.
  • Go to the sidebar and click on the cube icon then click on the add module. When the list of models will open, select the appropriate module.
  • Now we can make all the required changes like – image, text, color, size etc.

If you have any doubt, please feel free to share in the comments section. I would like to learn from you.

Team Znbound
Table of Contents