Content elements

Once you have created a template, it can be filled with all kinds of elements: text, barcodes, tables, graphics... All types of elements are listed on this page.

There are several ways to insert elements, see Inserting an element.

Each element can have an ID and a class, as well as a number of other properties, depending on the element's type. When an element is selected, its properties can be changed; see Selecting an element, Attributes and Styling and formatting an element.
ID's and classes are particularly useful with regard to variable data (see Personalizing content) and styling (see Styling templates with CSS files).

When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file. It is possible to edit the source of the HTML file directly in the Designer; see Editing HTML.

Element types

The following types of content can be added to the content of a template:

Images and Dynamic images
Text and special characters
Date
Table
Boxes: Positioned Box, Inline Box, Div and Span

Tip: Wrapping elements in a box (see Boxes) or in a semantic HTML element makes it easier to target them in a script or in a style sheet. Place the cursor in the element or select multiple elements. Then, on the menu, click Insert > Wrap in Box. You can now use the wrapper element as a script's or style's selector; see Using the Text Script Wizard and Styling and formatting.
Hyperlink and mailto link
Barcode
Whitespace elements: using optional space at the end of the last page (Print context only)
Page numbers (Print context only)
Article, Section, Header, Footer, Nav and Aside are content sectioning elements; see MDN Web Docs - Content sectioning elements.
Other HTML elements: Heading (H1 - H6), Address and Pre
To quickly change a paragraph into a Heading, place the cursor inside of it, or select the paragraph (see: Selecting an element). Then select the appropriate element, either on the Format menu, or from the 'Element type' drop-down on the toolbar.
Snippets: a Snippet is a small, ready-to-use piece of content in a file
Business graphics

Whether it is best to use a Table or Box to position text, images and other elements, depends on the context in which they are used; see How to position elements for more information.

Editing HTML

When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file.

To see this, toggle to the Design tab in the workspace. Click anywhere in the content. Take a look at the breadcrumbs at the top of the workspace or select the Outline pane. The breadcrumbs show the HTML tag of the clicked element, as well as the HTML tags of other elements to which the clicked element belongs. The clicked element is at the end of the line.

To edit the HTML text directly:

In the workspace, toggle to the Source tab.

On this tab you can view and edit the content of the template in the form of plain text with HTML tags (note the angle brackets: <>). You may add and edit the text and the HTML tags, classes, ID’s and other attributes.

To learn more about HTML, see for example:

MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
W3schools: http://www.w3schools.com/html/default.asp

Many video courses and hands-on courses about HTML (and CSS) are offered on the Internet as well, some for free. Go, for example, to www.codeschool.com or www.codeacademy.com and look for HTML (and CSS) courses.

Emmet

Emmet is a plugin that enables the lightning-fast creation of HTML code though the use of a simple and effective shortcut language. The Emmet functionality is available in the HTML and CSS source editors of Connect Designer. Emmet transforms abbreviations for HTML elements and CSS properties to the respective source code. The expansion of abbreviations is invoked with the Tab key.

In the Source tab of the Workspace, you could for example type div.row. This is the abbreviation for a <div> element with the class row.
On pressing the Tab key, this abbreviation is transformed to:
<div class="row"></div>
To quickly enter a table with the ID 'green', one row, and two cells in that row, type:
table#green>tr>td*2
On pressing the Tab key, this is transformed to:

<table id="green">
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

Tip: For more examples, see this how-to: Streamline coding with emmet and custom abbreviations.

All standard abbreviations can be found in Emmet's documentation: Abbreviations.

To learn more about Emmet, please see their website: Emmet.io and the Emmet.io documentation: http://docs.emmet.io/.

Preferences

To change the way Emmet works in the Designer, select Window > Preferences, and in the Preferences dialog, select Emmet; see Emmet preferences.

Attributes

ID and class

Every element in the content of a template can have an ID and a class. ID's and classes are particularly useful with regard to variable data (see Personalizing content) and styling (see Styling templates with CSS files).

You can specify an ID and/or class when you add the element to the content.

To add an ID and/or class to an element that has already been added to a template, select the element (see Selecting an element) and type an ID and/or a class in the respective fields on the Attributes pane at the top right.

Note: Each ID should be unique. An ID can be used once in each section.

Other attributes

Apart from the ID and class, elements can have a varying number of properties, or 'attributes' as they're called in HTML (see Editing HTML). Which properties an element has, depends on the element itself. An image, for example, has at least four attributes: src (the image's URL), alt (alternate text), width and height. These attributes are visible on the Attributes pane when you click an image in the content.

