1.8

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
Buttons
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
Refresh: Reloads the view, including static external images and remote
stylesheets, and re-runs the scripts (the latter in Preview Mode only).
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.
When a template is open, the workspace also shows a ruler and guides (see "Guides" on
page215).
Preview tab
The preview tab shows the template as it will output with the current record (see "Loading data"
on page239), with the personalized content (see "Personalizing Content" on page237).
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.
Source tab
The source tab displays the HTML source for the template, 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. For shortcuts that can be used in
this editor, see "Text editors: Source tab, JavaScript, CSS, Script Editor" on page376 and
"Emmet" on page109.
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.
Page 401