Kompatibilität:

WebSite X5 Evo und Pro


In letzter Zeit ist oft einen neuen Scrollen-Effekt der Seiten zu finden, wo jede Zeile immer mindestens die Höhe des Browserfensters übernimmt. Auf diese Weise werden die Zeilen bei der Navigation wie Slides dargestellt, die je aufeinander folgen. Einige Beispiele können sie auf unseren Designvorlagen  CV Power oder Blossom Corner, bei denen wir diesen Effekt angewendet haben.


Möchten Sie entdecken, wie Sie auch diesen Effekt erhalten können?


Sie sollen darum die Funktion Full Heigt im Fenster Zeilenstil anwenden, es ist weit einfacher, als Sie denken. Sie sollen nur die beschriebene Schritte folgen:

 

Einführung

Wie Sie wissen, WebSite X5 stellt die Seiten der Website mit einem Raster dar: Jede Seite hat einige Zeilen und Spalten, und in die resultierenden Zellen kann man Inhalte einfügen (mehr Informationen dazu: So stellen Sie das Raster des Seitenlayouts ein). Standardmäßig: 

  • übernimmt die Seite die gleiche Breite der Vorlage;
  • hängt die Breite der Spalten davon ab, wie viele Spalten auf der Seite eingefügt werden;
  • hängt die Zeilenhöhe vom größten Objekt ab, das in die Zeile zu finden ist.


Mit der Funktion Full Height werden alle Zeilen die gleiche Höhe des Browserfenster übernehmen. So werden die Zeilen beim Scrollen wie eigenständige Slides je aufeinander folgen.

Wenn Sie diese Funktion anwenden ist die Zeilenhöhe nicht mehr fixiert, und ändert sich je nach Umbruchspukt: Wenn es weniger Raum zur Verfügung steht, hängt die Mindesthöhe von den Inhalten ab. Wenn es dagegen viel Raum gibt, werden alle Inhalte sich zentral anordnen.


Zeilen vorbereiten

Sie sollen sich die Seite so vorstellen, als ob sie eine Reihe von Blöcke wäre: Jeder Block muss eigenständig sein, damit die Seite so wie bei einem Slideshow scrollen kann.


Sie sollen daher:

  • Auf Schritt 4 - Erstellen der Seiten gehen und die gewünschte Objekte in die Seite hinzufügen.
  • Mit der Schaltfläche das Fenster Zeilenstil öffnen.
  • Im Bereich Allgemein verbinden Sie die Zeilen, die ein Block darstellen werden. Positionieren Sie den Mauszeiger in der Mitte der imaginären Verbindungslinie zwischen den beiden Punkte der Zeilen und klicken Sie auf dem Vorhängeschloss (mehr Informationen dazu: Horizontale Streifen im Zeilenstil erstellen).


Full Height aktivieren

  • Öffnen Sie das Fenster Zeilenstil > Full Height.
  • Klicken Sie auf Full Height-Anzeige für alle Zeilen dieser Seite aktivieren.
  • Definieren Sie den Effekt, den Sie gern beim Scrollen für den Übergang von einem Block auf den anderen einstellen möchten. Hier haben Sie verschiedene Möglichkeiten:
    • Kein: Der nachfolgende Block wird allmählich angezeigt.
    • Eingang von unten: Der nachfolgende Block überlappt den Vorgehenden, der sich nicht bewegt.
    • Ausgang nach oben: Der aktuelle Block verschwindet, indem er sich nach oben bewegt und den Nachfolgenden zeigt.
  • Wenn Sie die Option Automatisches Scrollen aktivieren, scrollt die Seite automatisch weiter, sobald beim Scrollen der Seite die neue Zeile sichtbar wird, bis die Zeile vollständig angezeigt wird.
  • Sie können die Option Scroll-Down-Schaltflächen anzeigen auswählen, damit Sie im unteren Bereich der Zeile eine Schaltfläche einblenden können, mit der die Seite automatisch gescrollt werden kann, um die nächste Zeile anzuzeigen. Diese Schaltfläche kann entweder immer oder nur beim Mousekontakt angezeigt werden. Den Button-Stil können Sie auch definieren.
  • Schließlich können sie die Option Cursor anzeigen aktivieren, und den entsprechenden Stil und Anordnung einstellen. Dadurch kann der Benutzer den gewünschten Block auswählen.