2022.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687).
Preview tab
ThePreviewtabshowsthesectionasitwilloutputwiththecurrentrecord(see"Loadingdata"on
page710),showingthepersonalizedcontent(see"Personalizingcontent"onpage708).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recom-
mended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956and"Emmet"onpage473.
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<!--form-
at:auto-->toturntheformattingbackon.
Theseareallformatoptions:
l
<!--format:off-->turnstheformattingoff
l
<!--format:smart-->or<!--format:auto-->turnstheformattingbackon.
Page 989