How Claude Built a Custom Newsletter Header and Footer in MailerLite
And why your header and footer deserve more than the drag-and-drop editor
If you've ever tried to make your MailerLite newsletter look truly on-brand, you'll know the drag-and-drop editor does a solid job for the main body of your email. It's quick, intuitive, and perfectly capable for laying out text, images, and calls to action. For the content you change with every send, it makes complete sense - you don't want to be diving into code every time you write a newsletter.
But the header and footer? That's a different story. These are the elements that stay the same across every email you send. They're your brand's first and last impression. And this is exactly where MailerLite's built-in design tools hit their ceiling.
That's what I discovered when I was building a newsletter template for a client - a leadership consultancy with a visual identity rooted in deep navy, warm gold accents, and elegant serif typography. The kind of brand that needs its email communications to feel just as considered as its website.
The drag-and-drop editor couldn't deliver the level of refinement the header and footer needed. So I turned to Claude to build custom HTML for those two bookend elements, while keeping the drag-and-drop editor for the newsletter content in between. The result was the best of both worlds: a polished, branded frame around every email, with the flexibility to create body content quickly each week without touching any code.
Why Custom MailerLite Headers Beat the Drag-and-Drop Editor
To be clear, I'm not suggesting you abandon MailerLite's visual editor entirely. For the body of your newsletter (the content that changes with every send) it's efficient and practical. But for the header and footer, the elements that define your brand across every single email, here's where it struggles:
Colour and typography control is surface-level. You can pick a background colour and change fonts, but you can't layer subtle opacity effects on gold accent lines, or create the kind of fine typographic hierarchy (letter-spacing, text-transform, specific font stacks) that makes a design feel crafted rather than templated.
Full-width backgrounds are tricky. Email design relies on a nesting technique where an outer table carries the background colour edge-to-edge, while an inner table constrains the content to a readable width (typically 600px). The drag-and-drop editor doesn't give you that level of structural control, which means background colours often stop at the content edge rather than bleeding to the full width of the email.
Navigation bars are limited. We wanted a desktop navigation bar with fine gold hairline dividers between the links, the kind of subtle detail that elevates a header from functional to elegant. MailerLite's nav blocks don't offer that level of customisation.
Social icons are generic. MailerLite provides standard social media icons, but if your brand uses a specific colour palette (in our case, a warm gold on a dark navy background), you need custom icons. We ended up creating bespoke gold outline icons at high resolution for crisp rendering.
Footer design is an afterthought. Most email platforms treat the footer as a legal necessity rather than a brand touchpoint. With custom HTML, we were able to create a footer that felt like a natural extension of the header with the same visual language, and same refined details.
Step-by-Step: Creating a MailerLite HTML Header with Claude
The beauty of working with Claude on something like this is that the process is genuinely conversational. I didn't need to write a single line of code myself. Instead, I described what I wanted, and we iterated together.
It started with the brand. I shared the client's website, their brand lookbook, and their logo. Claude pulled the exact colours, analysed the typography choices, and understood the tone - refined, courageous, elegant but not corporate.
From there, Claude generated the HTML for a header block. I pasted it into MailerLite's HTML block, previewed it, and fed back what needed adjusting. The logo was too large. The nav dividers were too thick. The gold wasn't quite the right shade. Each round of feedback took seconds to implement because Claude understood the context of what we were building and why.
The footer followed the same pattern. We built it to mirror the header with the same navy background, same gold accent lines, and the same typography hierarchy, so the email felt bookended by consistent, branded elements.
Custom HTML newsletter header designed with Claude AI, featuring a navy background, gold monogram logo, tagline, and desktop navigation bar.
Key Lessons From the Build
The Two-Table Structure Is Everything
The single most important technical pattern in email HTML is the outer wrapper / inner content table structure. The outer table sits at 100% width and carries the background colour, so it bleeds to the edges of the email client. The inner table is constrained to a max-width of 600px and centred with align="center". Without this, your background colour stops at the content edge and you get ugly white strips down the sides.
Mobile Responsiveness Matters More Than You Think
Email clients on mobile devices render things differently, and a nav bar that looks elegant on desktop can become a cramped mess on a phone. We used a CSS media query (@media only screen and (max-width: 480px)) to hide the navigation links entirely on mobile, showing only the logo and tagline. This is a much better user experience than trying to squash four navigation links into a 320px-wide screen.
The key responsive techniques we used: max-width: 100% and height: auto on images so they scale down gracefully, percentage-based widths on the inner content table rather than fixed pixel widths, and hiding non-essential elements on smaller screens.
Custom HTML Mailerlite newsletter footer designed with Claude AI, including branded navigation and bespoke gold social icons.
Social Icons Need to Be Customised
If your brand uses specific colours, the standard social media icons that email platforms provide won't cut it. MailerLite offers a set of default social icons, but they come in fixed styles that may not complement a dark background or a specific brand palette.
This is where Claude surprised me. Rather than sourcing icons from a third-party library, I asked Claude to generate bespoke social media icons in the client's brand gold (#d6af70). Claude wrote a Python script using the Pillow imaging library and created a complete set (LinkedIn, Instagram, Facebook, X, YouTube, and an envelope for email) as transparent PNGs, right there in the conversation.
The first set came out at 48×48 pixels, which looked slightly pixelated when displayed at 24×24. So I asked for crisper versions, and Claude regenerated the entire set at 96×96 pixels for sharper rendering. The difference was immediately noticeable.
We also iterated on the design itself. The YouTube and envelope icons initially had different shaped frames to the others; a wide rectangle for YouTube, a landscape envelope shape, which made the row look inconsistent. I asked Claude to put them inside the same rounded square border as the LinkedIn and Instagram icons, and then to make the envelope slightly smaller within its box so it had more breathing room. Each of these refinements took seconds.
The icons were saved as transparent PNGs and uploaded to the client's Squarespace asset library for hosting. One thing we discovered: some hosting platforms can strip transparency from PNG files during upload. If your icons show up with a white background instead of being transparent, try uploading through the platform's file manager rather than the image uploader, or use .webp format instead.
The Unsubscribe Link Question
This one caught us out and is worth understanding properly. Email marketing platforms are legally required to include unsubscribe links in every campaign (CAN-SPAM compliance). MailerLite handles this automatically by appending its own footer.
We initially built custom-styled unsubscribe and update preferences links into our HTML footer using MailerLite's merge tags — {{UnsubscribeLink}} and {{UpdatePreferencesLink}}. These are dynamic placeholders that MailerLite replaces with subscriber-specific URLs when the email is sent. So they do actually work.
However, when we tried to save the newsletter, MailerLite's validation flagged that the unsubscribe link was missing. It scans for its own footer block specifically, not just the merge tag in custom HTML. The merge tags would have functioned correctly when sent, but MailerLite won't let you save without its own footer enabled.
The practical solution: remove the custom unsubscribe links from your HTML footer and let MailerLite's automatic footer handle the legal requirements. It won't be styled to match your brand, but it avoids duplication and keeps the validation happy. It's a small compromise for an otherwise fully custom design.
Gold Lines and Visual Consistency
One of the details that made the biggest difference was the use of gold accent lines throughout. We used two variations: a bold 4px line in the brand gold (#d6af70) at the very top and bottom of both the header and footer as full-bleed bookends, and a subtle 1px inset rule at 40% opacity as a delicate divider between content sections. This created a visual rhythm that carried through the entire email.
The nav link dividers in the header used a slightly different gold (#c4aa5f) sampled directly from the logo, with no opacity, creating a clean 1px border-left on each table cell. Small details, but they're the difference between something that looks templated and something that looks designed.
What You Need to Get Started
If you want to try this yourself, here's what to prepare before you start your conversation with Claude:
Your brand assets. Logo file (ideally PNG with transparent background), exact hex colour codes, font choices, and any brand guidelines you have. The more specific you are, the better the result.
Your content plan. Think about what you want in the header (logo, tagline, navigation links?) and footer (about text, social links, contact details?). Have your social media profile URLs ready.
Hosted images. Any images in your email HTML need to be hosted somewhere with a public URL. Squarespace's asset library works well, as does any CDN. The URL needs to point directly to the image file (ending in .png, .jpg, or .webp), not to a page containing the image.
Your MailerLite template. Open a new campaign or template in MailerLite and familiarise yourself with adding an HTML block. That's where your custom code will live.
The Workflow
The actual process is straightforward:
Open a conversation with Claude and describe your brand, sharing your website URL and any visual references. Ask Claude to build a MailerLite-compatible HTML header block. Claude will generate the code as a file you can download or copy.
Paste the HTML into a MailerLite HTML block and preview it. Feed back what needs adjusting; colours, sizing, spacing, content. Claude makes the changes and you preview again. Repeat until you're happy.
Then do the same for the footer. Save it as a separate HTML block that sits at the bottom of your template.
The whole process for our client took a few rounds of iteration, but each round was quick because the changes were specific and the context was maintained throughout the conversation.
Is It Worth the Effort?
For brands where visual consistency and professionalism matter - absolutely. And the beauty of this approach is that it's a one-time investment. You build the header and footer once, save them as HTML blocks in your MailerLite template, and they frame every newsletter you send from that point on. The weekly work of creating your actual newsletter content still happens in the drag-and-drop editor, exactly as before - you're just doing it inside a much more polished wrapper.
The difference between a MailerLite template with default header styling and one with custom HTML bookends is striking. It transforms the newsletter from something that looks like every other email in your inbox into something that feels unmistakably yours.
And because you're working with Claude rather than hand-coding, you don't need to know HTML. You just need to know what you want and be willing to iterate. The technical implementation is handled for you.
The result was a newsletter that carries the client's brand identity from the moment it lands in someone's inbox; navy and gold, elegant typography, refined details. It looks like it was designed by a specialist email designer, but it was built through conversation.
FAQs:
-
Yes. MailerLite's email editor includes an HTML block that you can drag into any template. You paste your custom code into this block and it renders alongside the standard drag-and-drop content. This is how the custom header and footer in this article were built - as HTML blocks sitting at the top and bottom of an otherwise standard MailerLite template.
-
No. That's the whole point. You describe what you want (your brand colours, logo placement, what links to include) and Claude generates the HTML for you. The process is conversational: you preview the result, say what needs changing, and Claude makes the adjustments. You never need to read or edit the code yourself.
-
It can, but it needs to be built with mobile responsiveness in mind. Standard HTML tables don't automatically adapt to smaller screens. In our build, we used media queries to hide the navigation bar on mobile (where it would be too cramped) and ensured images scale down with percentage-based widths. If you ask Claude to make the header mobile-responsive, it will build these techniques in from the start.
-
MailerLite requires an unsubscribe link in every campaign and will append its own footer automatically if you don't include one. You can add styled unsubscribe links to your custom footer using MailerLite's merge tags, but be aware that MailerLite's save validation looks for its own footer block - so you may still need to keep the default footer enabled. In practice, it's simplest to let MailerLite handle the unsubscribe link and keep your custom footer focused on branding.
-
Yes. The CAN-SPAM Act requires every commercial email to include a valid physical postal address. This can be a street address, a PO box, or a registered private mailbox. If MailerLite's automatic footer already includes your address, you may not need to duplicate it in your custom HTML - but check what MailerLite is appending to make sure it's covered.
-
Yes - and this was one of the more surprising parts of the process. Claude generated a complete set of bespoke social media icons in the client's brand gold, as transparent PNGs, using a Python imaging library. We iterated on the size, resolution, and framing until they matched perfectly. No third-party icon library needed.
-
I used Claude Pro for this project, which gives access to Anthropic's most advanced model. However, the free version of Claude is perfectly capable of generating email-compatible HTML - this isn't a task that requires the most powerful model. Where the Pro plan really shines is in longer, iterative sessions - the kind where you're going back and forth refining details over multiple rounds. The free plan has stricter usage limits, so you might find yourself running out of messages mid-session. If you're planning a one-off build with several rounds of tweaks, Pro is worth it for the uninterrupted workflow.
Sophie's Bureau specialises in digital operations for consultants and purpose-led businesses, including email design, Squarespace websites, and AI workflow optimisation. If you'd like help creating custom newsletter templates for your brand, get in touch.
