Kompatibilität:
WebSite X5 Evo und Pro
Möchten Sie eine Seite erstellen, die aus großen Blöcken besteht, welche die gesamte Höhe des Browserfensters einnehmen und beim Scrollen wie die Folien einer Präsentation aufeinanderfolgen?
Mit der Funktion Full Height können Sie dafür sorgen, dass die Abschnitte der Seite mindestens so hoch wie der Viewport sind und bei Bedarf ein automatisches Scrollen sowie Steuerelemente hinzufügen, mit denen Besucher von einem Abschnitt zum nächsten wechseln können.
Wenn Sie mit dem Stil der Zeilen und der Eigenschaft Full Height arbeiten, ist dies einfacher, als Sie vielleicht denken. Hier erfahren Sie, was Sie wissen müssen und wie Sie vorgehen.
So funktioniert Full Height
In WebSite X5 hängt die Höhe eines Abschnitts normalerweise von den enthaltenen Objekten ab. Mit Full Height nimmt dagegen jeder Abschnitt, der als Folie verwendet wird, mindestens die gesamte Höhe des Browserfensters ein.
Auf diese Weise wechseln Besucher beim Scrollen von einem Inhaltsblock zum nächsten, als würden sie durch eine Reihe von Folien blättern.
Full Height legt jedoch keine starre Höhe fest. Wenn der Viewport klein ist, bestimmen die in der Zeile enthaltenen Inhalte deren Mindesthöhe. Ist der Viewport dagegen sehr groß, werden die Inhalte zentriert angezeigt.
So bereiten Sie die Abschnitte der Seite vor
Bevor Sie Full Height aktivieren, organisieren Sie die Seite als Abfolge eigenständiger Blöcke: Jeder davon wird zu einer der Folien, die beim Scrollen angezeigt werden.
Gehen Sie wie folgt vor:
- Gehen Sie zu Schritt 4 - Seiten und öffnen Sie die Seite, an der Sie arbeiten möchten.
- Fügen Sie alle erforderlichen Objekte in das Layout-Raster ein.
- Organisieren Sie die Zeilen, die einen einzigen Block bilden sollen, im selben Abschnitt.
- Erstellen Sie jedes Mal einen neuen Abschnitt, wenn die nächste Folie beginnen soll.
- Wiederholen Sie den Vorgang, bis Sie die Seite in die gewünschten Blöcke unterteilt haben.
Ein Abschnitt kann daher aus einer einzigen Zeile oder aus mehreren Zeilen bestehen: Entscheidend ist, dass alle Inhalte, die als eine einzige Folie angezeigt werden sollen, zum selben Abschnitt gehören.
#tip - Weitere Informationen zum Erstellen und Organisieren von Abschnitten im Raster finden Sie unter Seitenabschnitte. Wie erstellt man Layouts mit unterschiedlichen Strukturen?
So aktivieren Sie Full Height
Nachdem Sie die Abschnitte vorbereitet haben:
- Klicken Sie auf die Schaltfläche
Abschnittsstil. - Öffnen Sie den Bereich Full Height.
- Aktivieren Sie die Option Full-Height-Anzeige für alle Abschnitte dieser Seite aktivieren.
Ab diesem Zeitpunkt werden die Abschnitte der Seite als Blöcke verwaltet, die mindestens die Höhe des Browserfensters einnehmen.
So aktivieren Sie das automatische Scrollen
Wenn Sie den Übergang von einer Folie zur nächsten deutlicher hervorheben möchten, können Sie im Bereich Full Height die Option Automatisches Scrollen aktivieren.
Sobald beim Scrollen ein neuer Abschnitt sichtbar wird, scrollt WebSite X5 die Seite automatisch weiter, bis dieser vollständig im Vordergrund angezeigt wird.
Dadurch ähnelt der Wechsel zwischen den verschiedenen Bereichen der Seite stärker dem Durchblättern einer Präsentation.
So fügen Sie Schaltflächen zum Wechseln zum nächsten Abschnitt hinzu
Sie können die Navigation zusätzlich erleichtern, indem Sie am unteren Rand jeder Folie eine Schaltfläche hinzufügen.
Gehen Sie dazu wie folgt vor:
- Aktivieren Sie im Bereich Full Height die Option Schaltflächen zum Scrollen nach unten anzeigen;
- legen Sie den Stil der Schaltflächen fest, indem Sie das gewünschte Bild auswählen;
- wählen Sie, ob die Schaltflächen immer sichtbar sein oder nur beim Darüberfahren mit der Maus erscheinen sollen.
Durch Klicken auf die Schaltfläche wechseln Besucher automatisch zum nächsten Abschnitt.
So zeigen Sie die Position auf der Seite an
Aktivieren Sie im Bereich Full Height die Option Positionsanzeige anzeigen und verwenden Sie die verfügbaren Einstellungen, um:
- den Stil der Anzeige auszuwählen;
- ihre Ausrichtung auf der Seite festzulegen.
Besucher können direkt auf die Anzeige klicken, um den gewünschten Abschnitt in den Vordergrund zu bringen.
Was passiert, wenn ein Abschnitt viele Inhalte enthält?
Full Height funktioniert am besten, wenn jede Folie eine Inhaltsmenge enthält, die zum verfügbaren Platz im Browserfenster passt.
Das bedeutet jedoch nicht, dass Inhalte abgeschnitten oder komprimiert werden, um in die Höhe des Viewports zu passen.
Wenn Texte, Bilder oder andere Objekte mehr Platz benötigen, wird der Abschnitt so weit vergrößert, wie es für die Inhalte erforderlich ist. Full Height legt also eine Mindesthöhe und keine maximale Höhe fest.
Praktische Tipps
Für einen wirkungsvollen folienartigen Seiten-Scroll:
- betrachten Sie jeden Abschnitt als eigenständigen Inhaltsblock;
- vermeiden Sie zu viele Inhalte auf einer einzelnen Folie;
- prüfen Sie das Ergebnis mit Browserfenstern unterschiedlicher Höhe;
- verwenden Sie das automatische Scrollen, wenn Sie den Übergang von einem Abschnitt zum nächsten stärker hervorheben möchten;
- fügen Sie insbesondere bei Seiten mit vielen Folien Schaltflächen oder eine Positionsanzeige hinzu;
- kontrollieren Sie das Ergebnis immer in der Vorschau.
#tip - Wenn Sie einen Effekt erzielen möchten, der noch stärker einer Vollbildpräsentation ähnelt, können Sie Header und Footer für die Seite ausblenden. Dadurch können Full-Height-Abschnitte einen größeren Teil des verfügbaren Platzes im Browserfenster einnehmen.