Marketplace
Important! This documentation is old, and a lot has changed in HubSpot since we released Act version 1. If you are still using Act version 1 we recommend saving these pages for later reference. This documentation will be deleted soon.

How to redesign your existing HubSpot site using Act Theme

If your HubSpot website is built on the old CMS or COS platform and you want to redesign it using Act Theme, we recommend re-building your pages from scratch using Act templates, instead of working on existing pages and just swapping the template. This way, you can avoid any issue caused by:

  • legacy styles
  • incompatible code
  • components or content not responsive on mobile, etc.

Starting clean is always the best approach for a brand new look and feel.

We also recommend building your new pages under the Content Staging environment. Then, you can simply go live when everything is reviewed and ready.

Please learn more about this powerful feature and how to use it by visiting the official HubSpot Academy: How to redesign and relaunch your site with Content Staging

Avoid these common mistakes:

Do not copy/paste content from WYSIWYG editors

Do not copy content from WYSIWYG editors and paste it directly inline or in Rich Text modules, because that can cause strange formatting and unresponsive content. Instead, please follow these recommendations from the HubSpot Academy: I copied and pasted from Microsoft Word and now my formatting is strange

If you are confident your Rich Text content is correctly formatted and just need to copy/paste it from one Rich Text module to another, you can do so simply by clicking the source code button in the toolbar and copy/paste that code to the new module's source code:

HubSpot Rich Text Source Code

Do not just swap templates

Do not edit or clone your existing pages, then just swap their templates with different ones.

Templates usually have different type and number of modules. That means not all your content will be placed in the right modules, or even migrated.

Most of the times, it is faster and simpler to just re-create that page from scratch using your new template.

Make sure your old scripts or assets don't interfere with your new theme

If you have scripts or other assets in Content Settings > Page Publishing > Site Header HTML or Site Footer HTML, please make sure they don't interfere with your new theme. They may also increase your new website's page loading speed by calling unnecessary resources.

We recommend moving those assets in a Custom HTML or HubL module inside a global group (usually, your old global Footer) after everything else, and make sure that group is included in all your old templates (used by your current live pages), at the very bottom.

Also, make sure this change doesn't affect your live pages. Sometimes moving scripts from one place to another (example: from Site Header HTML to Footer) causes those scripts to stop functioning correctly. Therefore, you should test your pages after this change, and make sure you can revert the changes back if anything goes wrong.

Once you've done that and your Site Header HTML and Site Footer HTML are clean (or at least don't contain scripts or styles that can affect your layout), you can proceed with building your new pages using Act templates.

Do not mix themes

Assets and components from different themes should not be mixed, because they can cause conflicts or not work properly with other themes.

For example, adding a stylesheet from another theme, a custom module, a global header, a custom slider or any other external component to an Act template is not recommended, unless you know what you are doing.

Notes:

  • All custom modules compatible with Act Theme are named like this: "Act Theme - ...".
  • Custom modules built for other themes should be used only with templates in those themes (example: Team Member Module, Icon Module, etc., are meant to work with your default HubSpot theme).