Overview
Header blocks are a great way to easily create a navigation bar to reuse in all of your email templates. Additionally, you have full control over how your headers will look on desktop versus mobile.
Select a Layout
Once you drag in a header/link bar block, you will be presented with a module with four common desktop header layout options: Logo Stacked, Logo Inline, Logo Centered, and Links/Buttons only. The layout you select will be autopopulated in your template. You can change this in the Block Styles tab if need be.
If you provided your logo and common navigation links while going through the Setup Wizard, this information will automatically be pulled into the header block. If not, you will see placeholders you'll be able to swap out.
Here's an example of how the Logo Stacked layout will look:
A logo size of around 150-300 pixels is perfect to get your message across without being too large or too small.
Optimizing Your Logo for Mobile
You may have a mobile variation of your logo that you would like to use instead of your full logo. The header block will allow you to choose separate logos for desktop versus mobile. To do this, navigate to the Block area for the header block and find the "Show on" section for your Logo. Select "Desktop." Then, you will be prompted to select a separate image to use for your mobile logo.
If the logo you select is too large, you can make it smaller by setting the Max Width. Note that this setting will only restrict your image if it is larger than the set Max Width. You won't see any change if your logo is already smaller than the what's set here.
Using Images as Navigation Links
You may want to link to an image in your header block as an alternative to a text link, especially if you would like to use a custom font. To do this, select the +Add Image button and upload your image. If necessary, you can scale the image size down by setting a Max Width value.
Formatting Options
In the Block Styles tab, you will see a number of formatting options. How these work will vary slightly depending on the layout you've chosen.
- Logo
This is where you can change the alignment of the logo image. Please note that no visible changes will occur for the Logo Inline and Logo Centered layout options. This is also where you can change the spacing between the logo and links. - Link/Button
Here, you can change the various font formats of the header block. Please note that these changes will only apply to text links, not image links. This is also where you can change the link spacing and alignment. - Block
This is where you can change the general block settings, including background color and padding. - Mobile
Here, you can edit the mobile optimizations of the block. Mobile layouts include Stacked, Logo Stacked, Logo Inline, and Link/Buttons Only. The Logo Stacked, Logo Inline, and Link/Buttons Only mirror the corresponding desktop layout options. You can choose if you would like links to wrap on mobile, which is useful if you have more than a couple of links in your header block. Otherwise, all the links will appear on one line.