--- title: Twitter layouts slug: campaign/docs/Vy3Z-twitter-layouts docTags: createdAt: 2026-07-20T15:45:30.265Z --- This topic describes: - how customer support [sets up](docId\:X2zfh3xKry7XnDuOWNUXf) alternative HTML layouts - how to [select](docId\:X2zfh3xKry7XnDuOWNUXf) alternative layouts in the Twitter paragraph - how to [edit](docId\:X2zfh3xKry7XnDuOWNUXf) alternative layouts using HTML, CSS, and Velocity [Vy3Z-twitter-layouts.mdx](docId\:X2zfh3xKry7XnDuOWNUXf)To receive up to two alternative layouts, contact [customer support](docId\:ZWe1T3UPz3JW6_4mc76qV). To create HTML layouts, set up alternative layouts for mobile and text versions also. If no alternative layouts are saved for those versions, the default layout is used. :::hint{type="info"} **Note** In some cases, some text elements will not be in the order that you want. ::: ## [Vy3Z-twitter-layouts.mdx](docId\:X2zfh3xKry7XnDuOWNUXf)Selecting a layout To select a default layout or one of up to 2 alternative layouts, while editing a message in the [Template Kit](docId\:jRJZaVEfgoLqt9ai1hzyD), do the following: 1. On the left side of the preview, in the menu bar of the Twitter paragraph, click **Twitter**. The configuration window opens on the right. 2. Click the **Options** tab. 3. In the **Layout** area > **Layout** drop-down list, select the layout you want to use. ![Image: Layout settings](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/JTYim80pUdWWEa20AlU2s-20260720-145336.png "Image: Layout settings") 4. Click **Apply**. ## [Vy3Z-twitter-layouts.mdx](docId\:X2zfh3xKry7XnDuOWNUXf)Editing a layout You can edit alternative layouts, but not the default layout. :::hint{type="danger"} **Warning** If you lack knowledge of HTML, CSS, and Velocity, contact [customer support](docId\:ZWe1T3UPz3JW6_4mc76qV) to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings. ::: 1. In the preview on the left, click **Settings**. The configuration window opens on the right. 2. Open the **Twitter** tab. Each layout has source text fields for the desktop, mobile, and text versions. ![Image: Twitter tab](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ZT0ZPwgFTrq20Huq9-sDO-20260720-145336.png "Image: Twitter tab") 3. Edit the source text of the corresponding layout as needed. Under [Inserting content](docId\:X2zfh3xKry7XnDuOWNUXf), read how to place the various contents. :::hint{type="info"} **Tip** Set up alternative layouts for mobile and text versions also. If no alternative layouts are stored for these versions, the default layout is used. ::: 4. Click **Apply**. ## [Vy3Z-twitter-layouts.mdx](docId\:X2zfh3xKry7XnDuOWNUXf)Inserting content Access the content of the Twitter paragraph using Velocity variables and format the transferred content using HTML style attributes. The following Velocity variables are available: - **Status**. Information on current item paragraphs - **Present**. For using queries that check for the presence of an element - **Value**. For issuing the content **Notes for the creation of new layouts** - **Font definitions**. If you are using an alternative layout variant, font definitions must exist in the HTML you entered. The texts are not formatted by the Template Kit to give you complete freedom in visual design. - **Widths**. Specify a fixed width or a width in percent. You should enter a percentage, because this prevents elements from sticking out of the layout. - **Danger of display errors**. If you edit the layouts without in-depth knowledge of HTML, serious display errors may occur in your mailings. ### Status variables | Variable | Type | Description | | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | | $twitterItemFirst | Boolean | Is `true` if it is the first tweet in the Twitter paragraph, or is otherwise `false`. | | $twitterItemIndex | Integer | Contains the position of the post within the Twitter paragraph as a number (1 for the first tweet, 2 for the second tweet and so on). | | $twitterItemLast | Boolean | Is `true` if it is the last tweet in the Twitter paragraph, or is otherwise `false`. | ### Present variables | Variable | Type | Description | | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- | | $twitterTextPresent | Boolean | Contains `true` if there is content for the **Text** box, or otherwise `false`. | | $twitterAuthorPresent | Boolean | Contains `true` if there is content for the **Author** box, or otherwise `false`. | | $twitterDatePresent | Boolean | Contains `true` if there is content for the **Date** box, or otherwise `false`. | | $twitterLinkTextPresent | Boolean | Contains `true` if there is content for the **Text** box in the **Link** area, otherwise `false`. | | $twitterLinkUrlPresent | Boolean | Contains `true` if there is content for the **URL** box in the **Link** area, otherwise `false`. | | $twitterImageUrlPresent | boolean | Contains `true` if there is content for the **Image** box in the **Image** tab, otherwise `false`. | | $twitterImageAltTextPresent | Boolean | Contains `true` if there is content for the **Alternative text** box in the **Image** tab, otherwise `false`. | | $twitterImageLinkPresent | Boolean | Contains `true` if there is content for the **Link** box in the **Image** tab, otherwise `false`. | ### Value variables | Variable | Type | Description | | ------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | $twitterTextValue | String | Contains the content of the **Text** box. | | $twitterAuthorValue | String | Contains the content of the **Author** box. | | $twitterDateValue | String | Contains the content of the **Date** box. | | $twitterLinkTextValue | String | Contains the content of the **Text** box in the **Link** area. | | $twitterLinkUrlValue | String | Contains the content of the **URL** box in the **Link** area. | | $twitterImageUrlValue | String | Contains the image URL from the **Image** tab. | | $twitterImageAltTextValue | String | Contains the content of the **Alternative text** box in the **Image** tab. | | $twitterImageLinkValue | String | Contains the content of the **Link** box in the **Image** tab. | | $editBar | String | Inserts the paragraph's button bar. This is required to integrate the button bar into the table, such as when implementing adjacent items. If this variable is not available, the button bar is placed above the item. |