Wie optimiere ich meine Landing Page für mobile Geräte?

Der GetResponse Landing Page Editor erstellt automatisch eine mobilfreundliche Ansicht für Sie. Dadurch wird sichergestellt, dass Ihre Landing Page auf verschiedenen Bildschirmgrößen sowohl im Hoch- als auch im Querformat responsiv ist.

Sie können die mobile Ansicht mit den folgenden Optionen anpassen:

Auf Mobilgeräten verbergen

Diese Funktion ist für jedes Element auf Ihrer Landing Page verfügbar. Nutzen Sie sie, um bestimmte Objekte auszublenden, wenn Ihre Seite auf einem mobilen Gerät angezeigt wird, und sorgen Sie so für eine einfachere und schnellere Benutzererfahrung.

Diese Option finden Sie am unteren Ende der Objekt-Einstellungsleiste.


Es ist besonders hilfreich, um Trennlinien und Abstände in der mobilen Ansicht auszublenden.

Hinweis: Vertikale Trennlinien haben diese Option standardmäßig aktiviert.

Auf Mobilgeräten auf gesamte Breite skalieren

Wenn aktiviert, sorgt diese Option dafür, dass Ihr Bild oder Video die gesamte Breite des mobilen Bildschirms einnimmt. Sie hilft, den begrenzten Platz auf mobilen Bildschirmen optimal zu nutzen, während sie gleichzeitig eine alternative Anordnung für die Desktop-Version ermöglicht.


Hinweis: Diese Option ist nur für Bilder und Videos verfügbar.

Mobilansicht-optimierung

Sie können die Schriftgrößen und Abstände Ihrer Seite für mobile Geräte definieren. Die Desktop-Ansicht wird von den Änderungen nicht betroffen.

Um den Optimierer zu öffnen, klicken Sie auf das mobile Symbol rechts in der oberen Symbolleiste und passen Sie die Werte mit den Schiebereglern an.

Klicken Sie auf Auf Standard zurücksetzen, um jeden Abschnitt auf die Standardwerte zurückzusetzen.


Schritte für Legacy Landing Pages

In unserem Mobilen Arbeitsbereich im Landing Page Editor lässt Sie die Mobilversion Ihrer Seite prüfen und anpassen. Sie können:

  • Text und Bilder skalieren und die Größe ändern
  • Elemente ausblenden
  • Elemente neu positionieren
  • Hintergrundbilder ersetzen

Der Mobile Arbeitsbereich erlaubt die Bearbeitung Ihrer:

  • leeren Seite, die als Basis für Ihre neue Landing Page dient,
  • Seitenvorlagen, die Sie im Editor nach Ihren Bedürfnissen anpassen
  • bereits bestehenden Landing Page, die Sie überarbeiten.

Klicken Sie Vorschau und Sie können in einem neuen Browsertab sehen, wie Ihre Besucher Ihre Landing Page sehen werden.

Wie gelange ich zum mobilen Arbeitsbereich?

Wenn Sie eine neue Landing Page erstellen, klicken Sie oben auf der Seite das kleine Symbol Mobiler Arbeitsbereich.

Auswahl mobiler Arbeitsbereich.

Für bestehende Landing Pages klicken Sie auf das Symbol für den mobilen Arbeitsbereich im Landing Page Editor. Es öffnet sich ein Pop-up-Fenster, in dem Sie bestätigen müssen, dass Sie die Seite konvertieren möchten. Sobald Sie dies tun, öffnet sich der mobile Arbeitsbereich.

Nachdem die Landing Page konvertiert wurde, kann ihre mobile Version auf mobilen Geräten angezeigt werden. Der Breakpoint für die mobilen Versionen in GetResponse liegt bei 600 px. Wenn Ihre Landing Page also in einem Viewport von 600 px oder kleiner angezeigt wird, wird die mobile Version bereitgestellt.

Hinweis: Wenn Sie nicht für alle Varianten Ihrer Landing Page und Dankeseite in den mobilen Arbeitsbereich gehen und diese vor dem Speichern konvertieren, werden wir Sie bitten zu bestätigen, ob Sie möchten, dass wir diese in mobile Versionen umwandeln.

Wie kann ich meine Landing Page automatisch für mobile Geräte anpassen?

Da der Arbeitsbereich der Desktop– und der Mobilversion unterschiedliche Versionen desselben Layouts darstellen, kann eine Version nicht manuell bearbeitet werden, ohne die andere zu beeinflussen. Stattdessen bieten wir die Option, Ihre Landing Page automatisch für Mobilgeräte zu optimieren:

1. Klicken Sie auf das Symbol für den mobilen Arbeitsbereich.
2. Klicken Sie irgendwo im mobilen Arbeitsbereich.
3. Wenn Sie Windows verwenden, drücken Sie Control + O auf Ihrer Tastatur. Wenn Sie einen Mac verwenden, drücken Sie Command + O auf Ihrer Tastatur.
4. Ein neues Fenster erscheint, in dem Sie gefragt werden, ob Sie das mobile Layout optimieren möchten. Klicken Sie auf Ja, um fortzufahren.

Auswahl Layout optimieren.

