Eine responsive Seite ist eine einzige Seite, die sich so umordnet, dass sie auf jeden Bildschirm passt. Sie bauen sie aus Abschnitten auf, die auf der Seite untereinander liegen, und verwenden Container, um Dinge auf dem Computer nebeneinander und auf dem Smartphone untereinander anzuordnen. Für die wenigen Objekte, die an einer genauen Stelle sitzen müssen, zum Beispiel ein Badge auf einem Foto, setzen Sie das Häkchen bei Freies Ziehen ermöglichen und heften sie an.
Bevor Sie beginnen
- Prüfen Sie den Seitentyp. Wählen Sie die Seite aus und gehen Sie zu Inspektor > Seiteneinstellungen > Seitenlayout. Dort sollte Responsiv stehen. Wenn dort Zentriertes Layout steht, lesen Sie Meine Website sieht auf dem Handy falsch aus: So funktioniert die mobile Darstellung in EverWeb.
- Sie möchten eine bestehende Seite in eine responsive Seite umwandeln? Wenn Sie das Seitenlayout ändern, kann sich Ihr gesamtes Design verschieben, und Sie können das nicht rückgängig machen. Sicherer ist es, eine neue Seite hinzuzufügen und Ihre Inhalte hinüberzuholen: Klicken Sie auf Seite hinzufügen, wählen Sie im Filtermenü oben in der Themenvorlagen-Auswahl Responsiv, wählen Sie Blank Responsive und den Seitenstil Home, und klicken Sie dann auf Wählen.
Wie eine responsive Seite aufgebaut ist
Jedes Objekt mit Volle Breite und jeder Container ist ein Abschnitt. Abschnitte liegen auf jedem Bildschirm in derselben Reihenfolge untereinander und schrumpfen, damit sie passen. Ein Container ordnet an, was in ihm liegt, und Sie können Container in Container setzen, zum Beispiel eine Zeile mit zwei Spalten. Objekte, die nicht auf Volle Breite gestellt werden können, wie manche Widgets, müssen in einen Container. Halten Sie sie etwa 280 bis 320 Pixel breit, damit sie auf ein Smartphone passen.
Einen Container hinzufügen
- Klicken Sie in der Werkzeugleiste auf Container.
- Wählen Sie Container-Zeile, Container-Spalte oder Freier Fluss des Containers.
- Ziehen Sie Objekte hinein, oder klicken Sie auf die Schaltfläche + in der Mitte des leeren Containers.
Die Objekte sind schon auf der Seite? Klicken Sie bei gedrückter Umschalttaste auf jedes einzelne, klicken Sie mit der rechten Maustaste (oder auf dem Mac bei gedrückter Ctrl-Taste), wählen Sie Enthalten als und dann Zeile, Spalte oder Freier Fluss.
| Layout | Auf dem Computer | Auf dem Smartphone |
|---|---|---|
| Spalte | Objekte von oben nach unten gestapelt | Weiterhin gestapelt, jedes etwas schmaler |
| Zeile | Objekte nebeneinander | Bleiben nebeneinander und werden zusammengedrückt, außer Sie stellen Umbruch ein (siehe unten) |
| Freier Fluss | Sie platzieren Objekte beliebig darin | Objekte behalten ihre angehefteten Positionen. Prüfen Sie das also auf einem Smartphone |
Um das später zu ändern, wählen Sie den Container aus, indem Sie auf eine leere Stelle darin klicken (oder klicken Sie mit der rechten Maustaste und verwenden Sie Ebene wählen). Gehen Sie dann zu Inspektor > Widget-Einstellungen (das Zahnrad, das letzte Symbol) und ändern Sie Anzeigen > Layout.
Die Inhalte auf dem Smartphone stapeln
- Zeilen: Stellen Sie unter Widget-Einstellungen > Anzeigen den Umbruch auf Wrap (Umbrechen). Die Objekte rutschen dann untereinander, wenn der Bildschirm zu schmal wird. Die Standardeinstellung No Wrap (kein Umbruch) hält sie in einer Reihe.
- Soll das zweite Objekt auf dem Smartphone oben stehen, zum Beispiel das Foto über seinem Text? Stellen Sie Umbruch auf Reverse Wrap (umgekehrter Umbruch).
- Objekte nebeneinander in einer Zeile: Entfernen Sie unter Inspektor > Maße das Häkchen bei Volle Breite und geben Sie jedem Objekt eine Breite. Ein Objekt mit Volle Breite in einer umbrechenden Zeile belegt eine ganze Reihe für sich.
- Objekte in einer Spalte oder direkt auf der Seite: Setzen Sie das Häkchen bei Volle Breite und geben Sie dann eine Max. Breite ein, damit sie sich auf einem großen Bildschirm nicht zu weit ausdehnen. Mehr dazu unter Meine Website sieht auf meinem Computer gut aus, ist aber auf meinem Handy abgeschnitten oder durcheinander.
- Lassen Sie die Höhe auf Auto (Widget-Einstellungen > Größe), damit der Container wachsen kann, wenn sich sein Inhalt stapelt.
Ein Objekt genau platzieren: Freies Ziehen und Anheften
Ab EverWeb 4.5 können Sie ein Objekt auf einer responsiven Seite überall platzieren, direkt auf der Seite oder in einem Container:
- Wählen Sie das Objekt aus und gehen Sie zu Inspektor > Maße.
- Setzen Sie das Häkchen bei Freies Ziehen ermöglichen und ziehen Sie das Objekt an die gewünschte Stelle.
- Klicken Sie auf Pin Settings (Anheft-Einstellungen) und wählen Sie, wo es angeheftet werden soll, zum Beispiel oben und rechts. Setzen Sie das Häkchen bei Constrain to edge (am Rand festhalten), damit es direkt an diesem Rand bleibt.
Ein frei platziertes Objekt schiebt nichts anderes nach unten. Verwenden Sie das für einige wenige Objekte, nicht für eine ganze Seite: Wenn jedes Objekt frei platziert ist, stapelt sich auf dem Smartphone nichts. Um ein Objekt wieder in den normalen Fluss zu bringen, entfernen Sie das Häkchen bei Freies Ziehen ermöglichen. Um ein Objekt aus einem Container mit freiem Fluss herauszuziehen, halten Sie beim Ziehen die Befehlstaste (Mac) oder Alt (Windows) gedrückt.
Warum keine Dynamischen Reihen verwenden?
Dynamische Reihen (Responsive Rows) sind die ältere Version von Containern, und wir empfehlen sie für neue Seiten nicht mehr. Ihre bestehenden funktionieren weiterhin.
| Container | Dynamische Reihe | |
|---|---|---|
| Layouts | Zeile, Spalte oder Freier Fluss | Nur Zeile |
| Breite | Volle Breite oder eine feste Breite | Nur volle Breite |
| In anderen Containern | Ja | Nein |
| Freies Ziehen und Anheften darin | Ja | Nein, das Kästchen ist ausgegraut |
Um eine zu ersetzen, fügen Sie daneben eine Container-Zeile hinzu, ziehen Sie die Objekte hinüber und löschen Sie dann die leere Dynamische Reihe. Beim Löschen wird auch alles gelöscht, was noch darin liegt. Prüfen Sie also vorher, ob sie leer ist, und verwenden Sie bei Bedarf Bearbeiten > Rückgängig.
In welchem Container liegt dieses Objekt?
Klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie Einbetten in. Die Liste zeigt den Container, in dem es liegt, und Sie können es in einen anderen verschieben. Geben Sie Ihren Containern in den Widget-Einstellungen Namen wie „Kopfbereich“ oder „Leistungen“, damit die Liste verständlich ist. Wie Sie verdeckte oder überlappende Objekte auswählen, lesen Sie unter Warum bleibt das nicht dort, wohin ich es ziehe?.
Prüfen, ob es funktioniert hat
Ziehen Sie das EverWeb-Fenster schmaler und beobachten Sie, wie sich die Seite neu anordnet. Klicken Sie dann auf Vorschau, wählen Sie Preview QR Code (QR-Code-Vorschau) und scannen Sie ihn mit Ihrem Smartphone. Nichts sollte seitlich verrutschen oder über etwas anderem liegen. Falls doch, lesen Sie Meine Website sieht auf meinem Computer gut aus, ist aber auf meinem Handy abgeschnitten oder durcheinander.
Wenig Zeit? Wir können Ihre Website für Sie als responsive Website neu aufbauen. Fragen Sie den Support nach einem unverbindlichen Angebot.
Verwandte Artikel
- Meine Website sieht auf dem Handy falsch aus: So funktioniert die mobile Darstellung in EverWeb
- Meine Website sieht auf meinem Computer gut aus, ist aber auf meinem Handy abgeschnitten oder durcheinander
- Warum bleibt das nicht dort, wohin ich es ziehe?
- Mit einer Master-Seite dieselbe Kopfleiste, dasselbe Menü und dieselbe Fußleiste auf jede Seite bringen