create a Hubspot landing page with static HTML + CSS

Developer Support CMS Development
1

Hi

I’m planning to create a landing page with an original design using Hubspot. I’d like to create a custom module if possible, but first I want to publish the page, so I’m thinking of creating an LP with static HTML + CSS. I’m planning to store and publish HTML and CSS files using Design Manager, but are there any precautions I should take?
I understand that since it is not a custom module, A/B testing and smart content will not be available.

We plan to gradually make it possible to change text and images using custom modules.

2

Hi @y-nara

You’re on the right path with your approach! Using static HTML and CSS in HubSpot’s Design Manager is a great way to build landing pages, especially if you plan to enhance them with custom modules later. Here are some key things to keep in mind:

Best Practices for Static HTML/CSS Landing Pages in HubSpot

Organized File Structure: Keep your files well-structured in Design Manager. Use clear naming conventions and folders for CSS, images, and scripts to make future updates easier.

landing-page-name/
├── css/
│ └── style.css
├── images/
│ └── hero-image.jpg
├── js/
│ └── script.js
└── index.html

Responsive Design: Ensure your page adapts well across different devices using media queries. If you’re not using HubSpot’s built-in responsive framework, make sure to handle responsiveness manually.

HubSpot COS Compatibility: Since HubSpot doesn’t support server-side code like PHP, stick to front-end technologies (HTML, CSS, JavaScript).

Use Relative URLs: For images, CSS, and JavaScript, use relative URLs to prevent broken links if files are moved within Design Manager.

Thorough Testing: Test your page across different browsers (Chrome, Firefox, Safari, Edge) and devices to ensure consistency.

SEO Optimization: Add proper meta tags (title, description, keywords) in the <head> section for better search engine visibility.

Form Integration: Use HubSpot’s embedded form code instead of creating custom form handlers to ensure seamless CRM integration.

Tracking & Analytics: Verify that HubSpot’s tracking code is correctly implemented to collect visitor data.

Gradual Module Integration: As you transition to custom modules, you can either:

Convert sections of your static HTML into editable modules.

Rebuild sections entirely with custom modules for better long-term flexibility.

Maintainability: Document your code clearly to make future updates and team collaboration easier.

Version Control (Optional): If comfortable, use Git or another version control system to track changes before uploading to HubSpot

3

Hi @GRajput

Thank you for contacting me.
I was able to provide detailed information and confirm that there were no problems with the content, which gave me confidence in what I was trying to do.

4

Hey @y-nara,

it all depends on what you’re looking for.

Static HTML & CSS can be a good approach, but from a marketers/editor perspective it might be not the right one.

Something I ask every company I’m start working with is: do you want to have more flexibility or more “compliance”. Depending on this will be my setup. For instance if the company tells me “we want 110% design compliance” it means that editors will be restricted to content editing in the custom modules and might only have an option to choose the premade design from. If the company tells me “we want full flexibility” it means that editors will have full control over everything, but it may also result in results that are not design-compliant. Your page, your desicion. :slightly_smiling_face:

From my experience static HTML & CSS templates are great if you don’t want to provide to many options to editors, be more on the compliant side of things but this has the drawback that if you need to change something, you will have to apply the changes in the template and then those changes will be applied to all pages that are using this template. Can be benefitial but also some sort of drawback since you might end in a situation with several, almost identical templates which will be quite hard to handle in the long run.

If you’re looking for more flexibility, I’d recommend to create a theme with drag&drop templates(dnd_templates). Those allow your editors to edit pages individually while still using the same template. Furthermore you can set up whole “reusable” sections for common used content/layout. Or you can create “row-modules” with dedicated layouts and functions(those are also possible in static HTML templates)

Note: Once you’ve create a page with a dnd_template and change something(space, text, image…) HubSpot will automatically create a dedicated and not accessible version of the template. This is good since future updates to the theme won’t affect existing pages.

As for custom modules - endless possibilities here :slightly_smiling_face: So congrats on the choice to use them. Can you tell me, what you want to create?

Hope this helps.

best,

Anton

5

Hi Anton

Thank you for contacting me.
I didn’t differentiate between dnd templates and custom modules, so I got a good perspective.
I think making everything flexible would take about 3 to 5 times the development time, so I think it would be better to implement custom modules and dnd in stages.
thank you.