topic Re: Header Template Help in CMS Development

Header Template Help

CVirkBrown — Thu, 26 Oct 2023 20:14:22 GMT

Hi,

I'm having trouble getting one of our company's landing pages to switch to a new (slightly different) header layout. We're wanting to change some of the buttons on the header to show a different CTA, but don't have any luck with the CTA wording or link changing.

If you have any suggestions that would be great.

HubL_ISNAltHeaderCodingHubL_ISNHeaderCodingExample of current ISN Website HeaderExample of Alternative ISN Header with button missing (tried to change the CTA wording and link)

Re: Header Template Help

Jnix284 — Fri, 27 Oct 2023 00:31:57 GMT

@CVirkBrown it looks like you changed the code which changes the default content, but you haven't actually configured the button itself in the global content editor.

Once you configure the content for the header in the global content editor to include the new button text/link, it should work.

Re: Header Template Help

CVirkBrown — Mon, 30 Oct 2023 13:42:49 GMT

Thank you very much @Jnix284. I will try this out and let you know if I have any issues.

Re: Header Template Help

CVirkBrown — Mon, 30 Oct 2023 16:41:29 GMT

Hi @Jnix284, I'm having trouble configuring the content for the header in the global content editor to include the new button text/link. I've looked into the GCE and it seems to be working properly, but when I go back to the landing-page.html file it continues to not show the new button text/link. I'm not sure what I'm missing for the button to populate on the landing page?😕

Sample landing page - https://app.hubspot.com/design-previewer/21911619/code/140118817869

ISN Alternate Header on Global Content Editor

Re: Header Template Help

Jnix284 — Tue, 07 Nov 2023 01:26:35 GMT

Hi @CVirkBrown I'm sorry for the delayed reply, it was a busier week than expected last week.

If you're editing the header buttons in the global content editor, you'll only see it on pages you create with the template, not in the landing-page.html file directly.

The way theme files work in HubSpot:

1 - you have templates and modules in the design manager, this is where you make core functional changes with HTML + Hubl, style changes with CSS, or other capabilities with JS.

2 - templates can contain global modules, those are modules like the header and footer that are on multiple pages that you want to edit for all pages

3 - when you create a new landing page under Marketing > Landing Pages, you select a template to use as a starting point.

4 - from this page, you can now access the global content editor to configure the content for the theme. This will apply to any page you create using the same theme.

5 - you can change the modules on the page with the drag-and-drop editor, but this won't change the template file in design tools

I hope this helps clarify - let me know if I've misunderstood and can help further!

Re: Header Template Help

MOsorno — Tue, 06 Feb 2024 22:33:16 GMT

Do you know if its possible to have the same global header in multiple landing pages but just changing one CTA button? We want each page to have its own "sign up" button attributed to them, but changing anything in our global header, changes the button on every landing page.

Re: Header Template Help

Jnix284 — Wed, 07 Feb 2024 01:33:18 GMT

Hi @MOsorno yes, this can be done - depending on the theme you're using it would likely require customization.

Some themes (POWER Pro for example) have a Page Settings module that is not visible on the page but allows you to overwrite elements of the header, or even hide the header or footer so you can create a page specific header or footer.

Not all themes have the same flexibility so you'll need to look at the options available within your theme to see what's possible and if it would require customization to achieve what you're looking for.

Re: Header Template Help

MOsorno — Wed, 07 Feb 2024 15:22:50 GMT

Thanks! I'm using Infinity and can't find the page settings. Is that on the landing I'm creating? Or under files and templates?

Re: Header Template Help

Jnix284 — Wed, 07 Feb 2024 15:29:34 GMT

Hi @MOsorno our current website also uses Infinity theme and unfortunately it doesn't have a page settings module or header options to allow for different versions to be used.

This is specific to how the developers coded the theme.

If you want a unique header with Infinity theme, you'd have to create a custom template and use a copy of the header module that isn't your global header.