For each type of element, a small selection of attributes is visible on the Attributes pane at the top right.

In a multilingual template, the proprietary data-translate attribute marks an element for translation. For more information see Translating templates and Tagging elements for translation.

Changing attributes via script

Many attributes can be changed via the user interface. Another way to change attributes is by using a script.

Any of the Script Wizards can produce a script that changes an attribute of an HTML element. Set the Options in the Script Wizard to Attribute, to output the script's results to the value of a specific attribute. See Using the Text Script Wizard.

In code, you can change an element's attribute using the function attr(); see Writing your own scripts and Standard Script API.

Inserting an element

To insert an element in a section:

Navigate to where you want to insert the element, using the arrow keys, the mouse, the Breadcrumbs (see Selecting an element) or the Outline pane.
Click the respective toolbar button. Alternatively, click the element on the Insert menu.
Add an ID and/or a class. ID's and classes are particularly useful with regard to variable data (see Personalizing content) and styling (see Styling templates with CSS files).

Note: Do not give an element the ID 'pages' or the class name 'dynamic'. These are reserved words. Using them as an ID or class name leads to undesirable effects.

Use the Location drop-down (if available) to select where to insert the element.
- At cursor position inserts it where the cursor is located in the template.
- Before element inserts it before the HTML element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be before the <p> tag.*
- After start tag inserts it within the current HTML element, at the beginning, just after the start tag.*
- Before end tag inserts it within the current HTML element, at the end, just before the end tag.*
- After element inserts it after the element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be after the end tag of the paragraph (</p>).*
- Replace inserts it in place of the currently selected element. (This option is not available when inserting content in a Master Page.)
* If the current element is located inside another element, use the Elements drop-down to select which element is used for the insertion location. The list displays every element in the breadcrumbs, from the current selection point down to the root of the body.

Note: HTML has some restrictions as to which types of elements are allowed as children of other elements. For example, a paragraph element is not allowed to have children that are block level elements - like a Div or a Table. If inserting content at the selected location would produce invalid HTML the final result may be different than expected. For example, when you insert a Div into a paragraph, the paragraph gets split in two. This means you end up with two paragraphs with the Div in between.

For a list of links to the different types of elements, see Element types.

Selecting an element

When an element is selected, the Attributes pane shows the attributes of that element, and the Styles pane, next to the Attributes pane, shows which styles are applied to it.

To select an element in the content, you can of course click on it, but this isn't always as easy as it seems, especially when the element has elements inside it.

Tip: Click the Edges button on the toolbar temporarily adds a frame to certain elements on the Design tab. These will not Print or output.

There are two more ways to select an element in the content:

Using the Breadcrumbs at the top of the workspace.

Breadcrumbs show the HTML tag of the clicked element, as well as the HTML tags of 'parent elements': elements inside of which the clicked element is located. The clicked element is at the end of the line.
Elements with classes or IDs show these details next to them, for instance div #contents > ol.salesitems > li ~contents.
Click any of the elements in the Breadcrumbs to select that element. If an element is selected in the Breadcrumbs and the Backspace key is pressed, that element is deleted.
Click ~contents to select the contents of the element. This way you may, for example, quickly change the text of a hyperlink.
Using the Outline pane. You can find this pane next to the Resources pane. It displays a tree view of the elements in the file. Click an element in the tree view to select it.

Deleting an element

To delete an element, select it - as described above - and press the Delete key.
If the deleted element was targeted by a script, you will be asked if you want to delete the script as well.

Scripts are used to personalize templates. To start learning more about scripts, see Personalizing content and Writing your own scripts.

Styling and formatting an element

Format elements directly

Images and other graphical elements can be resized by clicking on them and dragging the resize handles. There are toolbar buttons to color, indent or style text. Other toolbar buttons can left-align, right-align, or rotate graphical elements.

The toolbar buttons only represent a selection of the formatting options for each element. There are no toolbar buttons to change an element's margins, or to add a border to it, for example. To access all formatting properties of an element, you have to open the Formatting dialog. There are two ways to do this:

Right-click the element and select the type of element on the shortcut menu.
Select the element (see Selecting an element) and select the type of element on the Format menu.

See Styling and formatting for more information about the formatting options.

Format elements via Cascading Style Sheets (CSS)

It is highly recommended to use style sheets in templates right from the start. Even more so if they consist of different sections (for example, a covering letter followed by a policy). Using CSS with templates allows a consistent look and feel to be applied. A style sheet can change the look of multiple elements, making it unnecessary to format each and every element in the template, time and again, when the company's layout preferences change. See Styling templates with CSS files.