Kompatibilität:
WebSite X5 Evo und Pro
Wenn man Überlegungen dazu anstellt, wie eine Website auf unterschiedlichen Geräten angezeigt wird, bemerkt man schnell, dass auch die Grafikvorlage geändert werden muss, damit eine möglichst gute Präsentation gelingt. Mit zunehmend geringer werdender Auflösung der Geräte könnten einige Elemente der Vorlage nicht mehr genügend Platz haben, um angezeigt zu werden, und in Abhängigkeit ihrer Bedeutung könnte es sinnvoll sein, sie zu entfernen.
In WebSite X5 können Sie in der Vorlage festlegen, wie die Ansichten auf der Grundlage der Umbruchpunkte wechseln sollen.
- Öffnen Sie nach der Auswahl einer fertigen oder leeren Vorlage die Seite Auflösungen und responsives Design, wählen Sie dort die Erstellung einer responsiven Website und aktivieren Sie alle Umbruchpunkte, die Sie verwalten möchten.
- Die Responsiv-Leiste enthält alle Intervalle, die bei der Einstellung der Umbruchpunkte im Fenster Auflösungen und responsives Design festgelegt wurden.
- Wählen Sie nach der Konfiguration der Ansicht Desktop auf der Responsiv-Leiste das nächste Intervall und nehmen Sie an der Vorlage die erforderlichen Änderungen vor.
- Gehen Sie absteigend analog mit allen Intervallen auf der Responsiv-Leiste vor und ändern Sie die jeweilige Vorlage.
#Tipp - Vordefinierte Vorlagen. Die in WebSite X5 inklusiven vordefinierten Vorlagen sind schon für mobile Endgeräte optimiert: Einige Umbruchpunkte sind also schon definiert und werden beim Anklicken der Option für die Erstellung einer responsiven Website im Fenster Auflösungen und responsives Design aktiviert. Diese Umbruchpunkte können Sie wunschgemäß angepasst werden.
Nachdem die Struktur der Vorlage definiert wurde, können noch der Header und die Fußzeile angepasst werden. Auch diese Bereiche können auf der Grundlage der jeweiligen Auflösung, in der die Website angezeigt wird, geändert werden.
- Öffnen Sie in Schritt 2 den Bereich Inhalt des Templates. Auch in diesem Fenster ist bei der Erstellung einer responsiven Website die Responsiv-Leiste verfügbar.
- Wählen Sie auf der Responsiv-Leiste das Intervall der Ansicht Desktop und gestalten Sie den Header und die Fußzeile der Vorlage.
- Wählen Sie dann auf der Responsiv-Leiste nacheinander die folgenden Intervalle und nehmen Sie am Header und der Fußzeile die notwendigen Änderungen vor.
- Für jede Ansicht können Sie:
- Neue Objekte hinzufügen. Wenn Sie ein Objekt einfügen, ist es in der aktuellen Ansicht und allen kleineren, aber nicht in den größeren sichtbar (wo es automatisch verborgen wird).
- Objekte verbergen. Markieren Sie ein Objekt, klicken Sie auf die Schaltfläche
Objekt einblenden/ausblenden und legen Sie fest, ob es nur in der aktuellen Ansicht oder auch in allen kleineren Ansichten verborgen werden soll. - Objekte erneut anzeigen, die zuvor verborgen wurden. Klicken Sie auf das Dreieck auf der Schaltfläche
Objekt einblenden/ausblenden, um das Menü zu öffnen, und dann auf die Option Verwaltung verborgener Objekte. Wählen Sie in dem geöffneten Fenster das betreffende Objekt aus und aktivieren Sie die Option Sichtbar. - Die Position und/oder Größe von Objekten ändern. Alle anderen Eigenschaften der Objekte bleiben in allen Ansichten unverändert.
#Tipp - Automatische Neupositionierung. Wen ein oder mehrere Objekte in einer bestimmten Ansicht nicht mehr vollständig sichtbar sind, werden sie automatisch neu positioniert. Bei dieser Neupositionierung werden die Objekte verschoben, aber nicht in ihrer Größe verändert, daher können sie sich überschneiden. Aus diesem Grund wird empfohlen, immer in der Vorschau zu prüfen, wie der Header und die Fußzeile in den verschiedenen Ansichten dargestellt werden.