Skip to main content
The drag-and-drop email builder is available everywhere you create or edit email content in the HoopAI platform — in Templates, Campaigns, and workflow email steps. It provides a full visual editor with a live canvas, an element library, and global appearance controls.

​
Builder interface

The builder workspace has three main areas:
  • Left panel — the toolbar with tabs for Add Elements, Manage Elements, and Appearance
  • Canvas — the live email preview where you drag, arrange, and edit content
  • Right panel (optional) — dockable AI writing assistant panel
The left panel can be docked to either side of the screen to suit your workflow.

​
Content elements

Drag any element from the Add Elements tab onto the canvas to insert it. Elements snap to the current layout structure automatically.
Add headings (H1–H4) and body paragraphs. Format using the inline toolbar: font family, size (8px–96px), bold, italic, underline, strikethrough, alignment, line height, lists (bulleted or numbered), and hyperlinks. Insert merge tags and trigger links directly from the text toolbar.
Upload from your media library or enter an external URL. Set alt text for accessibility, configure a redirect link, control width, height, alignment, padding, and background color. Use the Visible In setting to show the image on desktop only, mobile only, or both.
Add a call-to-action button. Configure label text, font, size, alignment, full-width toggle, background color, border, border radius, and padding. Set the action to open a URL, send an email, download a file, dial a phone number, or fire a trigger link.
Embed a video thumbnail with a play button. Supports YouTube (including Shorts), Vimeo, and Wistia links. Customize the thumbnail image, dimensions, opacity, padding, and device visibility. Use a custom value for a dynamic video URL.
Add social media icon links. Click Add to include platforms, enter your profile URLs, choose icon styles, and set padding. Supports all major networks.
Add a horizontal rule between sections. Set height, width percentage, alignment, line type (solid, dashed, or dotted), color, and padding.
Insert invisible vertical space between elements. Set height and optional background color. The spacer scales responsively between desktop and mobile views.
Insert a custom HTML block for layouts or functionality beyond the standard builder. Write raw HTML in the code editor panel. Use inline styles rather than external stylesheets because most email clients strip <head> CSS. JavaScript and iframes are not supported by email clients.
Pull in dynamic content from an RSS feed. The RSS Header block shows the feed title, description, and publication date. The RSS Items block renders individual articles with title, summary, image, and link. Used with the RSS Schedule delivery option. See RSS email campaigns for full setup details.
Embed a product grid from your store inside the email to let recipients browse and purchase without leaving their inbox.
Add a horizontal multi-image carousel to show a gallery of product photos or promotional images in a compact format.
Adds a “View this email in your browser” link above the email header for recipients whose email clients block images or rendering.

​
Layouts and columns

Every section of the email can use a different column layout. Available structures include:
LayoutUse case
Single columnBody copy, announcements, simple messages
Two columns (equal)Side-by-side features or images
1/3 : 2/3Image + large text block
2/3 : 1/3Large text block + image
1/4 : 3/4Small icon + description
Four columnsProduct grids, icon rows
To add a new section, drag a Layout block from the Add Elements panel. Drag content elements into any column within the section.

​
Appearance tab

The Appearance tab sets global defaults that apply throughout the template.
Set the default background color, body color, content width, and background image. Content width controls the maximum width of the email body — 600px is the standard for most email clients.
Set the default font family, size, and color for all body text. Supports web-safe fonts (Arial, Georgia, Verdana) and Google Fonts.
Set default border radius, background color, font type, size, and text styling for all buttons in the template. Overrides can be applied to individual buttons.
Set mobile-specific overrides for heading font sizes, paragraph size, button dimensions, and element visibility. Preview in mobile view to verify the layout.
Add raw CSS rules that apply globally to the template. For advanced users only — test thoroughly across email clients before sending.

​
Manage elements panel

The Manage Elements tab shows a hierarchical list of all elements currently in the email. Use it to:
  • Navigate to deeply nested elements without scrolling the canvas
  • Rename elements for easier identification
  • Show or hide individual elements
  • Delete elements from the tree view

​
Mobile optimization

The builder includes a dedicated Mobile view to preview how your email renders on small screens. Best practices for mobile:
  • Use single-column layouts wherever possible — multi-column layouts collapse on mobile
  • Set minimum button sizes to 44×44px for easy tap targets
  • Increase font sizes in the Mobile Formatting settings for readability
  • Use the Visible In setting to hide decorative desktop elements on mobile
  • Keep subject lines under 40 characters so they display fully on a phone lock screen

​
Element-level visibility

Every element has a Visible In setting that controls whether it appears on:
  • Desktop and mobile — the default for all elements
  • Desktop only — hides the element on mobile screens
  • Mobile only — hides the element on desktop screens
Use this to show different images or layouts to desktop and mobile readers from a single template.

​
Conditional elements

Show or hide entire content blocks based on a contact’s field values. For example, display a different promotional banner to contacts in different cities, or show an upsell block only to contacts tagged as existing customers — all within one template. To configure: select an element, open the Visibility tab in the left panel, and define the condition using a contact field, operator, and value.

​
Inline editing

Click any text element on the canvas to edit it directly without switching to a separate panel. The inline toolbar appears above the selection. This applies to all text areas including footer content and button labels.

​
Finding broken or hidden elements

Use the Find Hidden or Broken Elements tool before sending to scan the email for:
  • Elements that are invisible due to identical foreground and background colors
  • Broken image links
  • Empty link targets
Access it from the three-dot menu in the builder toolbar.

​
Frequently asked questions

Yes. Select any element or layout section and use the Save Elements feature to store it in your library. Saved elements can be dragged into any template from the Add Elements panel.
Open the Appearance tab and choose a Google Font from the font picker. Custom web fonts are embedded in the email but may fall back to a system font in email clients that do not support them (such as older versions of Outlook).
Images uploaded to the builder have a maximum file size of 10MB. For larger files, use an externally hosted URL instead.
Yes when starting from a blank template. Choose the Code Editor option at creation to write raw HTML. Switching from Design to Code mode after building content is not supported and may overwrite your design.
Multi-column layouts are designed to stack vertically on smaller screens for readability. This is standard responsive email behavior. Use the Mobile Formatting settings to control font sizes and spacing within the stacked layout, or use single-column layouts for a consistent experience on all devices.
No. The vast majority of email clients block JavaScript and iframes for security reasons. Use inline HTML and CSS only. Test your custom code in multiple email clients before sending to a large list.
Last modified on March 5, 2026