Email Design

What this does

Email design is the layout of your message: header, body, and footer blocks inside the canvas.

Layout regions

• Header: global header blocks for the email.
• Body: the main content area where most widgets live.
• Footer: global footer blocks, including unsubscribe content.

You can toggle sections with the Header and Footer controls that appear on hover. If a shared header or footer grows unusually tall, the canvas shows a warning so you can move main message content back into the body.

Design workflow

Editing and moving content

• Text blocks include an inline toolbar with formatting and Ask AI actions for creating, improving, shortening, lengthening, or custom-editing selected email copy.
• Drag blocks between Header, Body, and Footer drop zones. Empty header and footer regions show larger drop targets, while populated regions keep smaller insert zones between blocks.
• When you drag content into the shared Header or Footer, the canvas highlights that region and confirms where the block was added.
• Reordering a block inside the same email section keeps the intended insert position more reliably.
• The builder backdrop stays blurred while dialogs are open so the active email editing surface remains easier to follow.
• Connected assistants can create richer editable email drafts with colored text or quote blocks, color bands, full-width images, social links, and multi-column backgrounds. They can also place a saved background image behind heading, text, quote, or column content; control its size, position, and repeat behavior; and set a fallback color for inboxes that do not load that image. They can also add a contrast layer over a saved background image and set the color band behind a button separately from the button fill. Per-block spacing, image fit and shape, button color and shape, column insets, gaps, and corners, and shared header/footer inclusion remain available.
• Delivered emails keep saved body and content backgrounds and per-block text sizes more consistently. Solid background colors are also carried through older inbox rendering methods, including around the first full-width image, which reduces unexpected white gaps or missing color bands. Generate and save real image assets before adding them to an assistant-authored draft so the review and delivered email use the same image instead of a placeholder.
• Compatible inboxes receive guidance for the saved light color palette instead of being told that a separate dark palette is available. This reduces partial recoloring that can separate text from its intended background. Some inboxes still replace colors on their own, so compare a test delivery in the email apps your audience uses.
• Heading colors saved directly on the heading now stay consistent between the builder and delivered email, including light headings placed on dark image or color backgrounds.
• The builder marks content as saved only after the save succeeds. When a flow email has newer draft content, reopening it restores that draft before the previously published design.
• When shared email styles or dynamic Blog Posts and Team Spotlight content change, Hiveality refreshes the saved email output from the current website data. If required content cannot be loaded, the refresh stops instead of replacing a previously valid email with incomplete or placeholder content.
• When an approved connected assistant creates, updates, duplicates, archives, or deletes an email that is also available in the template picker, Hiveality keeps the picker copy and preview aligned. If preview capture needs another attempt, the email remains saved and the assistant reports that pending step instead of creating a duplicate.

Preheader text

The builder includes a preheader area at the top of the email. Use it to add a short preview line that appears in inbox previews.

Let a button update the contact

An email button can open a normal link or apply contact organization in one click. This is useful for preference choices, interest signals, event follow-up, and self-selected nurture paths.

1. Select a Button widget and open its settings.
2. Under Button Behavior, choose Update contact.
3. Choose one or more tags, lists, or both. At least one choice is required.
4. Under After updating, show a branded confirmation with your own heading and message, or redirect the reader to a selected page or link.
5. Save the email. For a campaign, schedule the campaign; for a Flow email, publish the Flow only after reviewing the button setup.

Each delivered link is prepared for its recipient, and clicking the same button again does not apply the action twice. Adding a tag or list can start the same follow-up Flows as a regular contact update, so test the full path with a test contact before sending broadly.

Test emails keep these buttons inactive. Use a small real campaign or a test contact in a Flow when you need to verify the tag, list, confirmation, redirect, and downstream automation together.

Images and background previews

• Image and background selections from Files keep saved crop and transform choices more consistently in builder previews.
• Email image optimization can still resize and compress Uploadcare images while preserving the selected crop path.
• Select an Image block and use Shape to switch between a rectangle and a circle. A circular image is cropped to a square before the round mask is applied, so use Width to resize it without turning it into an oval.
• Use image fit, width, border radius, alignment, and background color controls to fine-tune how images appear across desktop and mobile previews.
• Select an Image block and use Image Link to make the image clickable. Choose a website page or anchor, or enter another destination, then confirm the link in Preview before sending.
• Images placed inside columns now follow the column inset instead of keeping an extra body gutter. Full-width buttons created through a connected assistant also stay full width in the builder and delivered email.
• Connected assistants can give each card in a two- or three-column block its own background color. Existing background images remain in place when a column color is updated, so review both desktop and mobile previews before sending.
• When text sits over a saved background image, ask a connected assistant to add an overlay color and strength. The contrast layer stays with the prepared image so copy remains easier to read when a mobile inbox crops the image.
• Delivered messages keep a contrast-aware color beneath background images. This helps the copy remain readable when a mobile inbox changes live text colors or loads the background image differently.

Restore an earlier email version

Open Version History from the builder toolbar, select a saved version, and review its preview before restoring it. Restoring creates an unsaved draft, so review the result and choose Save when you want to keep it.

The current shared header and footer content remains in place when you restore the body of an earlier version. Leave Keep current header/footer visibility selected to keep the current show/hide choices too. Clear that option only when you want to restore whether the header and footer were shown in the selected version.

When an approved connected assistant or API rebuilds a saved email, Hiveality saves the outgoing body in Version History and opens the newly rebuilt content instead of an older working copy. Review the rebuilt email and save any further edits before sending.