Zum Hauptinhalt springen
Alle KollektionenGrundlagen
Wie kann ich die Seite für mobile Geräte optimieren?
Wie kann ich die Seite für mobile Geräte optimieren?

In diesem Artikel erfährst du, wie du die Abschnitte für die Mobil- oder die Desktop-Ansicht erstellen und separat bearbeiten kannst.

Nik Makukhin avatar
Verfasst von Nik Makukhin
Vor über einer Woche aktualisiert

Onepage hat anderen Pagebuildern voraus, dass die Abschnitte, mit denen du deine Landingpage baust, bereits mobil optimiert sind. Automatisch passt sich deine Seite bereits mobilen Endgeräten an. Unsere Designer arbeiten dir also vor!

⚙️ Wenn du verschiedene Abschnitte deiner Website unterschiedlich für mobile Geräte und Desktop arrangieren möchtest, musst du möglicherweise den Inhalt für jedes Gerät separat optimieren. Es kann hilfreich sein, separate Abschnitte für jeden Gerätetyp zu erstellen. Zum Beispiel werden Abschnitte, die für Mobiltelefone gedacht sind, nicht angezeigt, wenn Benutzer deine Website auf einem Laptop besuchen.

🎬 Am Ende des Artikels findest du unsere aktuelle Videoanleitung!


Ansicht bearbeiten:


​Schritt 1: Einstellungen finden

Fahre mit dem Mauszeiger über den betroffenen Abschnitt. Dir wird folgendes Panel mit Einstellungen oben rechts angezeigt:

Schritt 2: Abschnitt duplizieren

📌 Hinweis: Wenn du nicht möchtest, dass der Abschnitt in beiden Versionen (Mobil und Desktop) verfügbar ist, kannst du diesen Schritt überspringen

Klicke auf das [...] Symbol und dann auf duplizieren. Somit verfügst du über zwei Abschnitte, die du separat bearbeiten kannst. Einen für Desktop-Computer und einen für mobile Geräte.

Schritt 3: Sichtbarkeit bearbeiten

Bitte wähle, ob der Abschnitt nur auf dem Desktop oder nur auf dem Handy sichtbar sein soll.

Mit der Einstellung "Sichtbar auf" kannst du auswählen, für welches Endgerät dieser Abschnitt sichtbar ist. Onepage erkennt, mit welchem Endgerät die Interessenten auf deine Seite gehen und zeigt diesen Abschnitt entsprechend an oder blendet es aus. Das Ganze nennt man "Responsive Design".

Schritt 4: Veröffentlichen/aktualisieren

Zum Schluss veröffentliche oder aktualisiere bitte deine Seite und teste deine Änderungen sowohl auf dem Desktop als auch auf dem Handy.


Mobile Abschnitte sehen

Klicke auf das Bildschirmsymbol rechts unten und aktiviere die versteckten Abschnitte. Das sind die Abschnitte der mobilen Ansicht, die standardmäßig nicht eingeblendet werden.


Burger Menü in der mobilen Ansicht bearbeiten

Wenn du eine Kopfzeile zu deiner Seite hinzufügst, wird sie in der mobilen Ansicht automatisch in ein Burger Menü umgewandelt.

Bei Bedarf kannst du das Design des Burger Menüs ändern. Rufe die Ansicht-Einstellungen auf und klicke auf die "Mobile Ansicht":


🎬 Sieh dir auch gerne unser Video zu diesem Thema an:


Häufig gestellte Fragen und Lösungen

Wie kann ich verstehen welcher Abschnitt für Desktop und welcher für mobile Geräte freigegeben ist?

Fahre mit dem Mauszeiger über den Abschnitt. Oben rechts wirst du einen Button sehen, welcher die aktuelle Ansicht-Regel des Abschnittes zeigt:

📌 Hinweis: um die Abschnitte nicht zu verwechseln, empfehlen wir diese einfach umzubenennen.

Wieso scrollt meine Seite nicht auf den hinterlegten Abschnitt?

Bitte prüfe, ob die Scroll Funktion auf den Abschnitt aus gleicher Ansicht verweist (Desktop/Mobil).

Ein Knopf im Dekstop kann nicht auf einen Abschnitt verweisen, welches nur für mobile Geräte freigegeben ist, denn der mobile Abschnitt wird im Desktop nicht geladen.

Wieso ist mein Abschnitt ausgegraut?

Das bedeutet, dass dieser Abschnitt für die aktuelle Ansicht nicht freigegeben ist.

Zum Beispiel: du schaust dir aktuell die Desktop-Ansicht an. Somit werden alle mobilen Abschnitte ausgegraut sein. Und umgekehrt, alle Desktop Abschnitte werden in der mobilen Ansicht ausgegraut.

Wie kann ich das Burger Menü ausblenden?

In Moment ist das nicht möglich. Allerdings kannst du stattdessen einfach ein "normales" Abschnitt mit Logo nutzen:


💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂

Hat dies deine Frage beantwortet?