Navigationsmenü-Layouts
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.
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ü.
- 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.
- Klicken Sie auf Übernehmen.
Layout bearbeiten
Sie können Ihre alternativen Layouts nachträglich bearbeiten. Das Standard-Layout ist nicht veränderbar.
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.
- 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.
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). |
Benötigen Sie Hilfe?