--- title: "Content and Content Properties" slug: "content-and-content-properties" updated: 2025-05-21T06:46:58Z published: 2025-05-21T06:46:58Z canonical: "help.csgi.com/content-and-content-properties" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.csgi.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Content and Content Properties The available content elements are located in the **CONTENT** tab on the left side of the application. Just drag and drop a content element button, image, text block, divider, or social media sharing onto a row within the message Stage on the right. Note that the Stage area is initialized with one row, but additional rows can be added, and content can be dropped on them as well. If all rows are deleted, content cannot be dropped. **CONTENT Tab** ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/2024-09-06_16-43-34(2).png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) **CONTENT Tab Item Descriptions** | Item | Description | | --- | --- | | **TITLE** | Place a **TITLE** content element as a placeholder for a title block. | | **PARAGRAPH** | Place a **PARAGRAPH** content element for text in paragraph format. | | **LIST** | Place a **LIST** content element for a bulleted or numbered list. | | **IMAGE** | Place an **IMAGE** content element as a placeholder for an image or graphic file. | | **BUTTON** | Place a **BUTTON** content element as a placeholder for a graphical button associated with an action such as opening a web page. | | **TABLE** | Place a **TABLE** content element as a placeholder for a table containing a header, columns, and rows. | | **DIVIDER** | Place a **DIVIDER** content element as a placeholder for a graphical element that separates content such as a solid or dashed line. | | **SPACER** | Place a **SPACER** content element as a placeholder for a spatial element that separates content such as white space. | | **SOCIAL** | Place a **SOCIAL** content element as a placeholder for a icons that direct your customers to your social media sites. | | **HTML** | Place an **HTML** content element as a placeholder for a block of custom HTML code. | | **VIDEO** | Place a **VIDEO** content element as a placeholder for a video file. | | **ICONS** | Place an **ICONS** content element as a placeholder for graphical icons. | | **MENU** | Place a **MENU** content element as a placeholder for a list of items. | ### Content Properties Clicking a content element inside the message switches the **CONTENT** tab to **CONTENT PROPERTIES** mode, so you can change the settings of that particular content block. If you click outside of a content element, the row in which the content element is selected and its properties are visible. ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/2024-09-06_16-47-04.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) The **CONTENT PROPERTIES** area changes depending on the content element selected. Some properties are available for any content type, while others are specific for certain content types. For instance, the letter spacing property is available only for content blocks where there is a text element, like **TITLE**, **PARAGRAPH**, **TABLE**, and **MENU**. This setting enables you to customize the spacing in pixels between letters, where 0 is the default spacing for the font in use. Another example is the **BUTTON** element, where you have a number of tools to help you style the button and link it to your desired action (open a web page, send an email, make a phone call, etc.). The **Properties Panel** switches to button mode and allows you to set the button’s width, background color, text color, alignment, roundness of the corners, padding around the text, and so on. When the **Properties Panel** is longer than the height of the screen, a scroll bar appears on the right side. With buttons, as well as many other content items, the editor gives you great control of the design of your email messages. Some of the controls, including content **Padding** and **Borders**, have both a simple editing mode where only one setting is shown and an advanced editing mode, where more control is provided (e.g. specifying padding for the four sides of the object independently of each other). ### Text Editing If you click inside a text content block, the **Text Editor** toolbar appears directly on the editing **Stage**. It gives you access to a number of text editing tools: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, etc. ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/image-1725621640246.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) > ![Note](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/Note.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) > > If you set the font family to **Global Font**, it inherits the font family selected under the **BODY** tab. This allows you to change the font family for multiple elements at once just by changing that property in the BODY tab. **Text Editor Toolbar Item Descriptions** | Item | Icon | Description | | --- | --- | --- | | **Bold** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatBold.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply bold formatting to text. | | **Italic** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/image-1725559037015.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply italicized formatting to text. | | **Underline** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatUnderline.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply underline formatting to text. | | **Strikethrough** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatStrikethrough.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply strike-through formatting to text. | | **Text color** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatTextColor.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply color formatting to text. | | **Background color** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatBackgroundColor.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply background color formatting to text. | | **Superscript** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatSuperscript.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply superscript formatting to text. | | **Subscript** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatSubscript.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to apply subscript formatting to text. | | **Special character** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatSpecialCharacter.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to insert special characters such as symbols. | | **Emoticons** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatEmoticons.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to insert emoticons. | | **Nonbreaking space** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatNonBreakingSpace.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Use to insert a non-breaking space. | | **Hide**/**Unhide** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatHide.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Click to hide or show the formatting tools. | | **Clear formatting** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatClearFormatting.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Click to clear your formatting. | | **Insert/edit link** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatInsertLink.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Click to insert a new or edit an existing hyperlink, such as a URL, email address, or telephone number. | | **Remove link** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatRemoveLin.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Click to remove a hyperlink from text. | | **Merge tags** | ![](https://cdn.document360.io/c578bb14-e570-4b6e-93ed-f6c5b8a2d8a1/Images/Documentation/FormatMergeTags.png?sv=2026-02-06&spr=https&st=2026-10-26T12%3A27%3A25Z&se=2026-10-26T13%3A27%3A25Z&sr=c&sp=r&sig=iWYPG4pYirh3ckjQsok6g7ARb2J%2BmcJQD%2FSzBreQlI0%3D) | Click to insert a variable. |