topic Re: Trouble with changing global header to local header in CMS Development

Trouble with changing global header to local header

DWellner — Fri, 09 Aug 2024 20:12:11 GMT

I'm currently trying to change the header for just one website page. It is currently a global header connected to one other page.

When I try to change it from the website page editor, I go to:
Left sidebar > contents > Click on three dots of the global header. Then the only option is to edit, but that will change it for every other website page that uses this header.

How can I make the header for this website page local, or change the header of this website page to a header that isn't going to change any other website pages?

I've attached a picture to show.

Re: Trouble with changing global header to local header

SteveHTM — Sat, 10 Aug 2024 00:02:51 GMT

@DWellner - I'm going to have to make a few assumptions here about how your theme and templates are set up. Bearing that in mind:

- The theme/template for the page you are trying to set up probably has explicit or implicit references to a 'global partial' header file which is shared across the other page(s) in the site. The start of the template may look like this, bringing in the common base.html elements:

!-- templateType: page isAvailableForNewContent: true label: Basic web page --> {%- extends "./layouts/base.html" -%} {%- block body -%} <main id="main-content" class="body-container-wrapper"> ...

- This template file may live in either you master theme folder layout or have been contructed as a part of your working child theme.

- Similarly the header "partial" template may be in the master file folders

In you child theme, you will need to set up a distinct header partial. Typically you would clone this from a master theme partial file to the child theme, change the file name, and make the required changes as you set it up. It probably will contain code that looks like:

<header id="lp-header" itemscope itemtype="http://schema.org/WPHeader" style="background-color: #f1f2f2;" class="header"> <div style="height: 130px;" class="page-center header-padding;"> <div style="float:left; vertical-align: bottom !important;"> {% module "logo_one" path="@hubspot/logo", label="Logo 1" %} ...

To construct your new page template - with the variant header - you probably will clone the existing page template from the master theme, give it a new name/label, and then go in and edit the header partial reference to bring in your new header design. For example:

{% extends "./layouts/base.html" %} {% block header %} {% global_partial path="./partials/new_special_header.html" %} {% endblock header %} ...

If you have got this far :), you can go into your page editor and select the new template for your page - with the freedom to edit both page content and its specific header content without having those changes impact other elements of your site.

Good luck!

Steve

Re: Trouble with changing global header to local header

GiantFocal — Thu, 15 Aug 2024 06:42:57 GMT

Hi @DWellner,

HubSpot does not provide the option to convert global modules into local modules from the Design Manager or Page Editor.

However, you can convert it using the HubSpot CLI. This means you'll need to fetch your theme (with the global module) and update the "global" variable to false.

Once updated, you can re-upload the module back to HubSpot.

Best regards,

Abraham Ernesto

Re: Trouble with changing global header to local header

DWellner — Thu, 15 Aug 2024 12:59:29 GMT

This isn't exactly what worked for me but it helped me figure it out! The website I'm currently working with isn't even using themes due to how it was set up by a previous agency. What I did was duplicate the header template, and then go into the coding for that specific page in the design manager and change the header for the page to the new duplicated version of the header.

I know that might sound confusing since I don't know the technical language but that's the best I can explain it based on my knowledge.

Now I'm just trying to figure out how to change the logo in this header to a different logo but I think this should be easier to figure out.

Thanks!