Kompatibilität:

WebSite X5 Evo und Pro

Wie Sie wissen, müssen Sie in WebSite X5 mit einem Raster mit Zeilen und Spalten arbeiten, um die Inhalte der Seiten hinzuzufügen und um das Layout zu erstellen. Sie können dann einige grafischen Einstellungen für die Zellen und für die Zeilen definieren, um schönere und wirksamere Seiten zu bilden. 


Wenn Sie am Stil der Zeilen arbeiten, können Sie horizontale Streifen erstellen, die die wichtigen Inhalte beim Scrollen der Seite hervorheben. 


Im Artikel werden wir über die folgenden Themen sprechen:


Nachdem Sie diese grundlegenden Aspekte gelernt haben, werden Sie am Zeilenstil arbeiten, um:


Die Struktur des Bereichs Zeilenstil

Sie können am Zeilenstil auf Schritt 4 arbeiten, nachdem Sie die Inhalte hinzugefügt haben. Sie sollen nur auf Zeilenstil  klicken auf der obigen Werkzeugleiste.


Der Bereich Zeilenstil ist in zwei Unterbereiche getrennt:

  • Allgemein: Hier finden Sie den Raster des Seitenlayouts und die Inhalte. Oben finden Sie eine Werkzeugleiste mit der Optionen für den Stil der ausgewählten Zeile. 
  • Full Height:  Hier finde Sie die Optionen, um das Scrollen der Seite als ein Bildlauf einzurichten.

   

So stellen Sie den Stil der Zeilen ein

Um den Stil der Zeile definieren bzw. einen Streifen auf der Seite erstellen zu können, sollen Sie so vorgehen:

  • Gehen Sie auf Zeilenstil>Allgemein und wählen Sie die Zeile aus.
  • Definieren Sie den Hintergrund: Eine Farbe, einen Farbverlauf, ein Bild, eine Liste von Bilder, eine Animation, ein Video oder eine Mappe. 
  • Wenden Sie die entsprechenden Optionen für jeden Stil an, um die Zeile wunschgemäß einzurichten. 


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;


#Tipp - Erfahren Sie mehr über die Anpassung des Zeilenstils mit dem folgenden Artikel: Horizontale Streifen mit einer Hintergrundfarbe oder einem Hintergrundbild im Zeilenstil erstellen


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.