Wie mache ich eine Emailify-E-Mail auf Mobilgeräten responsiv?
Emailify exportiert automatisch responsives HTML. Mit Anpassungen für Mobilgeräte auf einzelnen Emailify-Ebenen kannst du das mobile Verhalten zusätzlich feinjustieren. Beginne mit dem Desktop-Frame der E-Mail und prüfe dann vor dem Export die mobile Version in der Vorschau des Plugins.
Wo lege ich Anpassungen für Mobilgeräte fest?
Wähl die Emailify-Ebene aus, die du anpassen willst, klick im Kopfbereich des Plugins auf den Button Settings und nutze dann die mobilen Einstellungen für diese Ebene. Text-, Column-, Row-, Hero-, Wrapper-, Bild- und Button-Ebenen bieten je nach ausgewähltem Ebenentyp unterschiedliche mobile Einstellungen.
Warum beginnt das mobile Layout bei einer anderen Breite?
Emailify nutzt einen einzigen responsiven Breakpoint, der sich nach der Breite des Desktop-Frames von Emailify in Figma richtet. Ist dein Emailify-Frame 600px breit, greifen die mobilen Stile ab 599px und darunter. Ist dein Frame breiter, liegt auch der mobile Breakpoint höher.
Um mobile Stilanpassungen hinzuzufügen, klick in deinem Design auf eine beliebige Emailify-Ebene, dann im Kopfbereich des Plugins auf den Button Settings, und lege für die ausgewählte Ebene die gewünschten mobilen Stilanpassungen fest.
Klickst du zum Beispiel auf eine Text-Ebene in deiner E-Mail, kannst du für Mobilgeräte Schriftgröße, Zeilenhöhe, Zeichenabstand, Absatzabstand, Padding und Ausrichtung überschreiben. Klickst du dagegen auf eine Row-Ebene, kannst du ihr Padding überschreiben, den Abstand zwischen ihren Spalten, ob die Spalten auf Mobilgeräten gestapelt werden sollen (oder nicht) und, wenn sich mehrere Spalten weiterhin eine mobile Zeile teilen, ihre vertikale Ausrichtung auf Mobilgeräten.
Deine Anpassungen für Mobilgeräte kannst du mit der Funktion Vorschau im Emailify-Plugin visuell prüfen.
Mobiler Breakpoint der E-Mails. Die aus Emailify exportierten HTML-E-Mails haben einen einzigen „Breakpoint“, der automatisch über die Breite des Desktop-Frames in Figma festgelegt wird. Ist dein Emailify-Frame zum Beispiel 600px breit, greifen die mobilen Stile bzw. Anpassungen ab 599px und darunter.
Empfohlen wird meist eine E-Mail-Breite zwischen 600px und 640px, weil die Lesebereiche mancher E-Mail-Clients oder Apps schmaler als 700px sein können und dann die mobilen Stile statt des Desktop-Layouts anzeigen.
Du kannst Einstellungen auf mehrere Ebenen anwenden, indem du Settings öffnest und dann in Figma mehrere Emailify-Ebenen desselben Typs auswählst. Jede Einstellung, die du änderst, wird auf alle ausgewählten Ebenen angewendet.