CMS Development

TTimes
Contributor

Adding an editable button to the header partial

Hi there

I was looking for a way to add a button the header partial.

Adding the button with fixed text in the boilerplate partials/header.html is not really an issue, but if we wanted to make the user able to add one or two buttons(repeater) in the header with editable text and an editable link it's a bit more tricky to figure out. 

The default header already contains a Logo field and a Menu selector in the Hubspot UI. Can I add more fields possibly?

Right now I'm going down the path of removing the header partial completely from base.html and creating my own header module that does exactly what i want.

But is there a way to add more fields to the default header? We're using the HS boilerplate.

TTimes_0-1646910415818.png

Thanks in advance, Martin

0 Upvotes
Chandresh9450
Member

Adding an editable button to the header partial

Hello @TTimes For now Boilerplate provides us Logo, Menu and Language switcher and If you want to add some more element then you need to add a custom module or default module in header.html file.

If you are creating your own header then I have a suggestion for you,
You can implement dnd functionality in header by using {% dnd_section %}, {% dnd_column %}. By using dnd feature you can use any module in header on page editor, even you can resize the logo/menu's column as per your need.

0 Upvotes
TTimes
Contributor

Adding an editable button to the header partial

Currently i worked around it by referencing my custom header module in partials/header.html

Still interested in knowing if extra fields can be added to the default header without creating a module.

0 Upvotes
Chandresh9450
Member

Adding an editable button to the header partial

@TTimes yes if you want to drag and drop feature in header then you need to add {%dnd_area %} in header.html file. Here is doc which will help you to create dnd_area.
https://developers.hubspot.com/docs/cms/hubl/tags/dnd-areas

and here is demo of DND Header.
https://www.awesomescreenshot.com/video/7871211?key=7141186ec67a1f6f633165c59f3cd719

0 Upvotes
DanielSanchez
Key Advisor

Adding an editable button to the header partial

Hello, yes it is, but I would need to analyze the possible code to understand how this header is made.

 

If you have difficulties with themes, you can start creating a module with everything you need, it may be the easiest way.

 

Best regards!

 

TTimes
Contributor

Adding an editable button to the header partial

Hi Daniel

Thanks for your response.

Well, it's the standard header of the simple Hubspot boilerplate. It contains logo, menu and languageswitcher per default. 

I just can't figure out how to add fields to it as none of the existing fields are shown in the design manager on the right if i edit partials/header.html

When i create a module in the Design Manager i get field options (as well as add/remove fields) on the right.

So was quite confused about how one would add more fields to the default header.

0 Upvotes