--- title: Twitter-Layouts slug: campaign/docs/twitter-layouts docTags: createdAt: 2026-08-06T15:53:50.621Z --- Erfahren Sie in diesem Kapitel, wie: - Ihnen die Kundenbetreuung alternative HTML-Layouts [einrichtet](docId:0H6tsd1SBngNdWifPlrKL) - Sie alternative Layouts im Twitter-Paragraphen [auswählen](docId:0H6tsd1SBngNdWifPlrKL) - Sie mithilfe fundierter HTML-, CSS und Velocity-Kenntnisse alternative Layouts [bearbeiten](docId:0H6tsd1SBngNdWifPlrKL) Um bis zu 2 alternative Layouts zu erhalten, wenden Sie sich an die [Kundenbetreuung](docId\:ZWe1T3UPz3JW6_4mc76qV). Wenn Sie selbst HTML-Layouts hinterlegen möchten, legen Sie alternative Layouts sowohl für die Textversionen als auch die Mobilversionen an. Falls für die Mobilversionen und Textversionen keine alternativen Layouts hinterlegt werden, wird das Standard-Layout verwendet. :::hint{type="info"} **Note** Unter Umständen werden einzelne Textbausteine nicht wie gewünscht angeordnet. ::: ## Layout auswählen Um das Standard-Layout oder eines der bis zu 2 alternativen Layouts während des Bearbeitens eines Mailings im Template-Kit auszuwählen, gehen Sie wie folgt vor: 1. Klicken Sie links in der Vorschau in der Menüleiste des Twitter-Paragraphen auf **Twitter**. Auf der rechten Seite öffnet sich das Konfigurationsfenster. 2. Wechseln Sie zum Reiter **Optionen**. 3. Wählen Sie im Bereich **Erscheinungsbild** in der Drop-down-Liste **Erscheinungsbild** das Layout aus, das Sie anwenden möchten. ![Bild: Layout-Auswahlliste](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/o6kQO5M4_hVjz2K_kHqs5-20260720-145335.png "Bild: Layout-Auswahlliste") 4. Klicken Sie auf **Übernehmen**. ## Layout bearbeiten Sie können alternative Layouts bearbeiten, das Standard-Layout ist jedoch nicht veränderbar. :::hint{type="danger"} **Warning** Wenn Sie nicht über fundierte HTML-, CSS- und Velocity-Kenntnisse verfügen, wenden Sie sich an die [Kundenbetreuung](docId\:ZWe1T3UPz3JW6_4mc76qV). Falls Sie die alternativen Layouts ohne fundierte Kenntnisse bearbeiten, kann es zu schweren Darstellungsfehlern in Ihren Mailings kommen. ::: 1. Klicken Sie links in der Vorschau auf **Einstellungen**. Auf der rechten Seite öffnet sich das Konfigurationsfenster. 2. Wechseln Sie zum Reiter **Twitter**. Pro Layout stehen Ihnen Quelltext-Felder für die Desktop-Version, die Mobilversion und die Textversion zur Verfügung. ![Bild: Reiter Twitter](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/qkVMlkaebggVLpT7GeLcj-20260720-145335.png "Bild: Reiter Twitter") 3. Bearbeiten Sie den Quelltext des entsprechenden Layouts nach Ihren Wünschen. Lesen Sie unter [Inhalte einfügen](docId:0H6tsd1SBngNdWifPlrKL), wie Sie die verschiedenen Inhalte auslesen und platzieren können. :::hint{type="info"} **Tip** Richten Sie auch für die Mobilversionen und die Textversionen entsprechende alternative Layouts ein. Falls für die Mobilversionen und Textversionen keine alternativen Layouts hinterlegt werden, wird automatisch auf das Standard-Layout zurückgegriffen. ::: 4. Klicken Sie auf **Übernehmen**. ## Inhalte einfügen Greifen Sie auf die Inhalte des Facebook-Paragraphen mit Velocity-Variablen zu und formatieren Sie die übertragenen Inhalte mit HTML-Style-Anweisungen. Folgende Velocity-Variablen stehen Ihnen zur Verfügung: - **Status**: Informationen zum aktuellen Facebook-Post - **Present**: Für Abfragen, die das Vorhandensein eines Elements prüfen - **Value**: Zur Ausgabe des Inhalts **Hinweise zur Erstellung neuer Layouts** - **Schriftdefinitionen**: Bei Verwendung einer alternativen Layout-Variante müssen alle Schriftdefinitionen in dem eingegebenen HTML vorhanden sein. Die Texte werden nicht durch das Template-Kit formatiert, um Ihnen völlige Freiheit bei der optischen Gestaltung zu lassen. - **Breitenangaben**: Geben Sie eine feste Breite oder eine Breite in Prozent an, um zu vermeiden, dass Elemente aus dem Layout herausragen. - **Gefahr von Darstellungsfehlern**: Falls Sie die Layouts ohne fundierte HTML-Kenntnisse bearbeiten, kann es zu schweren Darstellungsfehlern in Ihren Mailings kommen. ### Status-Variablen | Variable | Typ | Beschreibung | | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | $twitterItemFirst | Boolean | Enthält `true`, falls es sich um den ersten Tweet des Twitter-Paragraphen handelt, sonst `false`. | | $twitterItemIndex | Integer | Enthält die Position des Tweets innerhalb des Twitter-Paragraphen als Zahl (1 für den ersten Tweet, 2 für den zweiten Tweet und so weiter). | | $twitterItemLast | Boolean | Enthält `true`, falls es sich um den letzten Tweet des Twitter-Paragraphen handelt, sonst `false`. | ### Present-Variablen | Variable | Typ | Beschreibung | | --------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- | | $twitterTextPresent | Boolean | Enthält `true`, falls Inhalt für das Feld **Text** vorhanden ist, sonst `false`. | | $twitterAuthorPresent | Boolean | Enthält `true`, falls Inhalt für das Feld **Autor** vorhanden ist, sonst `false`. | | $twitterDatePresent | Boolean | Enthält `true`, falls Inhalt für das Feld **Datum** vorhanden ist, sonst `false`. | | $twitterLinkTextPresent | Boolean | Enthält `true`, falls im Bereich **Link** Inhalt für das Feld **Text** vorhanden ist, sonst `false`. | | $twitterLinkUrlPresent | Boolean | Enthält `true`, falls im Bereich **Link** Inhalt für das Feld **URL** vorhanden ist, sonst `false`. | | $twitterImageUrlPresent | boolean | Enthält `true`, falls im Reiter **Bild** Inhalt für das Feld **Bild** vorhanden ist, sonst `false`. | | $twitterImageAltTextPresent | Boolean | Enthält `true`, falls im Reiter **Bild** Inhalt für das Feld **Alternativtext** vorhanden ist, sonst `false`. | | $twitterImageLinkPresent | Boolean | Enthält `true`, falls im Reiter **Bild** Inhalt für das Feld **Link** vorhanden ist, sonst `false`. | ### Value-Variablen | Variable | Typ | Beschreibung | | ------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | $twitterTextValue | String | Enthält den Inhalt des Feldes **Text**. | | $twitterAuthorValue | String | Enthält den Inhalt des Feldes **Autor**. | | $twitterDateValue | String | Enthält den Inhalt des Feldes **Datum**. | | $twitterLinkTextValue | String | Enthält den Inhalt des Feldes **Text** aus dem Bereich **Link**. | | $twitterLinkUrlValue | String | Enthält den Inhalt des Feldes **URL** aus dem Bereich **Link**. | | $twitterImageUrlValue | String | Enthält die Bild-URL aus dem Reiter **Bild**. | | $twitterImageAltTextValue | String | Enthält den Inhalt des Feldes **Alternativtext** aus dem Reiter **Bild**. | | $twitterImageLinkValue | String | Enthält den Inhalt des Feldes **Link** aus dem Reiter **Bild**. | | $editBar | String | Setzt die Button-Leiste des Paragraphen ein. Dies wird beispielsweise bei der Umsetzung von nebeneinanderliegenden Posts benötigt, um die Button-Leiste in die Tabelle zu integrieren. Ist diese Variable nicht vorhanden, wird die Button-Leiste über den Artikel gesetzt. |