Einleitung zu Navigationsmenüs
Note
Um diese Funktion freizuschalten, wenden Sie sich an die Kundenbetreuung.
Mit dem Navigationsmenü-Paragraphen können Sie Navigationsleisten mit Links zu Landing-Pages oder Deeplinks erstellen. Sie können zudem Menüpunkte ohne HTML-Kenntnisse ändern oder ergänzen.
Beispiel für ein Navigationsmenü:
Funktionsumfang
- Jeder Menüpunkt kann optisch individuell gestaltet werden: Text- und Hintergrundfarbe, als Bild oder mit Icon.
- Sie können bis zu 10 Menüpunkte anlegen.
- Sie können bis zu 5 benutzerdefinierte Layouts hinterlegen lassen und diese schnell auf das Navigationsmenü anwenden.
- In der Mobilversion kann die Navigation zwei- oder dreispaltig oder als Hamburger-Menü angezeigt werden. Das Hamburger-Menü bietet folgende Vorteile:
- schlicht/minimalistisch und so gut wie überall in das Layout einsetzbar
- Navigation kann ein- und ausgeklappt werden
- platzsparende Anzeige für kleine Bildschirme
Navigationsmenü erstellen
- Klicken Sie beim Bearbeiten des Mailing-Inhalts im Template-Kit auf Neu: Inhaltsparagraph.
Tip
Sie können den Paragraphen auch im Kopfbereich und im Fußbereich verwenden. Klicken Sie dafür auf Kopf oder Fuß.
- Klicken Sie auf Navigationsmenü.
- Klicken Sie im Konfigurationsfenster auf Übernehmen. Das neue Navigationsmenü erscheint links im Vorschaufenster.
Navigationsmenü konfigurieren
- Klicken Sie links in der Vorschau auf Navigationsmenü.
- Entnehmen Sie die Einstellungsmöglichkeiten den nachfolgenden Tabellen für die jeweiligen Reiter. Bestätigen Sie Ihre Eingaben, indem Sie auf Übernehmen klicken.
Allgemein
Parameter | Beschreibung |
|---|---|
Inhalt | |
In Desktop-Version anzeigen | Aktivieren Sie dieses Kontrollkästchen, um den Paragraphen in der Desktop-Version des Mailings anzuzeigen. |
In Mobilversion anzeigen | Aktivieren Sie dieses Kontrollkästchen, um den Paragraphen in der Mobilversion des Mailings anzuzeigen. Die Einstellung Mobilversion aktivieren in den allgemeinen Einstellungen muss gesetzt sein, damit diese Option wirksam wird. |
In Textversion anzeigen | Aktivieren Sie dieses Kontrollkästchen, um den Paragraphen in der Textversion des Mailings anzuzeigen. |
Menüpunkt 1-10 | |
Text | Geben Sie die Beschriftung des Menüpunkts ein. Wenn Sie für den Menüpunkt statt einer Beschriftung ein Bild verwenden möchten, geben Sie ebenfalls eine Beschriftung ein. Die eingegebene Beschriftung wird automatisch als Alternativtext für das Bild übernommen.:::hint{style="info"} |
Tip | |
Sie können ein Bild zusammen mit der Beschriftung des Menüpunkts anzeigen als auch ohne die Beschriftung des Menüpunkts. Die entsprechenden Einstellungsmöglichkeiten finden Sie im Reiter Optionen unter Menüpunkte (Desktop-Version) > Bildposition. ::: | | URL | Geben Sie eine URL an, auf die der Menüpunkt verweisen soll. Wenn der Empfänger diesen Menüpunkt klickt, wird er auf die angegebene URL geleitet. | | Textfarbe | Geben Sie die Textfarbe für die Beschriftung des Menüpunkts an. Wenn Sie das Feld leer lassen, wird die Textfarbe verwendet, die Sie in den allgemeinen Einstellungen im Reiter Schrifteinstellungen unter Menüpunkte im Navigationsmenü > Farbe angegeben haben. | | Hintergrundfarbe | Geben Sie eine Hintergrundfarbe für den Menüpunkt an. Die Einstellung wirkt sich nur auf den gewählten Menüpunkt aus.Wenn Sie für alle Menüpunkte dieselbe Farbe verwenden möchten, konfigurieren Sie eine globale Hintergrundfarbe für die Menüpunkte. Die entsprechende Einstellungsmöglichkeit finden Sie im Reiter Optionen unter Menüpunkte > Hintergrundfarbe. | | Bild | Laden sie ein Bild hoch. Klicken Sie auf Durchsuchen... und wählen Sie im Datei-Browser ein Bild aus. Alternativ können Sie auch im Feld alternativ externe URL eine Bild-URL eingeben, die auf die Bildquelle verweist.:::hint{style="info"} Tip
Sie können das Bild zusammen mit der Beschriftung des Menüpunkts anzeigen als auch ohne die Beschriftung des Menüpunkts. Die entsprechenden Einstellungsmöglichkeiten finden Sie im Reiter Optionen unter Menüpunkte > Bildposition.
Note
Die Bildgröße des hochgeladenen Bildes wird nicht verkleinert. Laden Sie ausschließlich Bilder hoch, die zur Größe des Menüpunkts passen. :::Wenn Sie für die Mobilversion ein mehrspaltiges Layout auswählen, prüfen Sie stets vor dem Versand mithilfe der Mobilvorschau, ob das Navigationsmenü mit den getroffenen Einstellungen korrekt dargestellt wird. | | In Mobilversion anzeigen | Um den Menüpunkt in der Mobilversion anzuzeigen, setzen Sie einen Haken in das Kontrollkästchen. |
Trennlinien
Parameter | Beschreibung |
|---|---|
Inhalt | |
Vertikale Trennlinien in Desktop-Version anzeigen | Um in der Desktop-Version vertikale Trennlinien zwischen den einzelnen Menüpunkten anzuzeigen, aktivieren Sie das Kontrollkästchen. |
Vertikale Trennlinien in Mobilversion anzeigen | Um in der Mobilversion vertikale Trennlinien zwischen den einzelnen Menüpunkten anzuzeigen, aktivieren Sie das Kontrollkästchen. |
Horizontale Trennlinien in Mobilversion anzeigen | Um in der Mobilversion horizontale Trennlinien zwischen den einzelnen Menüpunkten anzuzeigen, aktivieren Sie das Kontrollkästchen.Die Option wirkt sich nur aus, wenn Sie das Standard-Layout verwenden und einstellen, dass die einzelnen Menüpunkte in der Mobilversion untereinander anzeigt werden (siehe Reiter Optionen unter Erscheinungsbild > Standard-Layout). |
Erscheinungsbild | |
Stärke | Geben Sie die Stärke der Trennlinien zwischen den einzelnen Menüpunkten in Pixeln ein (ganze Zahl). Wenn Sie das Feld leer lassen, werden Trennlinien in einer Stärke von 1 Pixel angezeigt. |
Farbe | Geben Sie die Farbe der Trennlinien an. Wenn Sie das Feld leer lassen, wird die Farbe verwendet, die Sie in den allgemeinen Einstellungen im Reiter Schrifteinstellungen unter Menüpunkte im Navigationsmenü > Farbe angegeben haben. |
Hamburger-Menü
Mit einem Hamburger-Menü können Sie das Navigationsmenü auf ein Symbol reduzieren - für die platzsparende Anzeige auf Smartphones und Tablets. Per Klick auf das Symbol klappen Ihre Empfänger das Navigationsmenü aus und wieder ein.
Note
Das Hamburger-Menü steht ausschließlich für die Mobilversion zur Verfügung. Außerdem unterstützt Googles Gmail-App nicht diese Funktion und zeigt alle Menüpunkte stets ausgeklappt an.
Parameter | Beschreibung |
|---|---|
Allgemein | |
Anzeigen | Um das Hamburger-Menü in der Mobilversion Ihres Mailings zu aktivieren, setzen Sie einen Haken in das Kontrollkästchen. |
Menüleiste | |
Überschrift | Geben Sie die Beschriftung des Hamburger Menüs ein. Die Beschriftung wird neben dem Symbol für das Hamburger-Menü angezeigt. |
Innenabstand | Konfigurieren Sie die Größe der Menüleiste, indem Sie die Fläche rund um das Hamburger-Menü-Symbol bestimmen. Geben Sie den Wert in Pixeln ein (ganze Zahlen). |
Hintergrundfarbe | Geben Sie die Hintergrundfarbe der Menüleiste des Hamburger-Menüs an. |
Bild | |
Bild | Um ein Hintergrundbild für Ihre Schaltfläche hochzuladen, klicken Sie auf Durchsuchen... und wählen Sie im Datei-Browser ein Bild aus. Alternativ können Sie auch im Feld Alternativ externe URL eine Bild-URL eingeben, die auf die Bildquelle verweist.Wenn das hochgeladene Bild zu breit für die Menüleiste ist, wird das Bild automatisch an die maximal zur Verfügung stehende Breite angepasst. |
Alternativtext | Geben Sie einen Alternativtext ein, der angezeigt wird, wenn der Empfänger das Herunterladen von Bildern blockiert hat oder das Bild aus einem anderen Grund nicht angezeigt werden kann. Der Alternativtext sollte eine knappe Bildbeschreibung oder den Bildtitel enthalten. |
Link | Geben Sie die URL zu einer Landing-Page ein. Beginnen Sie die Eingabe stets mit dem Protokoll http:// oder https://.Wenn Sie bereits Landing-Pages für das Mailing angelegt haben, erscheint nach dem Klick in das Eingabefeld eine Liste zur Auswahl der bereits angelegten Landing-Pages. |
Symbol | |
Position | Wählen Sie die Position des Hamburger-Menü-Symbols aus. |
Farbe | Geben Sie die Farbe des Hamburger-Menü-Symbols an. Wenn Sie das Feld leer lassen, wird die Farbe verwendet, die Sie in den allgemeinen Einstellungen im Reiter Schrifteinstellungen unter Menüpunkte im Navigationsmenü > Farbe angegeben haben. |
Hintergrundfarbe | Geben Sie die Hintergrundfarbe für das Hamburger-Menü-Symbol an. |
Konturen abrunden | Um die Konturen des Hamburger-Menü-Symbols abzurunden, setzen Sie einen Haken in das Kontrollkästchen. |
Optionen
Parameter | Beschreibung |
|---|---|
Erscheinungsbild | |
Breite | Geben Sie mindestens 30 Pixel für die Breite des Paragraphen ein. Die Einstellung wirkt sich nur auf die Desktop-Version aus. Wenn Sie das Feld leer lassen, wird der Paragraph über die gesamte, im Mailing zur Verfügung stehende Breite angezeigt. Falls Sie die im Mailing zur Verfügung stehende Breite ändern möchten, wechseln Sie in die allgemeinen Einstellungen zum Reiter Allgemein in den Bereich Erscheinungsbild. |
Höhe | Geben Sie die Höhe des Paragraphen in Pixeln ein. Die Einstellung wirkt sich nur auf die Desktop-Version aus. Wenn Sie das Feld leer lassen, wird die Höhe automatisch an den Inhalt des Paragraphen angepasst.:::hint{style="info"} |
Note | |
Wenn Sie für den Inhalt des Paragraphen eine zu geringe Höhe eingeben, wird der von Ihnen eingegebene Wert ignoriert und die Höhe automatisch angepasst. ::: | | Ausrichtung | Geben Sie an, wie das Navigationsmenü positioniert werden soll. | | Hintergrundfarbe | Geben Sie die Hintergrundfarbe des Navigationsmenüs an. | | Innenabstand | Sie können den Innenabstand für jede Seite unterschiedlich angeben. Geben Sie die Werte in Pixel an und verwenden Sie Leerzeichen, um mehrere Werte zu trennen.Die Angabe erfolgt nach folgendem Schema:- 10 = setzt den Innenabstand an allen Seiten auf 10 Pixel
- 10 15 = setzt den Innenabstand oben und unten auf 10 Pixel, rechts und links auf 15 Pixel
- 20 10 0 10 = setzt den Innenabstand oben auf 20 Pixel, rechts auf 10 Pixel, unten wird kein Rahmen gesetzt und links auf ebenfalls 10 PixelWenn der Wert 0 gesetzt ist, wird kein Innenabstand gesetzt. | | Erscheinungsbild | Wählen Sie für Ihr Navigationsmenü ein Layout aus. Sie können zwischen dem mitgelieferten Standard-Layout und bis zu fünf eigenen, benutzerdefinierten Layouts wählen. Um ein benutzerdefiniertes Layout zu verwenden, richten Sie dieses im Vorfeld in den allgemeinen Einstellungen im Reiter Navigationsmenü ein. Wenn Sie aus der Drop-down-Liste den Eintrag eines benutzerdefinierten Layouts auswählen, das Sie nicht konfiguriert haben, wird automatisch auf das Standard-Layout zurückgegriffen. Siehe Navigationsmenü-Layouts. | | Standard-Layout | Wählen Sie für die Mobilversion des Standard-Layouts die Anordnung der Menüpunkte aus.:::hint{style="info"} Note
Wenn Sie ein benutzerdefiniertes Layout verwenden, wird die hier gewählte Option ignoriert. ::: | | Hintergrundbild | | | Bild | Um ein Hintergrundbild hochzuladen, das sich über alle Menüpunkte erstreckt, klicken Sie auf Durchsuchen... und wählen Sie im Datei-Browser ein Bild aus. Alternativ können Sie auch im Feld Alternativ externe URL eine Bild-URL eingeben, die auf die Bildquelle verweist.:::hint{style="info"} Note
Wenn Sie ein Hintergrundbild festlegen, wird dieses statt der gewählten Hintergrundfarben für die einzelnen Menüpunkte verwendet.
Note
Nicht alle E-Mail-Programme und Webmailer unterstützen die Anzeige von Hintergrundbildern. Sie sollten ausschließlich dekorative Hintergrundbilder hochzuladen, die keine wichtigen Informationen enthalten. ::: | | Ausrichtung | Geben Sie an, wie das Hintergrundbild positioniert werden soll. | | Wiederholung | Legen Sie fest, ob und wie das Hintergrundbild wiederholt werden soll. | | Menüpunkte (Desktop-Version) | | | Hintergrundfarbe | Geben Sie eine globale Hintergrundfarbe für die Menüpunkte an.:::hint{style="info"} Note
Wenn Sie für einen Menüpunkt eine individuelle Hintergrundfarbe festgelegt haben, wird diese statt der globalen Hintergrundfarbe verwendet. Um die globale Hintergrundfarbe für einen Menüpunkt zu verwenden, löschen Sie den Farbwert im Reiter Allgemein unter Menüpunkt # > Hintergrundfarbe. ::: | | Breite | Geben Sie die Breite der Menüpunkte in Pixeln ein.:::hint{style="info"} Note
Die empfohlene Breite für die Menüpunkte wird ihnen links in der Vorschau angezeigt, wenn Sie den Mauszeiger über ? Hilfe bewegen. ::: | | Innenabstand | Konfigurieren Sie die Größe der Menüpunkte, indem Sie die Fläche rund um die Beschriftung bestimmen.Sie können die einzelnen Seiten der Fläche individuell einstellen. Geben Sie die Werte anhand des folgenden Beispiels in Pixeln ein (ganze Zahlen), trennen Sie mehrere Pixelangaben mit einem Leerzeichen:- 10 = alle Seiten der Fläche gleichmäßig mit 10 Pixeln Abstand zur Beschriftung
- 10 20 = 10 Pixel oben und unten, 20 Pixel links und rechts
- 10 15 20 25 = 10 Pixel oben, 15 Pixel rechts, 20 Pixel unten, 25 Pixel links | | Textausrichtung | Geben Sie an, wie die Beschriftungen der Menüpunkte positioniert werden sollen. | | Textposition (neben Bild) | Geben Sie an, wie die Beschriftungen der Menüpunkte neben dem Bild positioniert werden sollen.:::hint{style="info"} Note
Diese Option wirkt sich in folgenden Fällen aus:
- Wenn im Menüpunkt ein Bild verwendet wird und die Beschriftung aktiviert ist.
- Wenn die Beschriftung eines Menüpunkts auf mehrere Zeilen umbricht; dabei wird die Beschriftung der anderen Menüpunkte entsprechend der hier gewählten Option positioniert.
Tip
- Bilder können Sie für jeden Menüpunkt im Reiter Allgemein unter Menüpunkt # > Bild festlegen.
- Die Beschriftung aktivieren Sie mit der nachfolgenden Option Bildposition. ::: | | Bildposition | Geben Sie an, ob und wo die Bilder neben den Beschriftungen der Menüpunkte angezeigt werden sollen.:::hint{style="info"} Tip
Wenn Sie die Option mittig (keine Beschriftung) auswählen, wird die hinterlegte Beschriftung nicht angezeigt und als Alternativtext für das Bild verwendet. ::: | | Menüpunkte (Mobilversion) | | | Breite | Geben Sie die Breite der Menüpunkte in Prozent ein.:::hint{style="info"} Tip
Die Option wirkt sich nur aus, wenn Sie das Standard-Layout verwenden und einstellen, dass die einzelnen Menüpunkte in der Mobilversion nebeneinander anzeigt werden (siehe Reiter Optionen unter Erscheinungsbild > Standard-Layout). ::: | | Textausrichtung | Geben Sie an, wie die Beschriftungen der Menüpunkte positioniert werden sollen. | | Textposition (neben Bild) | Geben Sie an, wie die Beschriftungen der Menüpunkte neben dem Bild positioniert werden sollen.:::hint{style="info"} Note
Diese Option wirkt sich in folgenden Fällen aus:
- Wenn im Menüpunkt ein Bild verwendet wird und die Beschriftung aktiviert ist
- Wenn die Beschriftung eines Menüpunkts auf mehrere Zeilen umbricht; dabei wird die Beschriftung der anderen Menüpunkte entsprechend der hier gewählten Option positioniert
Tip
- Bilder können Sie für jeden Menüpunkt im Reiter Allgemein unter Menüpunkt # > Bild festlegen.
- Die Beschriftung aktivieren Sie im Reiter Optionen unter Menüpunkte (Desktop-Version) > Bildposition. ::: | | Rahmen | | | Anzeigen | Um dem Paragraphen einen Rahmen hinzuzufügen, aktivieren Sie das Kontrollkästchen. Vergessen Sie nicht, eine Farbe für den Rahmen anzugeben, wenn Sie die Option aktivieren. | | Stärke | Sie können die Rahmenstärke für jede Seite unterschiedlich festlegen. Geben Sie die Werte in Pixel an und verwenden Sie Leerzeichen, um mehrere Werte zu trennen.Die Angabe erfolgt nach folgendem Schema:* 2 = setzt die Rahmenstärke an allen Seiten auf 2 Pixel
- 2 4 = setzt die Rahmenstärke oben und unten auf 2 Pixel, rechts und links auf 4 Pixel
- 2 1 0 1 = setzt die Rahmenstärke oben auf 2 Pixel, rechts auf 1 Pixel, unten wird kein Rahmen gesetzt und links auf ebenfalls 1 PixelWenn Sie das Feld leer lassen, wird der Rahmen auf allen Seiten mit einer Stärke von 1 Pixel angezeigt. | | Farbe | Um die Farbe zu definieren, geben Sie einen Hexadezimalwert ein, dem # vorangestellt ist (z. B. #000000). Die Darstellung nicht-konformer Webfarben kann je nach Browser vom Original abweichen. | | Mobil | | | Breite | Stellen Sie die Breite des Paragraphen in der Mobilansicht ein. Standardmäßig wird die gesamte Breite ausgenutzt. Um zwei Paragraphen in der Mobilansicht nebeneinander anzuzeigen, muss die Breite der beiden Paragraphen zusammen 100 % ergeben. Andernfalls werden beide Paragraphen untereinander angezeigt mit der jeweils eingestellten Breite. |
Klickprofile
Parameter | Beschreibung |
|---|---|
Klickprofile | Klicks auf alle im Paragraphen enthaltenen Links werden den gewählten Klickprofilen zugeordnet. Siehe Klickprofile. |
Zielgruppen
Parameter | Beschreibung |
|---|---|
Zielgruppen | Wenn der Paragraph nur einem bestimmten Empfängersegment angezeigt werden soll, wählen Sie eine oder mehrere Zielgruppen aus. Wenn Sie mehrere Zielgruppen auswählen, muss nur eine dieser Zielgruppen zutreffen (ODER-Verknüpfung). Siehe Zielgruppen. |
Note
Der Paragraph wird bei der Auswahl mehrerer Zielgruppen auch angezeigt, wenn nur eine davon zutrifft. Beachten Sie auch, dass Paragraphen, die nicht die gesamte Newsletter-Breite einnehmen (z. B. in einer Seitenleiste), unerwünschte Lücken im Newsletter verursachen können. Testen Sie die Newsletter-Ansicht für Zielgruppen über die Schaltfläche Zielgruppen in der oberen Menüleiste dieses Fensters und immer auch mit der Funktion Test-E-Mail an Zielgruppe.
Schrifteinstellungen anpassen
Um allgemeine Schrifteinstellungen (zum Beispiel Schriftart, Schriftfarbe, Schriftgröße und so weiter) zu ändern, wechseln Sie in die allgemeinen Einstellungen zum Reiter Schrifteinstellungen und passen Sie die Optionen im Bereich Menüpunkte im Navigationsmenü entsprechend an.