Ihre Landing Page wird automatisch für mobile Geräte optimiert.

Hinweis: Dadurch werden alle Änderungen, die Sie am mobilen Design vorgenommen haben, rückgängig gemacht. Diese Aktion kann nicht rückgängig gemacht werden. Ihre Bearbeitungshistorie wird nicht verfügbar sein.

Wie kann ich Elemente im mobilen Arbeitsbereich neu positionieren?

Mit Drag und Drop können Sie Elemente im mobilen Arbeitsbereich verschieben. Bitte beachten Sie, dass einige Änderungen im mobilen Arbeitsbereich auch die Desktopversion beeinflussen können:

  • Verschieben von Elementen in einen anderen Abschnitt oder das Entfernen von Objekten aus einem Block beeinflusst auch die Desktopversion der Landing Page.
  • Verschieben von Elementen innerhalb eines Abschnitts betrifft nur die Mobilversion. Die Desktopversion bleibt davon unberührt.

Wir benachrichtigen Sie jedes Mal, wenn dies passiert, indem wir eine Zahl neben dem Symbol für den mobilen Arbeitsbereich anzeigen.

Anzeige Änderungen der Desktopversion.

Die Nummer zeigt an, wie viele Ihrer Änderungen die Desktopversion betreffen. (Das Gleiche gilt für Änderungen, die Sie in der Desktopversion vornehmen und die die Mobilversion beeinflussen.)

Sie können Elemente nur innerhalb des festgelegten Arbeitsbereichs verschieben. Es ist nicht möglich, Elemente an den äußeren Rand des Arbeitsbereichs zu platzieren (diese Bereiche sind mit diagonalen Streifen abgedeckt), da sie möglicherweise nicht sofort im Viewport von Mobilgeräten sichtbar sind. Ihre Kunden müssten scrollen, um die dort platzierten Objekte zu sehen. Wir möchten sicherstellen, dass Ihre Landing Page auf kleinen Bildschirmen korrekt angezeigt wird, und geben Ihnen daher Hinweise, wo es besser ist, keine Objekte zu platzieren.

Ansicht mobiler Arbeitsbereich.

Wie skaliere und ändere ich die Größe von Elementen im mobilen Arbeitsbereich?

Sie können die Größe auch ändern, um die Breite des Textelements anzupassen. Anschließend können Sie das Element skalieren, um die Textgröße im mobilen Arbeitsbereich zu vergrößern oder zu verkleinern.

Die Größenänderung und Skalierung ermöglichen es Ihnen, Textelemente im mobilen Arbeitsbereich so anzupassen, dass sie im Viewport genau so angezeigt werden, wie Sie es möchten. So geht’s:

1. Klicken Sie auf das Objekt, um die Größenanpassungsgriffe anzuzeigen.

Sizing handles visible for text block.

2.Um die Größe zu ändern, klicken und ziehen Sie die Größenanpassungsgriffe an den Seiten, um die Breite des Textelements zu verändern.

Resizing text block.

3. Zum Skalieren klicken und ziehen Sie die Größenanpassungsgriffe in den Ecken, um den Text kleiner oder größer zu machen.

Scaling text block.

Skalieren und Größenänderungen im mobilen Arbeitsbereich haben keinen Einfluss auf die Desktopversion.

Kann ich Elemente aus dem mobilen Arbeitsbereich entfernen?

Sie können Elemente im mobilen Arbeitsbereich verbergen. Klicken Sie dazu auf das Sichtbarkeitssymbol, das erscheint, nachdem Sie ein Element ausgewählt haben.

Visibility icon shown.

Um die verborgenen Elemente anzuzeigen, klicken Sie auf die Schaltfläche Verborgene Elemente anzeigen in der oberen Menüleiste. Der Arbeitsbereich wird ausgegraut, und das verborgene Objekt wird sichtbar. Sie können nun:

  • Das Element sichtbar machen. Klicken Sie dafür das kleine Symbol oben rechts im Element.
  • Das Element weiterhin verbergen. Klicken Sie dafür nochmals Elemente verbergen oben in der Menüleiste
Auswahl Elemente verbergen.

Hinweis: Es ist nicht möglich, Elemente im mobilen Arbeitsbereich hinzuzufügen oder zu löschen. Um dies zu tun, müssen Sie zum Desktop-Arbeitsbereich wechseln.

Kann ich im mobilen Arbeitsbereich Textelemente bearbeiten und Hintergrundbilder ersetzen?

Sie können Textelemente bearbeiten und Hintergrundbilder im mobilen Arbeitsbereich ersetzen. So geht’s:

  • Für Textelemente: Doppelklicken Sie auf das Element, um die Werkzeugleiste mit den Bearbeitungsoptionen zu öffnen. Sie können die Textgröße, Farbe und Ausrichtung ändern.
  • Für Hintergrundbilder: Doppelklicken Sie auf das Bild, um die Werkzeugleiste mit den Bearbeitungsoptionen zu öffnen. Klicken Sie auf das Hintergrundbild-Symbol, um das aktuelle Bild zu ersetzen, oder auf das X-Symbol, um es zu entfernen.