2. Template Editor2.0

General information

In addition to the classic editor, Maileon introduces a new version of it with a variety of additional features. The main objective of the editor 2 is to be intuitive and user friendly, while at the same time offering a considerably expanded range of functions. The new, contemporary app structure incorporates the current design development of computer and Internet applications.

Since the most important factor is the good usability, Maileon maintains a strong structural setup in addition to a significantly increased range of functions. This allows new users to master the editor and easily handle its various tools.

The new features in Editor 2

editor 2 offers a whole range of new and enhanced functionalities. Here is a brief overview of the most important new features.

Explore the new features of editor 2:

• App view: Contemporary design and a forward-looking layout environment that always takes into account the requirements of our users.
• Editing in one window: No more pop-up windows for editing templates and content. This way you will see every change immediately in your newsletter draft.
• Dark mode: Light-dark reversal of text and background for eye- and energy-saving work on the screen.
• Article elements: The range of functions related to the element design has been significantly extended:

1. Duplicate your items with one click.
2. Move your items quickly and easily per drag & drop.
3. Create combined article elements by converting them into a grouped block and save them as a new article.
4. Enhance your layout with background images that you can assign directly to the entire template, an individual item or a button.
5. Specify a fixed design of individual elements by locking the editing and thus protecting the article from unwanted changes.

• Buttons: Design linked buttons as you wish! Several new editing tools are available, such as

1. color adjustment,
2. alignment,
3. framing (solid, dashed, dotted or double-dashed),
4. frame rounding or
5. background images.

• Fonts: A whole range of new options concerning text formatting is at your disposal, such as

1. pre-definable headings from H1 to H6,
2. different font sizes within an element,
3. color library for fonts,
4. complete, coordinated color themes and
5. all fonts for mobile and desktop devices are also customisable in dark mode.

• Reverse the mobile orientation of duplicate items:Simply reverse the column order for the mobile view! What was displayed next to each other in the desktop view is arranged below each other in the mobile view, with just one click.

In addition, we give you extended access to multiple background functions, including access to the HTML level, convenient automated creation of text versions, setting up your own help with a customisable hint function – and much more.

Apps – the new look and feel in Editor 2

With the new app interface, we combine contemporary and future-oriented design with user-friendly functionality. At the same time, we also keep an eye on feasibility on smaller screens, such as mobile devices.

At the start of a new project, you can choose between the Classic and the new Editor 2. Once selected, all templates and self-created projects produced in the same editor are available to you.

The process phases of mailing creation remain essentially the same, with the new Editor 2 only the „Template“ phase is omitted, as selecting or changing a template is now located directly in the content phase. Except for the „Content“ phase, all other phases remain the same in terms of appearance and editing.

You create your mailing in the Content phase. You have several options to get started:

• Template gallery: We have put together an extensive collection of ready-made mailing templates for you, which you can easily and conveniently adapt to your requirements as you like. Adopting ready-made elements can save you a considerable amount of time.
• Saved templates: Select your own template. All templates that you have created in Editor 2 are saved in this area.
• Please note: Templates from the Classic editor are not compatible due to the completely new editing structure.
  
• Import HTML file: Upload external mailing templates as HTML or ZIP files and customise them – our WYSIWYGizer identifies structural elements and converts them into editable blocks.
• From scratch: Start from scratch with a blank page.

The Template gallery
The template gallery contains numerous predefined dispatch templates. The advantage is that you receive a complete, coordinated design set with variable blocks. All templates contain standard elements such as an imprint, social media icons or a link to the browser version. In the various folders you will find templates with some specific structures, e.g. in the Ecommerce area. You can use any of these templates and redesign them as you wish. This means you don’t have to start from scratch and thus can possibly save a lot of time in the editing process.

The gallery currently contains over 100 templates and is constantly being expanded.


After you have marked your desired template and selected it using the button at the top right (Select element), the template is transferred to your mailing and is now ready for editing.

The start screen

A new feature compared to the Classic editor is the division of the screen into four areas. This means we have dispensed with the former pop-up windows. All settings and changes are now made in the same window and are immediately visible in the result. In this way, you can keep an eye on your design at all times while you are working on it.

The editing window is divided into four areas:

1. upper menu bar
   
2. layout area on the left
   
3. app-sidebar on the right
4. lower menu bar
   

The upper menu bar

In the top menu bar you will find frequently needed basic commands.

The components of the top menu bar are:

1. favorites,
2. undo/redo,
3. save and
4. close:Use this command to exit the content editing and return to the overview of the editing phases.

