Kompatibilität:

WebSite X5 Evo und Pro aus Version 13


Heutzutage sind horizontale Streifen häufig auf jeglichen Websites zu finden. Diese Streifen sind oft so breit wie das Browserfenster und werden darum angewendet, die Seiten schöner und für die Besucher attraktiver zu machen. Nutzen Sie sie auch auf Ihren Projekten, um die wichtigsten Inhalte herauszustellen.


Im Artikel werden wir uns mit den folgenden Themen beschäftigen:


Streifen erstellen

Sie sollen im Bereich Zeilenstil, um Streifen zu erstellen. Das Vorgehensweise ist einfach:

  • Gehen Sie auf Schritt 4 - Erstellen der Seiten, fügen Sie Ihre Inhalte hinzu und dann klicken Sie auf der Schaltfläche , um das Fenster Zeilenstil zu öffnen.
  • Wählen die Zeile(n) und definieren Sie dafür einen Hintergrund: eine Farbe, einen Farbverlauf, ein oder mehrere Bilder, ein Video oder eine Karte. Jede Lösung hat ihre eigene spezifische Anpassungsoptionen. 
  • Mit der Option Auf die Breite des Browserfensters erweitern kann Ihr Band  so breit wie das Browserfenster eingestellt werden.


#tip - Zeilengröße.  Steifen können die gleiche Breite der Seite (die von der Breite der Vorlage abhängt) oder des Browserfensters übernehmen. Die Höhe der Streifen wird dagegen von den enthaltenen Objekten definiert. Diese können aber auch die Höhe des Browserfensters übernehmen (mehr Informationen: Die Funktion Full Height für die Erstellung eines vertikalen Bildlaufs anwenden)


  • Schließlich können Sie auch einen Parallaxe-Effekt aktivieren: Klicken Sie auf Effekt und wählen Sie ihn aus der drei verfügbaren Arten (mehr Informationen: So erstellen Sie einen Parallaxe-Effekt).



Im Fenster Zeilenstil:

  • haben die Zeilen, bei denen Sie noch keinen Stil definiert haben,  einen weißen Hintergrund und ein leeres Tüpfelchen;
  • haben die Zeilen, bei denen Sie schon einen Stil definiert haben, einen blauen Hintergrund und ein dunkles Tüpfelchen;
  • können Sie ein Kontextmenü beim Rechtsklick auf einer Zeile öffnen, wo Sie die Befehle für das Kopieren/Einfügen des Zeilenstils finden können.


Verbinden von Zeilen, um sie identisch zu formatieren

Sie können die Formatierung automatisch auch auf mehrere aneinander grenzende Zeilen anwenden, indem Sie diese verbinden:

  • Raster unter Zeilenstil positionieren Sie den Mauszeiger in der Mitte der imaginären Verbindungslinie zwischen den beiden Punkte der Zeilen, es wird ein Vorhängeschloss-Symbol angezeigt.
  • Klicken Sie auf das Vorhängeschloss: die beiden Zeilen werden verbunden und das Symbol ändert sich.
  • Die Zeilen sind nun verbunden, dies wird durch die Linie angezeigt, die die beiden Punkte neben den Zeilen verbindet. Alle Einstellungen für den Stil der ersten Zeile werden auch auf die zweite Zeile angewendet.
  • Dieses Verfahren kann wiederholt werden, um alle gewünschten Zeilen zu verbinden.


Trennen verbundener Zeilen

Ebenso, wie Sie Zeilen verbinden, um sie identisch zu formatieren, können Sie sie auch wieder trennen:

  • Führen Sie den Mauszeiger auf der Linie zwischen den beiden Punkten neben den betreffenden Zeilen über das Vorhängeschloss.
  • Klicken Sie auf das Vorhängeschloss, die beiden Zeilen werden getrennt.


Wurden zum Beispiel die Zeilen 1 und 2 verbunden und auf beide eine bestimmte Formatierung angewendet, kehrt die Formatierung von Zeile 2 nach dem Trennen wieder in ihre ursprüngliche Form zurück.

Wurden mehr als zwei Zeilen verbunden, erfolgt die Trennung an dem Punkt, an dem auf das Vorhängeschloss-Symbol geklickt wird. Wurden zum Beispiel die Zeilen 1, 2, 3 und 4 verbunden und Sie klicken auf das Vorhängeschloss zwischen Zeile 2 und Zeile 3, bleibt Zeile 1 mit Zeile 2 und Zeile 3 mit Zeile 4 verbunden.


Wann kann man verbundene Zeilen nicht trennen

Je nachdem, wie die Objekte im Raster positioniert bzw. bei responsiven Websites für die verschiedenen Ansichten angeordnet werden, können Situationen eintreten, in denen mehrere Zeilen automatisch verbunden werden und nicht getrennt werden können.

Fall 1. Layout
Wird ein Objekt in das Raster eingefügt, das mehrere Zellen verschiedener Zeilen belegt, werden alle betroffenen Zeilen automatisch verbunden. Das Vorhängeschloss auf der Verbindungslinie zwischen den Punkten wird grau (anstatt blau) dargestellt, was anzeigt, dass es nicht entsperrt werden kann. In diesem Fall muss zwingend das Layout der Objekte verändert werden, um die Verbindung zu lösen.


Im Beispiel belegt das Objekt in der ersten Spalte die Zeilen 1, 2 und 3: Diese werden automatisch verbunden und können nicht getrennt werden.

Fall 2. Responsive Website
Wenn Sie eine responsive Website gestalten und die Objekte für die verschiedenen Ansichten gemäß den Umbruchpunkten anordnen, können Kombinationen auftraten, die zur automatischen Verbindung mehrerer Zeilen führen. Im Allgemeinen tritt dieser Fall ein, wie im nachstehenden Beispiel, wenn bei der Anordnung einem Objekt nicht das rechts angrenzende (das sich auf der gleichen Zeile befindet) folgt, sondern das Objekt direkt darunter (in einer anderen Zeile). Auf diese Weise werden Gruppen generiert, deren Objekte sich auf mehreren Zeilen befinden.


Bei der Definition der Ansicht für einen Umbruchpunkt kann die Anordnung Gruppen generieren, deren Objekte auf verschiedenen Zeilen positioniert sind.


Ergebnis: Durch die festgelegte Anordnung wurden die Zeilen 1 und 2 verbunden und sind identisch formatiert.