Setup Global Header and Footer
Jun 16, 2022
Global content in a HubSpot website is an element that can be used throughout the website, but is the same anywhere it shows up. While this can be a variety of content types, it almost always includes a header and a footer. Fusion is no different in this regard. Global Header The featured image of this post shows the edit view of the global header. To get to this, from any page edit view, hover on and click the header section. It will prompt you about it being a global element. Proceed and it will open the header editing area within a new browser tab. Click on the "Content" tab on the left to see all of the includes modules. You will find the following: Drag-n-drop areas. Above and below the default logo/nav elements is a drag-n-drop area where you can easily drop in other elements if needed. Header Options. This module gives you the ability to select the web page(s) that you wish to EXCLUDE from the transparent header option, as by default, all pages will use the transparent header. Site Logo. There are actually three image fields here, where you can load in your desired site logo (if different from what already displays). The three options are to load the logo that is used on the regular desktop header, a separate one for the transparent header, and a third for the mobile navigation. These variations exist so you can load different versions of your logo depending on background colors in play and size/layout. Desktop Search. Check the settings on this module to make sure search is being handled in the way you'd like it to be. You can also disable the search button in the Header options found in the theme style settings. Main Navigation. Here, you can access our Megamenu module and customize it as desired. This includes support for submenu dropdowns, various column options for the mega menu option, and mobile navigation, which activates at 991px and less screen width. Global Footer The same as the global header, you can click on the footer area of any page to open the edit panel for the footer. The entire footer is a drag-n-drop area. Once you open, click the "Contents" tab on the left to see the footer modules in use. You will find the following: Site Logo. Select your logo image that you wish to use in the footer. You can link it to your home page if you would like. Custom Rich Text. This is a rich text module that defaults to contact details. You can of course edit to be whatever you wish. Custom Heading. This is a text heading that is simply a title heading for the social follow module that is under it. Social Follow. This is a custom module allows you to easily setup links to your social network pages. Edit the module to add/delete accounts as needed and then setup the links to your account pages. Simple Subscribe Form. This allows you to bring in a blog subscription module or something similar to have in the footer, showing on all pages. Copyright Text. This is the full width text bar at the bottom of the footer section. The default usage here is a copyright line and links to elements like privacy policies. Footer Links. Default, this column is empty, but it's there to populate with other links or info. Now, remember that you have full editing control of this footer. Anything above that you do not want, you can simply delete it or replace it with something else. You can add anything else needed from the modules found on the left, drag to change the column widths, add/remove columns, etc. When finished, apply your changes to save. Click the Publish button in the top right corner to make your global changes live throughout your site.
