Navigationsmenü-Layouts

8 min

Erfahren Sie in diesem Kapitel, wie:

Ihnen die Kundenbetreuung alternative HTML-Layouts einrichtet

Sie alternative Layouts im Navigationsmenü-Paragraphen auswählen

Sie mithilfe fundierter HTML-, CSS und Velocity-Kenntnisse alternative Layouts bearbeiten

Um bis zu 5 alternative Layouts zu erhalten, wenden Sie sich an die Kundenbetreuung.

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.

Note

Unter Umständen werden einzelne Textbausteine nicht so angeordnet, wie gewünscht.

Layout auswählen

Klicken Sie beim Bearbeiten eines Mailings im Template-Kit links in der Vorschau, in der Menüleiste des Navigationsmenüs, auf Navigationsmenü.

Bild: Konfigurationsfenster

Wechseln Sie zum Reiter Optionen.

Wählen Sie im Bereich Erscheinungsbild in der Drop-down-Liste Erscheinungsbild das Layout aus, das Sie anwenden möchten.

Bild: Layout-Auswahlliste

Klicken Sie auf Übernehmen.

Layout bearbeiten

Sie können Ihre alternativen Layouts nachträglich bearbeiten. Das Standard-Layout ist nicht veränderbar.

Warning

Wenn Sie nicht über fundierte HTML-, CSS- und Velocity-Kenntnisse verfügen, wenden Sie sich an die Kundenbetreuung. Falls Sie die alternativen Layouts ohne fundierte Kenntnisse bearbeiten, kann es zu schweren Darstellungsfehlern in Ihren Mailings kommen.

Klicken Sie links in der Vorschau auf Einstellungen.

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ü

Bearbeiten Sie den Quelltext des entsprechenden Layouts nach Ihren Wünschen. Unter Inhalte einfügen erfahren Sie, wie Sie die verschiedenen Inhalte auslesen und platzieren können.

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.

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).