Workspace

The Workspace pane is where everything comes together. It is the contents of the page, the WYSIWYG editor that shows what the output will look like.

The Workspace contains three tabs, or four, when a Web section is open. To switch between the tabs, click on the tab at the bottom, or select View > Design View, Preview View or Source View on the menu.

A lock icon displayed next to the file name indicates that the file is read-only. Saving a read-only file opens the Save as dialog, allowing you to save the file under a different name. The new file is then opened and can be edited in the Designer.

For an overview of keyboard shortcuts, see Keyboard shortcuts.

Design tab

The Design tab shows the template including all styles, text and images as well as the placeholders used for variable data. In this tab, the template's scripts are not executed and only placeholders are shown.

Normally you would only edit a template in Design mode.

The top of the Design tab contains an area with the following options and buttons:

  • Breadcrumbs: Displays the element type where the cursor is located and any of its parent elements. Elements with classes or IDs show these details next to them, for instance div #contents > ol.salesitems > li. Click on an element in the Breadcrumbs to select it.
    When an element is selected in the breadcrumbs and the Backspace or Delete key is pressed, that element is deleted.
    If the deleted element was targeted by a script, you will be asked if you want to delete the script as well.

  • Context Selector: Displays the current context. The drop-down lists available contexts. Clicking on a context switches to that context.

  • Section Selector: Displays the currently active section. Clicking on another section switches to that section.

  • Media Selector (Master Page editor only): Displays a list of Media resources. Clicking on a media will display its Virtual Stationery background while in Preview mode.

  • Zoom Level: Displays the current zoom level and drops-down to change the level.

  • Buttons

    • Zoom in: Zooms in by 25%

    • Zoom out: Zooms out by 25%

    • Actual Size: Zooms to 100%.

    • Fit Width: Adjusts zoom to fit the exact width of the template to the available workspace.

    • Refresh: Reloads the view, including static external images, remote stylesheets, and remote scripts, and re-runs the scripts (the latter in Preview Mode only).

    • Responsive Design View: Use the drop-down to select a specific screen width, to test the design for different devices. Not available in Print contexts.

Tip: You can also use the mouse's scroll wheel in combination with the Ctrl button to gradually zoom in or out.

When a template is open, the workspace also shows a ruler and guides (see Guides).

Preview tab

The Preview tab shows the section as it will output with the current record (see Loading data), showing the personalized content (see Personalizing content). Content added by a script isn't visible in the Design tab, but is visible and can be inspected in the Preview mode.

Content cannot be edited in Preview mode if the option Evaluate Handlebars expressions is enabled for a section (which is the case by default in a new template; see Section properties dialogs).

Source tab

The source tab displays the HTML source of the section, including HTML Headers, CSS and HTML code. The source is displayed in a color-coded text editor, to quickly visualize the code.
In this tab changes and adjustments can be made to the code. When editing a template in Source mode you should write HTML. For shortcuts that can be used in this editor, see Text editors: Source tab, JavaScript, CSS, Script Editor and Emmet.

To the left of the Source tab, a bar helps visually identify the start and stop of an element. For example when clicking on the opening <table> element, this bar marks the whole <table> and all its contents, until the ending </table> tag.

Pretty print options

In the Source view the HTML source of the template is "pretty printed" (that is: formatted, adding new lines and indentation) to make it more readable.
When this is undesirable, the Source view formatting can be turned off for (parts of) a section by adding <!-- format:off --> in Source view, at the beginning of the text or in between two HTML elements. From that point on, pretty printing will be disabled for that section. Use <!-- format:smart --> or <!-- format:auto --> to turn the formatting back on.

These are all format options:

  • <!-- format:off --> turns the formatting off

  • <!-- format:smart --> or <!-- format:auto --> turns the formatting back on.

  • <!-- format:collapse --> forces the following HTML elements to be collapsed.

  • <!-- format:expand --> forces the following HTML elements to be expanded.

Example

This example shows how to turn pretty printing off for one specific HTML element: a Div element.

<p>In a "pretty printed" paragraph
	<br>text is indented automatically on the Source tab.
</p>
<!-- format:off --><div anchor="page_media_0" 
style="font-family: Lucida Console,monospace; 
line-height: 1.2; white-space: pre-wrap; position: absolute; overflow: hidden;
-moz-box-sizing: border-box; width: 675px; height: 68px; top: 209.967px; 
left: 65.4px;" offset-x="103.19999694824219" offset-y="247.76666259765625">
@Header1@ </div><!-- format:auto-->

Live tab

The Live tab shows the result of the template as rendered by the Gecko rendering engine. It is a good indication of how an HTML template would display in a visitor's browser, especially if they are using FireFox (which uses the Gecko engine).