Ihre Website auf Smartphones und Tablets richtig darstellen
Sehen Sie, wie Ihr Shop auf Tablets und Smartphones aussieht, blenden Sie Blöcke auf kleinen Bildschirmen aus und passen Sie die Position eines Blocks nur für eine Bildschirmgröße an.
Die meisten Kunden besuchen einen Shop mit dem Smartphone, Ihre Seiten müssen also in jeder Größe funktionieren. Sie gestalten einmal, und Payly passt die Seite für Tablets und Smartphones an. Dieser Artikel erklärt, was automatisch passiert und wie Sie es ändern, wenn sich ein Block auf einem kleineren Bildschirm anders verhalten soll.
So passt sich Ihr Layout an
Blöcke liegen in den Zellen eines Rasters mit 12 Spalten, nie an festen Pixelpositionen, sodass sie sich auf einem kleinen Bildschirm nicht überlappen können. Die Seite wechselt an zwei Stellen das Layout:
- Tablets (Bildschirme schmaler als 1024 Pixel) behalten dasselbe Raster. Ein Block bleibt dort, wo er ist, es sei denn, Sie verschieben ihn für Tablets.
- Smartphones (760 Pixel oder schmaler) setzen jeden Block in eine eigene Zeile in voller Breite. Die Blöcke werden von oben nach unten in der Reihenfolge gestapelt, in der Sie sie am Desktop lesen: von oben nach unten, dann von links nach rechts.
Manche Blöcke passen sich noch weiter an. Links in der Kopfzeile verschwinden hinter einer Menü-Schaltfläche, Raster werden zu einer Spalte, und Galerien und Logoleisten zeigen zwei Spalten. Das Ergebnis ist ein Shop, der ohne zusätzliche Einrichtung auf dem Smartphone funktioniert.
Zwischen Bildschirmgrößen wechseln
- Klicken Sie in der oberen Leiste des Editors auf Tablet oder Mobil. Die Seite wird schmaler und zeigt, wie sie in dieser Größe aussieht.
- Sehen Sie die Seite durch und achten Sie auf alles, was sich nicht gut liest. Scrollen Sie und wählen Sie Blöcke wie gewohnt aus.
- Klicken Sie auf Desktop, um zum Layout in voller Größe zurückzukehren.
Diese Schaltflächen können mehr als eine Vorschau. Sie legen auch fest, welches Layout Sie gerade bearbeiten. Wenn Sie zu Tablet oder Mobil wechseln, erinnert Sie eine Meldung daran, dass Änderungen nur für diese Größe gelten. Alles, was Sie dort ändern, lässt das Desktop-Layout unberührt.
Einen Block auf kleinen Bildschirmen ausblenden
Ein großes Foto oder ein langer dekorativer Block kann ein Smartphone-Display überladen. Sie können ihn auf kleinen Bildschirmen ausblenden und am Desktop beibehalten.
- Klicken Sie in der oberen Leiste auf Mobil (oder Tablet).
- Wählen Sie den Block aus.
- Öffnen Sie im Einstellungsbereich Größe und Position.
- Schalten Sie Auf Mobil ausblenden (oder Auf Tablet ausblenden) ein. Der Block verschwindet aus dieser Ansicht und hinterlässt auf der Live-Seite keine Lücke.
Ein auf Tablets ausgeblendeter Block ist auch auf Smartphones ausgeblendet, es sei denn, Sie schalten den Schalter in der Ansicht Mobil wieder aus. Um einen Block auf allen Bildschirmen auszublenden, verwenden Sie Diesen Block ausblenden in der Ansicht Desktop.
Einen Block in einer Größe anders platzieren
- Wählen Sie in der oberen Leiste Tablet oder Mobil.
- Wählen Sie den Block aus und öffnen Sie Größe und Position.
- Ändern Sie Beginnt in Spalte, Spalten breit, Beginnt in Zeile oder Zeilen hoch, oder klicken Sie auf Die volle Breite ausfüllen. Sie können den Block auch auf der Seite ziehen und seine Größe ändern.
Die Leiste oben in Größe und Position zeigt, welches Layout Sie gerade bearbeiten. Sie zeigt Geerbt, solange der Block der größeren Größe folgt, und eine Schaltfläche Zurücksetzen, sobald der Block eigene Einstellungen hat. Klicken Sie auf Zurücksetzen, damit der Block wieder der größeren Größe folgt. Klicken Sie auf Dieses Layout auf allen Bildschirmen verwenden, um das aktuelle Layout auf alle Größen zu übertragen.
Die obere Leiste zählt außerdem die Blöcke, die sich vom Desktop-Layout unterscheiden, zum Beispiel 1 Block unterscheidet sich bei Mobil. Klicken Sie auf die Zahl, um von einem solchen Block zum nächsten zu springen.
Einen Block auf allen Bildschirmen gleich halten
Schalten Sie in Größe und Position die Option Auf allen Bildschirmen gleich ein, um einem Block überall dasselbe Layout zu geben. Alle Einstellungen, die er für Tablet oder Smartphone hatte, werden entfernt, und spätere Änderungen gelten für alle Größen gleichzeitig.
Hinweis: Wenn Sie einen Block in einen anderen Abschnitt verschieben, ändert sich das auf allen Bildschirmgrößen. Payly erlaubt das deshalb nur in der Ansicht Desktop. Um einen Block auf Smartphones anders zu platzieren, fügen Sie ihn beiden Abschnitten hinzu und blenden in jeder Größe den aus, den Sie nicht möchten.
Das Ergebnis prüfen
Klicken Sie mit der Vorschau Ihre Seiten in Smartphone- und Tablet-Breite durch und sehen Sie sich den veröffentlichten Shop auf einem echten Smartphone an, bevor Sie ihn ankündigen. Siehe Ihre Website vor dem Veröffentlichen ansehen.