BlueFox Email

Appearance

Visual Email Builder ​

bluefox.email includes a powerful drag-and-drop email editor for building responsive, branded emails. It supports a full library of content and advanced elements, complete mobile control, and deep personalization, all without writing HTML.

For the complete editor reference, see the full email editor documentation.

Editor Overview ​

The interface consists of:

  • Canvas: the central editing area where you build the email
  • Left panel: element library and block library for dragging in new content
  • Right panel: settings for the currently selected element, box, row, or block
  • Top bar: email-level settings, preview, and save controls

The editor renders a pixel-accurate preview of how your email will look across email clients.

Related guides:

Core Structure: Body, Boxes, Rows & Columns ​

Every email is built from a hierarchy of structural elements:

  • Body: the outermost container. Controls the email background color, global font defaults, and overall email width.
  • Blocks: full-width horizontal sections of an email. Each block contains one or more boxes. Blocks can be reused across templates and locked to prevent edits.
  • Boxes: containers inside a block that hold content elements. Boxes control padding, background color, background images, and border styling.
  • Rows & Columns: boxes are divided into rows, and rows into columns. Each column holds content elements. You can add, remove, and reorder columns, and change their relative widths.

Understanding this hierarchy (Body → Block → Box → Row → Column → Element) is the foundation for building any layout.

Related guides:

Basic Content Elements ​

Drag these elements from the left panel onto any column:

  • Text: rich text with full formatting controls. Adjust font family, size, weight, color, alignment, line height, letter spacing, and padding. Add links, special characters, or non-breaking spaces.
  • Image: insert images from the shared library, upload new ones, or use a URL. Control width, alignment, alt text, link, and padding. Resize images directly on the canvas using the photo editor.
  • Button: styled call-to-action link. Set the URL, label, font, colors, padding, border radius, and hover styling. Link to a URL, email address, or phone number.
  • Divider: horizontal separator. Control thickness, color, padding, and make it transparent for invisible spacing.
  • Social Media Icons: pre-built social icon bar. Add links to your social profiles with icon style options.
  • Icons: standalone icon elements for use anywhere in your layout.

Related guides:

Advanced Elements ​

Advanced elements add dynamic and interactive content to your emails:

  • Dynamic Image: a placeholder image whose src is replaced at send time by a merge tag. Use for personalized profile photos, product images, or any per-recipient image. See personalization docs for merge tag usage.
  • Video: embed a video thumbnail with a play button link. Clicking opens the video URL in the browser (most email clients do not support native video playback).
  • Countdown Timer: generates a live countdown image that updates until a deadline. Ideal for limited-time offers.
  • Custom Code: insert raw HTML for any content the editor does not natively support.
  • Data Table: add a simple structured table with rows and columns of text data.
  • Survey: embed a one-click survey or rating element directly in the email body.
  • Social Media Post Embed: embed a visual representation of a social post.
  • Animated GIF: add animated GIFs the same way as static images. GIFs play in most email clients.

Related guides:

Layout & Columns ​

Control your email layout with flexible column options:

  • Add or remove columns inside any box to create single, two-, three-, or four-column layouts.
  • Change column width: drag column dividers or set exact percentage widths.
  • Column spacing: control padding and margins between and around columns.
  • Reorder columns on mobile: set a different column order for mobile without changing the desktop layout.
  • Column stacking: control how multi-column layouts collapse on small screens. Stack top-to-bottom or disable stacking entirely.
  • Fluid on mobile: make a column stretch full-width on mobile regardless of desktop width settings.
  • Lock width: prevent a column or element from scaling down on smaller screens.
  • 4-column to 2×2 on mobile: configure a 4-column desktop layout to display as two rows of 2 on mobile.
  • Different content order on mobile vs desktop: show elements in a different sequence on mobile using display-order controls.

Related guides:

Styling & Design ​

Fine-tune the visual appearance of every element:

  • Backgrounds: set solid color, gradient, or image backgrounds on the email body, blocks, or individual boxes. Control image fit, position, and repeat.
  • Padding & margin: set top, bottom, left, and right padding individually on any element, box, or column.
  • Borders & corners: add border color and width to any box. Set border radius for rounded corners on all four corners or just top or bottom corners independently.
  • Fonts: choose from system font stacks or add custom web fonts (Google Fonts and custom font URLs supported).
  • Text spacing: control line height, letter spacing, and paragraph spacing on any text element.
  • Bullet color: change the color of list bullet points independently from the text color.
  • Email width: set the overall max-width of the email (default 600px).
  • Left-align template: override centered layout for left-aligned full-width designs.

Related guides:

Images & Media ​

  • Photo editor: crop, resize, flip, rotate, and apply basic adjustments to images directly inside the editor without leaving the browser.
  • Shared image library: upload and organize images in a centralized library shared across your templates.
  • Stock photos: access a built-in stock photo gallery for royalty-free images.
  • Resize images: drag image handles on the canvas to resize, or enter exact dimensions in the settings panel.
  • Linked images: wrap any image in a URL, email address, or phone link.
  • Text over image: layer text on top of a background image using box-level background image settings.
  • Background image Outlook fix: use the built-in VML fallback option to ensure background images render in Outlook.
  • Prevent Gmail download icon: enable the option to suppress the image download icon that Gmail shows on hover.

Related guides:

Add links anywhere in your email:

  • Button links: link to a URL, email address (mailto:), or phone number (tel:) from any button element.
  • Text links: select any text and add a hyperlink. Supports URL, email, and phone links.
  • Image links: wrap an image in a URL, email, or phone link.
  • Unsubscribe link: insert the merge tag in any text element. See personalization docs for details.
  • View in browser link: add a "view this email in your browser" link using the browser view URL variable.
  • Hover styling on buttons: set a distinct background and text color that appears when a recipient hovers over a button (supported in most desktop email clients).

Related guides:

Mobile & Responsive Design ​

The editor provides granular control over mobile rendering:

  • Show on mobile / hide on mobile: set any element or box to only appear on mobile or only appear on desktop.
  • Reorder columns on mobile: drag to set a different column order for narrow screens.
  • Column stacking: choose whether multi-column layouts stack vertically on mobile and in which order.
  • Fluid on mobile: allow a fixed-width element to expand to full screen width on mobile.
  • 4-to-2×2 column layout: a 4-column desktop layout automatically reflows to 2 columns per row on mobile.

Related guides:

Dark Mode Preview ​

The editor includes a dark mode preview that shows how your email renders in dark mode email clients (Apple Mail, iOS Mail, Outlook on macOS). Use it to check color contrast, background inversions, and image visibility before sending.

Related guides:

Brand Variables ​

Brand variables let you define reusable design tokens (colors, fonts, logos, URLs) at the account or project level and reference them across all your templates. Changing a brand variable updates every template that uses it, without manually editing each one.

In bluefox.email, project-level overrides work alongside brand variables. See email theme settings for how per-project overrides interact with your master theme.

Related guides:

Blocks Library ​

Blocks are reusable full-width sections you save once and drop into any template. They contain your pre-styled layouts: headers, footers, hero sections, product cards, CTA rows, and more.

  • Add a new block: drag any block from the block library panel onto the canvas.
  • Save a block: select a block on the canvas and save it to your library with a name.
  • Block locking: lock a block so that only admins can edit it. Useful for protecting footers with legal text or brand-critical headers.

Related guides:

Full Editor Reference ​

This page covers the feature set available in the bluefox.email editor. For detailed step-by-step guides on every topic above, visit the complete editor documentation:

View full email editor documentation →