Kompatibilität:

WebSite X5 Evo und Pro

Bei der Erstellung einer responsiven Website reicht es nicht aus, nur die Seiteninhalte anzupassen: Auch das Template muss optimiert werden, um eine effektive Darstellung auf Desktop, Tablet und Smartphone zu gewährleisten.


Mit abnehmender Bildschirmauflösung kann es vorkommen, dass einige Layoutelemente nicht mehr genügend Platz haben oder für die Navigation weniger relevant werden. In diesen Fällen ist es wichtig, das Template anzupassen, um die Struktur zu vereinfachen, die Lesbarkeit zu verbessern und eine gute Benutzererfahrung sicherzustellen.


Mit WebSite X5 können Sie diese Anpassungen einfach und visuell vornehmen, indem Sie festlegen, wie sich Struktur, Header und Footer automatisch an die konfigurierten Breakpoints anpassen.


Warum es wichtig ist, das Template anzupassen

Das Template stellt die grundlegende Struktur der Website dar und umfasst wesentliche Elemente wie:

  • Seitenlayout;
  • Header;
  • Footer;
  • Menü;
  • feste Bereiche des Projekts.


Eine korrekte Verwaltung des responsiven Templates ermöglicht es Ihnen:

  • die Navigation zu verbessern;
  • die Benutzeroberfläche auf kleineren Bildschirmen zu vereinfachen;
  • nicht wesentliche Elemente auszublenden;
  • Abstände und Proportionen zu optimieren;
  • die grafische Konsistenz zu erhalten.


So ändern Sie die Template-Struktur für jeden Breakpoint

In WebSite X5 können Sie am Template arbeiten, um festzulegen, wie es sich in den verschiedenen Ansichten ändern soll, die durch die aktivierten Breakpoints bestimmt werden:

1. Zugriff auf die Template-Struktur

  • Gehen Sie zu Schritt 2 - Template.
  • Öffnen Sie das Fenster Template-Struktur: Wenn Sie sich für die Erstellung einer responsiven Website entschieden haben, wird auf der Seite des Fensters die Responsive Bar angezeigt.
  • Die Responsive Bar zeigt alle Intervalle an, die durch die in der Auflösungen und Responsive Design-Maske definierten Breakpoints festgelegt sind: Verwenden Sie sie, um die Ansicht auszuwählen, an der Sie arbeiten möchten.

2. Desktop-Ansicht konfigurieren

Beginnen Sie immer mit der Hauptansicht:

  • Wählen Sie in der Responsive Bar die Desktop-Ansicht aus.
  • Verwenden Sie die verfügbaren Optionen, um die Grundstruktur des Templates festzulegen.

3. Untergeordnete Ansichten anpassen

Gehen Sie anschließend Breakpoint für Breakpoint vor:

  • Wählen Sie jedes Intervall in der Responsive Bar aus.
  • Verwenden Sie die verfügbaren Optionen, um das Layout zu ändern, nicht benötigte Elemente zu entfernen und die Struktur an den verfügbaren Platz anzupassen.


#tip - Weitere Informationen zum Erstellen und Anpassen eines Templates finden Sie unter Wie erstellt man ein neues Template ausgehend von einem leeren Template?


#tip - Vordefinierte Templates. Alle in WebSite X5 enthaltenen vordefinierten Templates sind bereits responsive. Für jedes Template ist ein Satz von Breakpoints vordefiniert, der aktiv wird, sobald die Option Responsive Website im Fenster Auflösungen und Responsive Design aktiviert wird. Sie können diesen vordefinierten Satz von Breakpoints selbstverständlich an Ihre Anforderungen anpassen.


So passen Sie Header und Footer an

Neben dem Template können auch Header und Footer für jede Ansicht spezifische Anpassungen erfordern.


Um diese zu verwalten, gehen Sie wie folgt vor: 

