Das Dynamische „Hero“-Bild
Das oberste Hero-Bild sollte bearbeitbar sein. Wir wollen es mit einer Dynamischen Bild-Komponente ersetzen. Für eine Dynamische Bild-Komponente muss der Express-Benutzer ein Bild auswählen, einen Tooltip (ALT-Text) ausfüllen und einen Hyperlink. Wir erstellen jedoch anstatt eines festen Hyperlinks einen Sensor im Hyperlink, den der Express-Benutzer ausfüllt. So können die Klicks auf das Hero-Bild gemessen werden.
1. Erstellen Sie in der Registerkarte „Sensoren“ einen neuen Sensor und nennen Sie in „Hero-Bild“. Dieser Name wird im Reporting verwendet. Wählen Sie die erste Option „Den Kontakt an eine externe Adresse versenden“ und geben Sie ein: "http://". Der Express-Benutzer kann den restlichen Hyperlink ausfüllen.
2. Wählen Sie das Hero-Bild im Beispiel „Springsales“ und drücken Sie die Rücktaste. Lassen Sie den Cursor stehen, wo er ist.. Gehen Sie zur Registerkarte „Komponenten“, klicken Sie unter „Dynamisch“ auf die Dynamische Bild-Komponente und wählen Sie „Neue einfügen“.
3. Nennen Sie die Komponente "HERO_IMAGE“. Verwenden Sie als Alias „Hero-Bild“. Dieser Alias wird in Express verwendet.
4. In der Registerkarte „Inhalt“ können Sie eine Standard-Bild-URL definieren, wenn Sie möchten. Das Bild wird standardmäßig mit jedem Newsletter hinzugefügt, der in Express erstellt wird. Wir lassen dieses Feld frei. Dasselbe gilt für das ALT- Textfeld.
5. Geben Sie als Bildgröße nur 640 im ersten Feld ein, lassen Sie das zweite Feld frei. Das Bild wird so immer auf die Breite 640px angepasst. Die Höhe ist frei wählbar.
7. Setzen Sie das Ziel auf "_blank". So werden standardmäßig Hyperlinks in Mails definiert. Wenn die Mail im Browser angezeigt wird, öffnet sich ein neues Fenster, wenn dieser Link angeklickt wird. So bleibt die Mail im ursprünglichen Fenster im Browser geöffnet.
8. Klicken Sie auf 'OK'. Die Dynamische Bild-Komponente wird der Mail als Dynamischer Abschnitt hinzugefügt, und wird in der Registerkarte „Komponenten“ unter „In dieser Mail verwendet“. Sie können jetzt immer die Komponente „Dynamisches Bild“ „In dieser Mail verwendet“ über einen Rechtsklick auswählen, und dann unter „Eigenschaften“ die Einstellungen ändern. Speichern Sie Ihre E-Mail.
Bei den Komponenten Dynamischer Text und Dynamische HTML ist es ähnlich. In Express kann der Benutzer eine einfache Textzeile einfügen oder einen vollständigen HTML-Block. Der Inhalt kann auch an anderer Stelle in der Nachricht mit dem DYNCONTENT-Bereich (nur für Dynamische Text-Komponenten) verwendet werden. Z.B. ~DYNCONTENT.MYTEXT~. Das kann auch als Constraint für einen anderen Dynamischen Abschnitt verwendet werden.
Der eingefügte Quellcode lautet: <div id="MASECTION" macontenteditable="FALSE" maconstraint="" maparameter="HERO_IMAGE" matype="" mahidediv="true"</div>
Tipp : Verwenden Sie für das reaktionsfähige Design das Beispielbild. Jetzt befindet sich der eingefügt Dynamische Bild-Abschnitt innerhalb eines DIVs, und zwar mit der ID imgContainer. Das Bild innerhalb des Div wird zwischen zwei Style-Tags oben in der Mail gestaltet:
<style type="text/css">
div#imgContainer img { border: none; display: inline-block; }
@media only screen and (max-width: 480px) { div#imgContainer img { width: 100% !important; height: auto !important; } }
</style>
<div id="imgContainer">
<div id="MASECTION" macontenteditable="FALSE" maconstraint="" maparameter="HERO_IMAGE" matype="" mahidediv="true"></div>
</div>
Normalerweise würde der Style direkt auf das Bild angewendet, aber nachdem das Bild mit dem Dynamischen Bereich ersetzt wurde, wird auch sein Design ersetzt. In der fertigen Mail, die schließlich versendet wird, wird dieser Abschnitt wieder - basierend auf dem Content, den der Express-Benutzer vorgibt - mit einem neuen a-Tag und einem Bild-Tag ersetzt.
