2018.2

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.
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" on
page269).
Preview tab
The Preview tab shows the section as it will output with the current record (see "Loading data"
on page295), showing the personalized content (see "Personalizing Content" on page292).
Content added by a script isn't visible in the Design tab, but is visible and can be inspected in
the Preview mode.
Although it is sometimes possible to edit the template in Preview mode to a certain extent, it is
recommended to do all editing in Design mode.
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" on page467 and "Emmet" on page149.
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
Page 495