Skip to main content

Using the Email Editor in CamBuildr

This guide walks you through the core features of the editor, how email content is structured, and how to use each content block.

Written by Domonkos Horváth

CamBuildrs Email Editor allows you to create highly customizable campaign emails using a visual drag-and-drop interface. It supports modern HTML email layouts, responsive design, and a modular structure that works well for both beginners and advanced users.

Overview

The editor is divided into three main areas:

  1. Canvas (center): The live preview of your email. This is where you build and arrange your content by placing elements into rows.

  2. Sidebar (right): Contains all content blocks, rows, and settings. When you select an element in the Canvas, this sidebar also displays its configuration options.

  3. Toolbar (top): Includes action buttons for saving, switching between mobile/desktop views, and toggling structure or merge tag preview.

Block Types in the Sidebar

The sidebar is structured into three tabs: Content, Rows, and Settings.

In the Content tab, you'll find all available building blocks:

Static Content Blocks

These are the foundational components of your email layout. You can drag and drop them into any row on the Canvas.

  • TITLE: Inserts a heading or title. Alignment, font, size, and color can be customized.

  • PARAGRAPH: A standard text block, ideal for body copy, explanations, or narratives.

  • LIST: Adds bulleted or numbered lists. Bullet styles and spacing are fully customizable.

  • IMAGE: Upload or link to images (e.g. logos, infographics, photos). Adjust padding, size, and alignment.

  • BUTTON: Creates a call-to-action (CTA). You can customize label text, colors, padding, borders, and more. Buttons can link to external pages, internal anchor links, or open prefilled emails (mailto links).

  • DIVIDER: Inserts a visual line to break up content sections. Line style, color, and spacing are configurable.

  • SPACER: Adds vertical space between elements. The height is fully adjustable.

  • HTML: For advanced users. Allows insertion of raw HTML/CSS/JS for complete customization.

  • VIDEO: Embeds a video preview that links to YouTube, Vimeo, or similar platforms. A clickable thumbnail is automatically generated.

  • ICONS: Adds one or multiple icons from a preset library. Common use cases include contact links or visual emphasis.

  • TEXT: Similar to PARAGRAPH, but optimized for pasting formatted text (e.g. with bold, lists, and links preserved).

Interactive Elements (Colored Icons)

Some blocks in the Content tab have colored icons, indicating that they are interactive or dynamic. These include:

  • SHARE

  • SURVEY

Additional Features

Personalizing the content

An email can change per recipient in three ways, which are the same feature at three levels of effort:

  • 1. A merge tag, with a fallback. {{ var:firstname }} inserts the value. {{ var:firstname:there }} inserts the value, or there when it is empty. Works in body text, the subject line, the preheader and link addresses. Click "Show Merge Tags Preview" in the toolbar to see them filled in, and open Available placeholders for the list of fields this email can use.

  • 2. A display condition on a row. Select a row and open Display Conditions in the sidebar to show it to only some recipients. Fields are grouped under Person data, Custom fields and Action data, and each one is offered twice — is set and is missing — so one row can go to people who have a value and another to people who do not. They are independent conditions, so moving or deleting one row never breaks the other.

  • 3. A condition you write yourself. Either as a custom condition in the Display Conditions dialog, or typed into a text or HTML block. This is the only way to compare a field against a particular value.

All three are one syntax. Picking First name is set in the menu wraps the row in {% if var:firstname:false %} … {% endif %} — exactly what you would type by hand. That is also why a display condition can only ask whether a field is filled in or empty; anything else means writing it yourself.

Display conditions are available in campaign emails and automated emails, but not in the double opt-in email. Tags cannot be used as a condition. For the full syntax, the operators available and the constructs that are rejected, see Personalizing an email: names, fallbacks and conditions.

Linking to your own landing pages

When a button or link points at one of your CamBuildr landing pages, add the prefill link placeholder to its address:

https://your-page.org/sign?{{ var:prefill_link }}

The page then recognises the recipient: it greets them by name, shows their address masked (j***@example.com) with a That's not me option, and matches the signup to the right person — without their address ever appearing in the URL.

The prefill link only works on pages hosted on CamBuildr. When a link points at any other website, put the merge tags straight into its address instead — ?email={{ var:email }}, ?firstname={{ var:firstname }} and so on are the right choice there.

Whenever a person's own data is in a link address, the editor shows a warning after you save, and the same warning appears on the email's detail screen. Nothing is blocked and the value is still inserted correctly; the warning is a reminder that it is personal data, and that anything in a URL can be read by the target site, its analytics tools and its server logs. For your own CamBuildr pages, switch to the prefill link; for other websites, keep the merge tags and only pass what the site actually needs.

A test send carries a dummy token instead of a real one, so the recognition card only appears on a real send.

Mobile & Desktop Preview

  • Toggle between mobile and desktop view using the device icons in the upper left of the Canvas.

  • If a "mobile" label appears on an element, it means you are editing the mobile version only — changes here won't affect the desktop version.

  • You can also hide blocks on mobile or desktop entirely. Hidden elements appear blurred in the Canvas. To preview the email as it will appear to recipients (with hidden elements removed), click the eye icon in the top left corner.

Saving

  • Use the SAVE button in the top right corner frequently to store your changes on the server.

  • If you leave the editor without saving, your edits will still be stored locally.

  • Upon reopening the editor, you'll be prompted to choose between continuing with the locally stored draft or the server version.

  • This also applies when someone else saves changes while you are editing. Always confirm which version should be used, as saving will overwrite the server version.

AI assistant and saving

  • If an AI conversation has changed this email since your last save, the editor opens on that AI working version and shows a notice at the top of the screen: "Contains unsaved AI changes from this conversation".

  • Press SAVE to keep the AI version. Discard AI changes in that notice puts your last saved content back on the canvas instead.

  • Saving yourself, or restoring an older version from History, takes precedence: an AI working version that was created before that save is no longer offered when you reopen the editor.

  • The version history also contains snapshots labelled AI assistant, so the newest entry marked Current is not necessarily your own last save.

  • When the assistant applies a change, any unsaved local draft in your browser is discarded. Save your own edits before you ask the assistant for the next change.

Best Practices

  • Always preview your email before sending a test version.

  • Use rows to logically group and align content blocks.

  • Avoid using custom HTML unless necessary, as it may cause rendering issues in some email clients.

  • Thoroughly test dynamic elements (such as buttons, survey blocks, or sharing tools) across both desktop and mobile clients.

Did this answer your question?