Source code paragraph
You can enter HTML code in the source code paragraph. Email programs do not show HTML to the full extent, so code entered here may lead to a faulty layout in your mailing.
The source code paragraph can be used by the Content interface paragraph, which you can use to automatically fill in the content fields.
source-code-paragraph.mdxCreating a source code paragraph
- While editing the mailing content in the Template Kit, click New: Content Paragraph.
Tip
You can also use the paragraph in the header and footer area by clicking Header or Footer.
- Click Source Code.
- In the configuration window, click Apply. The newly created source code paragraph will appear on the left side in the preview window.
source-code-paragraph.mdxConfiguring a source code paragraph
- On the left side of the preview, in the menu bar of the source code paragraph, click Source Code.The configuration window opens on the right-hand side.
- See the following tables to set options in the corresponding tabs. Click Apply to confirm your settings.
- HTML
- Text
Parameter | Description |
|---|---|
Source Code | Enter HTML source code. Do not enter the HTML declaration, meta, or body tags. |
source-code-paragraph.mdxMobile
Parameter | Description |
|---|---|
Source Code | Enter an alternative source code for the mobile version of the mailing. For this option to take effect, you must activate the setting Activate Mobile Version in the general settings.If the mobile version is activated and you enter nothing here, the HTML tab's source code is used for the mobile version. |
Parameter | Description |
|---|---|
Text | Enter the text for the text version of this paragraph. Do not use HTML or other formatting. However, you can insert line breaks and special characters for separator elements (for example * or ++++++). |
source-code-paragraph.mdxOptions
You can define an individual layout, different from the general newsletter layout, for each content paragraph.
Parameter | Description |
|---|---|
Layout | |
Width | The maximum available width is used as standard. This is based on the internal spacing and also depends on whether you are using a sidebar and, if so, on the width of the sidebar. Enter a different value in pixels. If the maximum available width is smaller than this value, then the entered value is ignored. |
Height | By default, the paragraph is displayed over the available height, considering the content. Alternatively, you can specify a fixed height. If the content exceeds this height, the value is ignored, and the content is displayed at the default height. |
Background Color | To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser. |
Padding | Specify white space around the paragraph content. You can set white space separately for each page.Enter the values in pixels (integer values) based on the following example, using spaces to separate multiple pixel entries:- 10 = sides are uniform with 10 pixels of white space for the content |
- 10 20 = 10 pixels on the top and bottom, 20 pixels on the left and right
- 10 15 20 25 = 10 pixels on the top, 15 pixels on the right, 20 pixels on the bottom, 25 pixels on the leftIf the value is set to 0, then there will be no padding. | | Border | | | Show | Check to apply a border around the paragraph. | | Border Width | Enter the thickness of the border. You can set thickness for each side individually.Enter values in pixels (integer values) based on the following example, using spaces to separate multiple pixel entries:- 1 = sides uniform with 1 pixel
- 1 2 = 1 pixel on the top and bottom, 2 pixels on the left and right
- 1 2 3 4 = 1 pixel on the top, 2 pixels on the right, 3 pixel on the bottom, 4 pixel on the left.If you leave the field blank, the border has a thickness of 1 pixel (uniform on all sides). | | Color | To define the color, enter a hexadecimal value preceded by # (such as #000000). The depiction of non-hex web colors may vary from the original, depending on the browser. | | Mobile | | | Width | Set the paragraph width (in percent; 100% default) for mobile view. To display paragraphs next to each another in mobile view, make sure that the widths of two consecutive paragraphs combine to 100%. Otherwise, the paragraphs are displayed on top of each another with the assigned widths. | | Table of Contents | | | Show in Table of Contents | Select to display the paragraph in the table of contents for the section. | | Heading | Enter a heading to be displayed in the table of contents. If you leave the field blank, the heading from the General tab is displayed. |
source-code-paragraph.mdxClick profiles
Parameter | Description |
|---|---|
Click Profile | Clicks on any link in this paragraph are allocated to the selected click profiles. See Click profiles. |
source-code-paragraph.mdxTarget groups
Parameter | Description |
|---|---|
Target Group | To show this paragraph to one or more target groups only, select them. If more than one target group is selected, just one must match (OR logic)see Target groups. |
Loading content via the content interface
If the content interface is activated for the source code paragraph in your client, you can provide the content of the HTML, mobile, and text version in a CSV file and import them into the source code paragraph. The CSV format cannot be changed.
Format the CSV file as follows:
id;name;html;mobile;text 1;Source code 1; <div class="html-version" style="background-color: #ff0000;">HTML version</div>;" <div class="mobile-version" style="background-color: #ff0000;">Mobile version</div>"; Text version To integrate the content in the source code paragraph, click the menu bar of the paragraph Open
and select the desired content in the right column.
Hints
- The id and name columns are only used internally. Enter a name to help you identify the paragraph in the editor.
- The html, mobile and text columns can contain HTML source code that is added unchanged to the source code paragraph.
- Values must be CSV-compliant.
- To format the content, you must have strong HTML knowledge, particularly of email. The use of invalid or non-supported HTML code may lead to major display errors in the mailing.