1. Zugriff auf den Template-Inhalt

  • Gehen Sie zu Schritt 2 - Template.
  • Öffnen Sie den Bereich Template-Inhalt. 
  • Auch in diesem Fenster steht Ihnen, da Sie an einer responsiven Website arbeiten, die Responsive Bar zur Verfügung.

2. Verwenden Sie die Responsive Bar

  • Wählen Sie in der Responsive Bar das Intervall aus, das der Desktop-Ansicht entspricht, und verwenden Sie die verfügbaren Optionen, um den Header/Footer des Templates zu erstellen.
  • Wählen Sie weiterhin in der Responsive Bar nacheinander die anderen Intervalle aus und nehmen Sie die erforderlichen Anpassungen vor. 
  • Für jeden Breakpoint können Sie:
    • neue Objekte hinzufügen;
    • Objekte ausblenden;
    • ausgeblendete Elemente wiederherstellen;
    • Position und Größe ändern;
    • das gesamte Layout anpassen.


Verwaltung von Objekten in den verschiedenen Ansichten

Objekte hinzufügen 

Ein hinzugefügtes Objekt ist:

  • in der aktuellen Ansicht sichtbar;
  • in den darunterliegenden Ansichten sichtbar;
  • in den darüberliegenden Ansichten ausgeblendet.

Objekte ausblenden

  • Wählen Sie ein Objekt aus und klicken Sie auf die Schaltfläche Objekt anzeigen/ausblenden.
  • Sie können wählen, ob Sie:
    • es nur in der aktuellen Ansicht ausblenden;
    • es auch in den darunterliegenden Ansichten ausblenden.

Ausgeblendete Objekte wiederherstellen

  • Klicken Sie auf das kleine Dreieck der Schaltfläche Objekt anzeigen/ausblenden.
  • Klicken Sie im Menü auf den Eintrag Verwaltung ausgeblendeter Objekte.
  • Wählen Sie im geöffneten Fenster das zuvor ausgeblendete Objekt aus und aktivieren Sie die Option Sichtbar.

Objekte neu positionieren

In den verschiedenen Ansichten können Sie Folgendes ändern:

  • Position;
  • Größe.


Alle anderen Eigenschaften der Objekte bleiben in den verschiedenen Ansichten unverändert.


#tip - Weitere Informationen finden Sie unter Wie ändert man die Zusammensetzung von Header und Footer?


#tip - Automatische Neupositionierung. Wenn in einer bestimmten Ansicht ein oder mehrere Objekte so positioniert sind, dass sie nicht mehr vollständig sichtbar sind, werden sie automatisch neu positioniert. Dabei werden die Objekte verschoben, aber nicht in ihrer Größe verändert: Es kann daher vorkommen, dass sich Objekte überlappen. Aus diesem Grund empfiehlt es sich, immer über die Vorschau zu überprüfen, wie sich Header und Footer bei den verschiedenen Breakpoints verhalten.


Praktische Tipps

Hier sind einige nützliche Hinweise, um bessere Ergebnisse zu erzielen:

  • beginnen Sie immer mit dem Desktop-Layout;
  • vereinfachen Sie schrittweise;
  • überprüfen Sie Header und Footer getrennt;
  • blenden Sie nur wirklich überflüssige Elemente aus;
  • überprüfen Sie jede Änderung in der Vorschau;
  • achten Sie auf mögliche Überlagerungen.


Zusammenfassung

Die korrekte Anpassung des Templates einer responsiven Website bedeutet, eine flexible Struktur zu schaffen, die auf jedem Gerät visuelle Qualität, Klarheit und Funktionalität gewährleistet.


Mit WebSite X5 können Sie all dies ohne Eingriffe in den Code verwalten, indem Sie visuelle Werkzeuge nutzen, die die Anpassung des Layouts vereinfachen und die Optimierung der Benutzererfahrung in jeder Ansicht ermöglichen.


Ihre Aufgabe besteht darin, die Struktur strategisch zu organisieren und dort einzugreifen, wo es notwendig ist, um auf jedem Gerät eine effektive und professionelle Benutzererfahrung zu gewährleisten.