In the middle area, 3 places are reserved for your app favorites. By default, the following 3 apps are preset here:

• Template:Show/hide the right app panel
• Preview:Here you leave the editing window and go to the preview window. You can simulate different view modes, for example screen sizes, text mode or dark mode. It is also possible to fill in placeholders in the text with specific contact information, for example to check the salutation rules for logical correctness. The preview area offers numerous other functions.
• Assistant: This area forms your personal knowledge pool. The information you enter here will be suggested to you in the appropriate place.

You can change the selection of apps quickly and easily by dragging individual app buttons from the app panel to the upper menu area and dropping them at the desired position.

The bottom menu bar

In the menu bar at the bottom of the editing window, you can make numerous view settings, among other things. The single elements and subelements of the lower menu bar are explained below. The figures refer to the image.

1. Configuration of the editor tools
These 3 points include different view settings that can be activated or deactivated in the form of sliders. The type of view options offered depends on the view setting for the editor. If the drag & drop editor is active, the following view options are available:

• Change history:
  When activated, a clock symbol is displayed between the undo and redo arrows. The change history logs all the individual steps you have carried out since the last time you saved the design. By clicking on the clock symbol, you can view the list of all work steps and undo or redo individual work steps, regardless of the order.
  
  Please note: As soon as you save your draft, the change history is cleared.
• Show minimap:
  The minimap shows the entire newsletter design as a thumbnail between the design view and the app sidebar on the right. By clicking on a specific area in the minimap, you jump to the corresponding newsletter section in the large view. As an orientation aid, the currently visible newsletter section is shaded gray in the minimap.
  
• HTML-Zoombar:
  This slider displays a zoom area in the lower menu bar, which you can use to enlarge or reduce the size of your newsletter design.
  
• Metainformations:
• DOM Tree Panel:
  The DOM Tree Panel is displayed on the left-hand side of the editing window and shows all elements of your design in the form of a structure tree. Here you can navigate through your newsletter design, copy, move or delete individual elements or even entire element blocks. The corresponding element is highlighted in the design view to match the selection in the structure tree. The editing options associated with the element are also displayed in the app sidebar on the right.
  

 

• 2. Editor-views

You can work in different views. The drag & drop editor is set by default, which allows you to work in the layout view.

In addition, we also provide you with an HTML and a text view. Each of these additional view options offers you special functions via the top gray menu bar. Select the desired view setting according to your requirements.

• Code editor view:
  
• Auto text version:
  

3. Text synchronization
Clicking on the text synchronization icon in the middle of the lower menu bar opens the corresponding menu for creating a non-HTML text version of your e-mailing in the right app sidebar. You should always keep a text version of your e-mailing for those who don’t want to read the newsletter in HTML-form. In the editing menu, you can select whether you want to perform the synchronization manually or automatically. Here you can also choose the display settings of the icon in the lower menu bar. If for example the synchronization is performed automatically, the display of the synch icon in the lower menu bar is not necessary. Please note: If you don’t create a text version of your newsletter, you will not be able to send a test mailing to a test list.

4. Notifications

5. Hide the app sidebar
To enlarge your workspace, you can use the square icon on the far right of the bottom menu to hide the app sidebar on the right of the layout window. Only the contextual menu bar on a selected element is then available for editing. However, as soon as you click on the editing pen here, the app sidebar will be displayed again, where further editing options are available to you.

The layout area

The layout section takes up the largest area of the screen. Here you can see your design in the layout view, in which all the changes you make are directly visible. You can select, copy, move and delete individual elements, or, format individual text passages as desired. As soon as you click on an element, a blue frame line and a contextual menu bar appear directly on it. Simultaneously, the corresponding menu for general layout design will be opened in the right-hand app sidebar.

After selecting an element, the following editing options are available:

1. Blue marking line:The round handle on the left-hand side is used to move the element to another position in the e-mailing using drag & drop.
2. Context menu in the layout window:This menu bar allows you to edit single text passages. In contrast to the app sidebar, you can format or link individual text passages within an element differently from the rest of the text. Clicking on the pencil icon takes you to the associated command options (see image below). You can use the other icons to duplicate the element, group it with other elements or delete it.
   
3. App sidebar „Text“:In the right-hand app sidebar, you make general layout settings for the element. All changes you make here are applied to the entire element.

The app sidebar

The app sidebar on the right-hand side is fundamentally new. Here we provide you with a great variety of design options. The number and scope of the apps are constantly being developed. The apps allow you to work on your e-mailing in the most creative and technically sophisticated way possible. Below you will find an overview of the apps available to date with detailed explanations and examples of the most common applications.