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. Apex 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 utilize the transparent header option. This can be seen on the home page of the Apex demo site.
- 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.
- Site Search Input. You will see two modules for site search. One is for desktop and the other for mobile. Check the settings on these modules to make sure search is being handled in the way you'd like it to be.
- Header Menu. Here, you can select which HubSpot menu you want to use in your header. There is a button there to create a new menu if you haven't set it up yet. This theme includes support for submenu dropdowns and mobile navigation, which actives 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:
- Apex 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.
- Contact Info. This is a rich text module that defaults to contact details. You can of course edit to be whatever you wish.
- Follow 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.
- Footer Menu. This is a simple menu module where you can setup links in the footer section as needed.
- 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.
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.