1.7

Design Tab
The design tab show 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.
The top of the Design tab contains an area with the following options:
l
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.
l
Context Selector: Displays the current context. The drop-down lists available contexts.
Clicking on a context switches to that context.
l
Section Selector: Displays the currently active section. Clicking on another section
switches to that section.
l
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.
l
Zoom Level: Displays the current zoom level and drops-down to change the level.
l
Zoom in: Zooms in by 25%
l
Zoom out: Zooms out by 25%
l
Actual Size: Zooms to 100%.
l
Fit Width: Adjusts zoom to fit the exact width of the template to the available workspace.
l
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.
Preview Tab
The preview tab shows the template as it will output with the current record (see "Loading data"
on page524), with the personalized content (see "Personalizing Content" on page522).
Although it is possible to edit the template in Preview mode to a certain extent, it is
recommended to do all editing in the Design mode.
Page 690