====== How do I create an email with the email builder? ====== 

The email builder is a template that offers you unlimited possibilities for designing a newsletter. With no programming skills at all, you can design your newsletter flexibly while at the same time having access to various design templates. Even the templates can be completely changed, which is why it is easier to start with a template.

The Email Builder offers a variety of options with regard to: 

  * Configuration: Colors, frames, backgrounds, font sizes, and much more
  * Elements: Header, editorial, table of contents, text/image elements, links, and social media link.

Newly built emails can be saved as reusable templates. 

===== Create message ====

If you create a new message, select the template “Email Builder”. Now you can choose from an existing template, in which styles and articles are already integrated, or you may create an empty mailing. 

{{:en:delivery_create_emailbuilder.png?nolink&500|}}

By clicking //OK//, you created a new message with the email builder! Now you can edit the design and the content of the template. Click on "Edit message".


===== Editor =====

The following actions are available in the editor:

{{:en:delivery_drafts_emailbuilder_menue.png?nolink&900|}}

  * **Settings**: The following storage options are available. Using these settings, developers of email templates are able to control the behavior of the email editor (refer to "Config Tags" of the article //[[en:otml|]]//).
    * **Inline CSS**: Option is selected by default. A CSS style sheet defined in the source code is transformed "inline" into the corresponding tags of the //body//. This can especially improve the display of the email in email clients that ignore CSS style sheets.
    * **Ignore storage errors**: Option is not selected by default. Before saving, errors in the source code, such as syntax errors, are shown.
    * **Used CSS inliner**: Choose CSS inliner to be used when the option "Inline CSS" is selected:
      * Default: Option is selected by default. This version can only transform CSS for single, non-comma-separated selectors.
      * Next Generation: This version does not underlie restrictions of "default version" and can inline CSS blocks with stacked or comma-separated selectors, e.g. <code html>.classname a {
    color: #000000;
}

.class1, class2 {
    padding: 10px;
}</code>
  * **Reset changes**: Reset changes that have not yet been saved.
  * **Save**: Save without closing the editor.
  * **Save & exit**: Save and go to the message details.

==== Further settings ====

The icons on the left side directly under the menu bar allow you to make the settings for the following functions: 

{{:en:delivery_drafts_emailbuilder_menue_left.png?nolink&400|}}

  * **Resolution**: You can choose between fullscreen and diverse resolutions in landscape or portrait.
  * **Highlight editable elements**: The editable values get marked yellow.
  * **Show layout actions**: Show/hide actions for inserting, copying, moving, and deleting layouts.
  * **Edit title**:  edit title (title tag) in HTML format. Condition: title tag must be included in the underlying master template. Placeholders of the types field or function can be used. 
  * **Edit preheader**: Here you can create and edit the preheader of your mailing.
  * **Edit CSS**: Configure the design of your newsletter.


==== Add a new layout ====

You have created a new newsletter with the email builder. 

{{:en:delivery_drafts_emailbuilder_layout1.png?nolink&600|}}

With a click on the button //add layout//, you can adjust the design and contents to the template by selecting a category on the left side:

{{:en:delivery_drafts_emailbuilder_layout.png?nolink&400|}}

You can build your creative by combining different categories. If you move the mouse over the blocks, they will be displayed in yellow. \\ Now you can edit the selected area.



==== Edit a layout ====

In the editor, you can select templates, replace images, personalize, translate, expand, shorten, or rewrite texts with the help of AI and much more.

{{:en:delivery_drafts_emailbuilder_editorial_text.png?direct&400|}}

You can also put a link behind a button. Enter the media browser via the threeline button on the right to choose a PDF or picture file. 

{{:en:delivery_drafts_mediabrowser_button.png?direct&400|}} 

Using the image editor, you can insert, remove, and link images in various ways.

{{:en:delivery_drafts_mediabrowser_picture_editor.png?direct&400|}}

| //Add link// | Link an image .\\ |
| //Replace (Upload)// | Insert an image via drag & drop or upload from your computer. \\ |
| //Replace (Media-Browser)// | Upload an image from the Media Browser that was previously saved there. \\ |
| //Replace (AI)// | Generate an image by entering a description. \\ |
| //Remove image// | Remove an inserted image.\\ |
| //Add entry to table of contents// | Add or remove the image from the table of contents. \\ |


==== Footer ====

When it comes to the protection of data privacy, the footer is the most important part of your email. Use a design template and then change all the data.
<WRAP round important 70%>
Make sure that your company information as well as the link to unsubscribe are included in every newsletter! You must not send an email without the reader’s option to unsubscribe!
</WRAP>


==== Configuration ====

When you chose a template you can change different aspects of the layouts’ designs. Click on „Edit CSS“. Here you can edit the basic design of your email. Open up the sliders to edit font colors, size, and so on. Go to article > Text to define the look of your article text.

{{:en:delivery_drafts_emailbuilder_css_editor.png?nolink&500|}}

<WRAP round important 70%>
When your personal language setting is English the names of the CSS classes might still be in German and vice versa. This is because their names are hardcoded in the language the master template was programmed.  
</WRAP>

==== Text version ====

Mailings that were constructed by using the email builder get delivered as multipart and contain an automatically created test version. Click on „Text“ next to the button „HTML“ to have a look at the text version.


   

{{tag>email_builder css_editor templates ai}}