Global Layouts/Wrappers

[#1]

Hi guys

I’m looking for a way to define a layout that will be used across all my pages on my Hubspot instance. When I say a layout I mean I have an idea HTML structure like the following:

<div class="page">
    <div class="header">...</div>
    <div class="mobile-menu">...</div>

    <!-- Template stuff would go here -->

    <div class="footer">...</div>
</div>

Is there a way for me to define this in a file, and then allow other templates to use this as a ‘parent’ template?

My reason for wanting this is that every page across my site will follow this format and to replicate this page structure in 10+ template files seems redundant.

Add in the fact that certain CSS classes might need to be added to modules options and you’re looking at quite the maintainability nightmare for people who want to edit this structure in the future.

Any other suggestions on how I might overcome these challenges are most welcome

[Derek_Gervais]

Hi @MikeyWallis,

HubSpot templates come with built in header/body/footer wrappers, which include all contents above, between, and below the drag and drop dividers, respectively. You can also add a distinct mobile-menu div to your header global groups so that it will appear on all templates. Check out the document below for some more info on the COS grid structure:

designers.hubspot.com

The COS responsive grid

HubSpot's drag and drop template layouts are built using a 12 column responsive-grid system. All drag and drop templates automatically include a minimal CSS file (layout.css) that makes the grid responsive across different screensizes. While the file...