In this article, you will learn how to build the body of your **email** using either the user-friendly visual builder or the HTML builder.
# Navigating the Visual Builder
The Visual Builder utilizes a simple drag-and-drop workflow, enabling you to build your email templates without any advanced coding know-how. It consists of two main parts: an editing region and a tabbed pane with various elements that you can drag onto the editing region or change its settings.
In the picture below, you can see the tabbed pane on the right side is constituted by 3 main tabs, the Settings, Rows, and Content, that we will explain in detail below. In addition to that, you can access Jinja personalization in a similar style of workflow, go fullscreen, and show or hide the structure of the template by clicking the respective button on the bottom right of the editing region.

## 1. Settings tab
The Settings tab allows you to configure the global parameters of your email template, such as the width of the content area itself, title meta tag, background color, background image for the whole email, content area background color, default font, link color and language attribute. You can do so by simply changing sliders or respective input fields.

## 2. Rows Tab
The elements in the Rows tab allow you to [design](🔗) the structure of your email template. These row elements serve as a frame for the content you will be adding later.
You can also configure the appearance of these rows. A 'Row Properties' pane will appear if you click on a row that is already placed in the editing region. Here you can set additional settings for each individual row, such as background color, padding, and more.

### Row display condition
You can set specific conditions for every row so that it is shown only to a specific group of users. To do this, double-click on the relevant row and go to `Add segment/s
` in the Row Properties.

This will open the segmentation filter, where you can choose the specific segmentation of customers who should see the row in the campaign. You can add **multiple segments** and **choose the type of condition**:
At least one condition must be met (logical **OR**)
All conditions must be met (logical **AND**)

From the technical perspective, applying the condition effectively creates a Jinja condition rendered in HTML. In order to check or edit conditions in Jinja, click on `Edit condition
` under Display condition in Row Properties.
A condition in jinja that lets the row be seen only by male customers would look like this: `before
` -format {% if customer.gender == 'male' %} and `after
` - {%endif%}.

Note: If you are acquainted with Jinja, you do not have to rely on the condition to be generated automatically. Instead, you can write it in Jinja yourself by not choosing `Add segment/s
` but `Add condition
`.

### Saving custom rows
After hovering your mouse over the row in the editor, you will notice 4 icons at the top right corner. These allow you to comment on, save, delete, or copy the row. The same buttons can be accessed at the top right of the Row properties panel, as shown in the picture below. Saving your custom made rows will store them within the [Asset Manager](🔗) so that they can be accessed and reused, or modified later.

After clicking the save button, you will be presented with a popup asking you to name the row you are saving and will give you the option to add tags or include it in an initiative for further clarity.

Editing an already saved custom row
After editing an already existing custom row in email editor, the saving popup will give you the option to either update the existing saved row, or save the new one as a copy.
Custom row update
Updates made to existing custom rows (from email editor or Asset Manager) **will not be reflected in existing campaigns** that used the row previously. Changes to existing templates and campaigns have to be done individually by manually replacing the row with the updated version.
You can manage, edit, and view the saved custom rows in the [Asset Manager.](🔗) To access and use them directly from the email editor, select the `Custom
` option in the dropdown menu within the Rows tab. This will display your saved custom rows. Similarly, you can use Predefined Templates in Asset Manager as a starting point for your Custom rows. Read more about our [Predefined Templates](🔗).

## 3. Content Tab
Finally, after adding the "frames", you can fill them with content. The various content elements that you can use are grouped together under the Content tab.

