--- title: Navigationsmenü-Layouts slug: campaign/docs/navigationsmenpercentc3percentbc-layouts docTags: createdAt: 2026-08-06T15:53:46.322Z --- Erfahren Sie in diesem Kapitel, wie: - Ihnen die Kundenbetreuung alternative HTML-Layouts [einrichtet](docId\:uMJ98Lf-LS0J5VqvhBXik) - Sie alternative Layouts im Navigationsmenü-Paragraphen [auswählen](docId\:uMJ98Lf-LS0J5VqvhBXik) - Sie mithilfe fundierter HTML-, CSS und Velocity-Kenntnisse alternative Layouts [bearbeiten](docId\:uMJ98Lf-LS0J5VqvhBXik) Um bis zu 5 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 automatisch das Standard-Layout verwendet. :::hint{type="info"} **Note** Unter Umständen werden einzelne Textbausteine nicht so angeordnet, wie gewünscht. ::: ## Layout auswählen 1. Klicken Sie beim Bearbeiten eines Mailings im [Template-Kit](docId\:jRJZaVEfgoLqt9ai1hzyD) links in der Vorschau, in der Menüleiste des Navigationsmenüs, auf **Navigationsmenü**. ![Bild: Konfigurationsfenster](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ZqJHrhwtpNI3L2X214Xpv-20260720-145317.png "Bild: 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/q44mW2_7vy3TgMuCYRwcY-20260720-145317.png "Bild: Layout-Auswahlliste") 4. Klicken Sie auf **Übernehmen**. ## Layout bearbeiten Sie können Ihre alternativen Layouts nachträglich bearbeiten. Das Standard-Layout ist 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**. 2. Wechseln Sie zum Reiter **Navigationsmenü**. Je Layout stehen Ihnen Quelltext-Felder für die Desktop-Version, die Mobilversion und die Textversion zur Verfügung. ![Bild: Navigationsmenü](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Dv5hRHnYyUlCzzIQebb0W-20260720-145317.png "Bild: Navigationsmenü") 3. Bearbeiten Sie den Quelltext des entsprechenden Layouts nach Ihren Wünschen. Unter [Inhalte einfügen](docId\:uMJ98Lf-LS0J5VqvhBXik) erfahren Sie, wie Sie die verschiedenen Inhalte auslesen und platzieren können. :::hint{type="info"} **Note** 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 Navigationsmenüs 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 | | ------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | $separatorDesktopEnabled | Boolean | Enthält `true`, falls im Reiter **Trennlinien** im Bereich **Inhalt** ein Haken in das Kontrollkästchen **Vertikale Trennlinien in Desktop-Version anzeigen** gesetzt wurde, sonst `false`. | | $separatorDisplayVerticalInMobileVersion | Boolean | Enthält `true`, falls im Reiter **Trennlinien** im Bereich **Inhalt** ein Haken in das Kontrollkästchen **Vertikale Trennlinien in Mobilversion anzeigen** gesetzt wurde, sonst `false`. | | $separatorDisplayHorizontalInMobileVersion | Boolean | Enthält `true`, falls im Reiter **Trennlinien** im Bereich **Inhalt** ein Haken in das Kontrollkästchen **Horizontale Trennlinien in Mobilversion anzeigen** gesetzt wurde, sonst `false`. | | $hamburgerMenuEnabled | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Allgemein** ein Haken in das Kontrollkästchen **Anzeigen** gesetzt wurde, sonst `false`. | | $hamburgerMenuIconRounded | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Symbol** ein Haken in das Kontrollkästchen **Konturen abrunden** gesetzt wurde, sonst `false`. | | $navigationItemsAmountValue | Integer | Enthält die Anzahl der Menüpunkte, die angezeigt werden. Es werden nur Menüpunkte angezeigt, wenn ein Link und entweder der Text oder das Bild angegeben wurden. | | $navCurrentParagraphId | Integer | Enthält die ID des jeweiligen Navigationsmenü-Paragraphen. Diese ID ist besonders wichtig für die Mobilversion, da die CSS-Klassen diese ID als Suffix im Namen benutzen. | ### Present-Variablen | Variable | Typ | Beschreibung | | ------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | $item1TextPresent – $item10TextPresent | Boolean | Enthält `true`, falls im Bereich **Menüpunkt #** Inhalt für das Feld **Text** vorhanden ist, sonst `false`. | | $item1LinkUrlPresent – $item10LinkUrlPresent | Boolean | Enthält `true`, falls im Bereich **Menüpunkt #** Inhalt für das Feld **URL** vorhanden ist, sonst `false`. | | $item1ImageUrlPresent – $item10ImageUrlPresent | Boolean | Enthält `true`, falls im Bereich **Menüpunkt #** Inhalt für das Feld **Bild** vorhanden ist, sonst `false`. | | $item1ColorPresent – $item10ColorPresent | Boolean | Enthält `true`, falls im Bereich **Menüpunkt #** Inhalt für das Feld **Textfarbe** vorhanden ist, sonst `false`. | | $item1BackgroundColorPresent – $item1BackgroundColorPresen | Boolean | Enthält `true`, falls im Bereich **Menüpunkt #** Inhalt für das Feld **Hintergrundfarbe** vorhanden ist, sonst `false`. | | $navigationLinkColorPresent | Boolean | Enthält `true`, falls in den allgemeinen Einstellungen unter **Schrifteinstellungen** > **Menüpunkte im Navigationsmenü** Inhalt für das Feld **Farbe** vorhanden ist, sonst `false`. | | $separatorLayoutThicknessPresent | Boolean | Enthält `true`, falls im Reiter **Trennlinien** im Bereich **Erscheinungsbild** Inhalt für das Feld **Stärke** vorhanden ist, sonst `false`. | | $separatorLayoutColorPresent | Boolean | Enthält `true`, falls im Reiter **Trennlinien** im Bereich **Erscheinungsbild** Inhalt für das Feld **Farbe** vorhanden ist, sonst `false`. | | $hamburgerMenuMenuBarHeadlinePresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Menüleiste** Inhalt für das Feld **Überschrift** vorhanden ist, sonst `false`. | | $hamburgerMenuMenuBarPaddingPresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Menüleiste** Inhalt für das Feld **Innenabstand** vorhanden ist, sonst `false`. | | $hamburgerMenuMenuBarBackgroundColorPresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Menüleiste** Inhalt für das Feld **Hintergrundfarbe** vorhanden ist, sonst `false`. | | $hamburgerMenuMenuBarImagePresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Bild** Inhalt für das Feld **Bild** vorhanden ist, sonst `false`. | | $hamburgerMenuMenuBarImageAltTextPresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Bild** Inhalt für das Feld **Alternativtext** vorhanden ist, sonst false. | | $hamburgerMenuMenuBarImageLinkPresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Bild** Inhalt für das Feld **Link** vorhanden ist, sonst `false`. | | $hamburgerMenuIconColorPresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Symbol** Inhalt für das Feld **Farbe** vorhanden ist, sonst `false`. | | $hamburgerMenuIconBackgroundColorPresent | Boolean | Enthält `true`, falls im Reiter **Hamburger-Menü** im Bereich **Symbol** Inhalt für das Feld **Hintergrundfarbe** vorhanden ist, sonst `false`. | | $navigationBackgroundImageUrlPresent | Boolean | Enthält `true`, falls im Reiter **Optionen** im Bereich **Hintergrundbild** Inhalt für das Feld **URL** vorhanden ist, sonst `false`. | | $navigationItemDesktopBackgroundColorPresent | Boolean | Enthält `true`, falls im Reiter **Optionen** im Bereich **Menüpunkte (Desktop-Version)** Inhalt für das Feld **Hintergrundfarbe** vorhanden ist, sonst `false`. | | $navigationItemDesktopWidthPresent | Boolean | Enthält `true`, falls im Reiter **Optionen** im Bereich **Menüpunkte (Desktop-Version)** Inhalt für das Feld **Hintergrundfarbe** vorhanden ist, sonst `false`. | | $navigationItemDesktopPaddingPresent | Boolean | Enthält `true`, falls im Reiter **Optionen** im Bereich **Menüpunkte (Desktop-Version)** Inhalt für das Feld **Innenabstand** vorhanden ist, sonst `false`. | | $navigationItemMobileWidthPresent | Boolean | Enthält `true`, falls im Reiter **Optionen** im Bereich **Menüpunkte (Mobilversion)** Inhalt für das Feld **Breite** vorhanden ist, sonst `false`. | | $item1DisplayInMobileVersion – $item10DisplayInMobileVersion | Boolean | Enthält `true`, falls im Reiter **Allgemein** im Bereich **Menüpunkt #** ein Haken in das Kontrollkästchen **In Mobilversion anzeigen** gesetzt wurde, sonst `false`. | ### Value-Variablen | Variable | Typ | Umgebung | Beschreibung | | -------------------------------------------------------- | ------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | $item1TextValue – $item10TextValue | String | Desktop, Mobil, Text | Enthält aus dem Bereich **Menüpunkt #** den unformatierten Inhalt des Feldes **Text**. | | $item1TextFormattedValue – $item10TextFormattedValue | String | Desktop, Mobil | Enthält aus dem Bereich **Menüpunkt #** den formatierten Inhalt des Feldes **Text**.Der Text wird mithilfe der Schrifteinstellungen aus den allgemeinen Einstellungen und der Textfarbe aus dem Menüpunkt selbst formatiert. | | $item1LinkUrlValue – $item10LinkUrlValue | String | Desktop, Mobil, Text | Enthält aus dem Bereich **Menüpunkt #** den Inhalt des Feldes **URL**. | | $item1LinkFormattedValue – $item10LinkFormattedValue | String | Desktop, Mobil | Enthält aus dem Bereich **Menüpunkt #** den formatierten Inhalt des Feldes **URL**.Der Text wird mithilfe der Schrifteinstellungen aus den allgemeinen Einstellungen und der Texfarbe aus dem Menüpunkt selbst formatiert.**Hinweis:** Wenn Sie für den Menüpunkt ein Bild hochgeladen und dieses rechts oder links neben dem Text positioniert haben, wird der Link inklusive Text und Bild ausgegeben. | | $item1ImageUrlValue – $item10ImageUrlValue | String | Desktop, Mobil, Text | Enthält aus dem Bereich **Menüpunkt #** den Inhalt des Feldes **Bild**. | | $item1ColorValue – $item10ColorValue | String | Desktop, Mobil | Enthält aus dem Bereich **Menüpunkt #** den Inhalt des Feldes **Textfarbe**. | | $item1BackgroundColorValue – $item10BackgroundColorValue | String | Desktop, Mobil | Enthält aus dem Bereich **Menüpunkt #** den Inhalt des Feldes **Hintergrundfarbe**. | | $navigationLinkColorValue | String | Desktop, Mobil | Enthält aus den allgemeinen Einstellungen > Reiter **Schrifteinstellungen** > Bereich **Menüpunkte im Navigationsmenü** den Inhalt des Feldes **Farbe** . | | $separatorLayoutThicknessValue | String | Desktop, Mobil | Enthält aus dem Reiter **Trennlinien** > Bereich **Erscheinungsbild** den Inhalt des Feldes **Stärke**. | | $separatorLayoutColorValue | String | Desktop, Mobil | Enthält aus dem Reiter **Trennlinien** > Bereich **Erscheinungsbild** den Inhalt des Feldes **Farbe**. | | $hamburgerMenuMenuBarHeadlineValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Menüleiste** den unformatierten Inhalt des Feldes **Überschrift**. | | $hamburgerMenuMenuBarHeadlineFormattedValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Menüleiste** den formatierten Inhalt des Feldes **Überschrift**. | | $hamburgerMenuMenuBarPaddingValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Menüleiste** den Inhalt des Feldes **Innenabstand**. | | $hamburgerMenuMenuBarBackgroundColorValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Menüleiste** den Inhalt des Feldes **Hintergrundfarbe**. | | $hamburgerMenuIconPositionValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Symbol** den Inhalt des Feldes **Position**. | | $hamburgerMenuIconColorValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Symbol** den Inhalt des Feldes **Farbe**. | | $hamburgerMenuIconBackgroundColorValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Symbol** den Inhalt des Feldes **Hintergrundfarbe**. | | $hamburgerMenuMenuBarImageUrlValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Bild** den Inhalt des Feldes **Bild**. | | $hamburgerMenuMenuBarImageAltTextValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Bild** den Inhalt des Feldes **Alternativtext**. | | $hamburgerMenuMenuBarImageLinkValue | String | Mobil | Enthält aus dem Reiter **Hamburger-Menü** > Bereich **Bild** den Inhalt des Feldes **Link**. | | $navigationAlignmentValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Erscheinungsbild** den Inhalt des Feldes **Ausrichtung**. | | $navigationBackgroundImageUrlValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Hintergrundbild** den Inhalt des Feldes **Bild**. | | $navigationBackgroundImageAlignmentValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Hintergrundbild** den Inhalt des Feldes **Ausrichtung**. | | $navigationBackgroundImageRepeatValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Hintergrundbild** den Inhalt des Feldes **Wiederholung**. | | $navigationItemDesktopBackgroundColorValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Desktop-Version)** den Inhalt des Feldes **Hintergrundfarbe**. | | $navigationItemDesktopWidthValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Desktop-Version)** den Inhalt des Feldes **Breite**. | | $navigationItemDesktopPaddingValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Desktop-Version)** den Inhalt des Feldes **Innenabstand**. | | $navigationItemDesktopAlignmentValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Desktop-Version)** den Inhalt des Feldes **Textausrichtung**. | | $navigationItemDesktopVerticalAlignmentValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Desktop-Version)** den Inhalt des Feldes **Textposition (neben Bild)**. | | $navigationItemImageBehaviorValue | String | Desktop, Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Desktop-Version)** den Inhalt des Feldes **Bildposition**. | | $navigationItemMobileWidthValue | String | Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Mobilversion)** den Inhalt des Feldes **Breite**. | | $navigationItemMobileAlignmentValue | String | Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Mobilversion)** den Inhalt des Feldes **Textausrichtung**. | | $navigationItemMobileVerticalAlignmentValue | String | Mobil | Enthält aus dem Reiter **Optionen** > Bereich **Menüpunkte (Mobilversion)** den Inhalt des Feldes **Textposition (neben Bild)**. |