The following content elements are available:
Element | Description |
**Text** | This element allows you to create a text paragraph with formatting options, such as text color and spacing. |
**List** | This element allows you to create numbered or bulleted lists. |
**Paragraph** | This element allows you to write any number of paragraphs that contain the same formatting of the content, such as font size, font weight, or font family. |
**Title** | This element allows you to include a title with H1, H2, H3 styles tags in your email template. |
**Spacer** | This element allows you to add a space between other elements in your email template. |
**Image** | This element allows you to upload and place an image in your email template. |
**Button** | This element allows you to add a button to your email template. You can assign the following actions to this button: opening a web page, sending an email, calling or sending an SMS. |
**Divider** | This elements allows you to place a horizontal line or an invisible divider between other content components. |
**Social** | This element allows you to include buttons that trigger social media activities, such as sharing a web page or liking a product or service. |
**Dynamic Content** | Insert an [**HTML block**](🔗) you created before in the Asset Manager. This can be for example a predefined header or footer. You can also add any HTML block by reference: to do so click on `Configure block ` and then select any of the existing HTML blocks. |
**HTML** | This element allows you to include your custom HTML code. |
**Video** | You can add a link to a video hosted on Youtube or Vimeo. This will generate a clickable image preview of the video. |
**Icons** | This element allows you to put icons or small images, right next to the next. After dropping the `Icons ` block, click on `Add new icon ` and either choose to customize it directly in the editor in `Apply effects & more ` or upload a ready-made icon after clicking on `Change image `. Afterward, you can use the icon in the text. To learn [**read the BEE editor's documentation**](🔗) or [**watch their demo**](🔗). |
**Menu** | This element allows you to create a customized choice menu, each choice with a specific title and URL link. To learn [**read the BEE editor's documentation**](🔗) or [**watch their demo**](🔗). |
## History of changes
After you have made changes to the email template, our visual editor lets you view the change history, including things like the time and nature of the edit, and easily undo or redo these changes. You can find the appropriate buttons in the bottom left corner of the editor interface.

## BEE editor HTML 3.0
Great news! Our visual email editor (BEE) has significantly optimized the way the output HTML is generated. The resulting HTML will now be much simpler and **smaller in size by 50%** on average. Enjoy less Gmail clipping and more valuable content in your emails!
The changes include:
Simpler, cleaner HTML output
Reduced output file size by using HTML File Compression
Wider email client compatibility, including reduced Gmail clipping
Faster design rendering
The changes will not influence your already saved and running templates/campaigns. New compact HTML 3.0 will be applied only to newly opened and saved, or newly created email templates.
There should not be any action needed on your side, but please be aware that the HTML structure will change and make sure your email templates render correctly before saving. In case you see any issues, you can **switch back to the legacy HTML output under _Settings_** and report the problems to our support.

Testing period until Jun 15, 2022!
You can test the new compact HTML 3.0 until **Jun 15, 2022**. After this date, the option to switch back to the legacy output will be deprecated and all newly saved email templates will start using the compact HTML 3.0.
We recommend testing all your important existing email templates prior to this date and reporting any discrepancies to our support. You can [read about all email testing options here](🔗).
### Simpler, cleaner HTML output
In version 3.0, BEE has moved from a DIV element-based fluid hybrid design to a more standard table layout. This minimizes the number of conditional comments and CSS media queries. As a result, HTML files are smaller and more efficiently coded.
Summary of Key Changes:
Migration from `
<div>
` to `<table>
` formatted codebaseMost Content Blocks have been re-coded for conciseness
Final HTML code is now compressed to remove whitespace between tags
Transparent dividers are now automatically converted into padding
For more details read through the official [BEE documentation](🔗).
# Navigating the HTML Builder
The HTML builder allows you to create an email template by writing HTML and CSS code. There are three modes available for editing your email temples: Code, Edit, and View. You can switch between these modes by clicking on the respective buttons located at the top-right of the email template editor.

Column Title | Column Title |
**Code** | This mode allows you to write HTML and CSS code. |
**Edit** | This mode presents an editable version of the resulting email, and allows you to edit paragraphs, upload pictures and insert personalizations. |
**View** | This mode allows you to view the resulting email. |
## Uploading images and other files
Images and other files are handled via our [File management](🔗) within the [Asset Manager](🔗). You can access your stored files in the Asset manager by using the (+) asset picker button that is present at the bottom of the campaign editor or action node modal. Then, you can insert the file by either Copy HTML or Copy URL.
Read more about [inserting files into your email campaign](🔗).

In case you are uploading HTML templates that were created outside Bloomreach Engagement, they can contain relative paths to files, e.g. <img src="./name_of_your_image.jpg">. Use the action "Replace relative paths" to automatically replace the relative paths with the public URLs. [Read more here](🔗).
## Text font
We recommend using generally accepted fonts, like Arial, Tahoma, Verdana... because Email providers (like Outlook) tend to reject special fonts. In order to import those fonds, go to your HTML email builder and specify your <style> code as shown below.

Simply copy the code and insert it to your html email builder.
Alternative, you can try importing new fonts in HTML from Google API. Both options should achieve the same outcome, but you might prefer working with one or another.
there is no possibility to have bold, italic, or other special formatting and no HTML/CSS code in the subject line in the Visual Builder.
Formatting the subject line
Please bear in mind that you cannot use bold, italics, other special formatting, or HTML/CSS code in the subject line in the Visual Builder.
# Other Features
## Personalization
Both the Visual builder and the HTML builder allow you to insert personalized customer or event attributes (such as name) or [vouchers](🔗). These are inserted using the Jinja code. You can access it in the Personalization pane by clicking on the bottom-right button with the accolades. Here you’ll find the settings and parameters to generate the Jinja code snippets.
You can read more about Jinja [here](🔗).
## Multilingual versions
Both the Visual Builder and HTML Builder allow you to create different versions of your email template for each language in your project. You can access this function by clicking on the three dots on the top-right side of the template builder, and then on `Add language version
`.
When a customer does not have any language set, the default template will be used. When creating a new language mutation, the default template will be copied. However, if the default template is changed, the copies will not be updated. Learn more about how to use multiple languages [here](🔗).

## HTML Blocks
The HTML blocks allow you to create standardized email template components, such as headers, footers, or call-to-action buttons and reuse them in every email. Read more about HTML blocks [here.](🔗)