Kompatibilität:

WebSite X5 Evo und Pro aus Version 13

Möchten Sie einen Bereich der Seite hervorheben, unterschiedliche Inhalte visuell voneinander trennen oder einen großen grafischen Bereich erstellen, der die Besucher beim Scrollen begleitet?


Nachdem Sie die Seite in Abschnitte gegliedert haben, können Sie deren Erscheinungsbild mit WebSite X5 einfach anpassen: Sie können einen Hintergrund anwenden, ein Overlay hinzufügen, den Abstand oberhalb und unterhalb der Inhalte vergrößern, einen Rahmen definieren oder eine geformte Trennung zwischen zwei Abschnitten erstellen.


Sie können auch mehrere benachbarte Abschnitte grafisch miteinander verbinden: Sie behalten ihre unabhängigen Zeilen- und Spaltenstrukturen, erscheinen den Besuchern jedoch als ein einziger durchgehender Bereich.


#tip - Abschnitte werden direkt im Layout-Raster definiert. Wenn Sie noch nicht wissen, wie Sie sie erstellen und verwalten, lesen Sie Seitenabschnitte. Wie erstellt man Layouts mit unterschiedlichen Strukturen?


So legen Sie den Stil eines Abschnitts fest

So erstellen Sie einen Bereich und gestalten einen Abschnitt grafisch:

  • Gehen Sie zu Schritt 4 - Seiten und öffnen Sie die Seite, an der Sie arbeiten möchten.
  • Nachdem Sie die Inhalte organisiert und die erforderlichen Abschnitte definiert haben, klicken Sie in der Symbolleiste auf die Schaltfläche Abschnittsstil.
  • Wählen Sie im Raster des Fensters Abschnittsstil den Abschnitt aus, den Sie anpassen möchten.
  • Legen Sie fest, ob Sie als HintergrundFolgendes verwenden möchten:
    • eine Farbe;
    • einen Farbverlauf;
    • ein Bild;
    • eine Bilderliste;
    • eine Animation;
    • ein Video;
    • eine Karte.
  • Verwenden Sie die für den ausgewählten Hintergrundtyp verfügbaren Optionen, um die erforderlichen Dateien zu importieren und ihr Erscheinungsbild festzulegen.
#tip - Barrierefreiheit. Um die Seiten Ihrer Website barrierefrei zu gestalten, sollten Sie für verwendete Bilder und Videos einen Alternativtext vorsehen. Sie können ein Element als „dekorativ“ kennzeichnen oder einen ALT-Text eingeben, indem Sie auf die Schaltfläche  klicken, die im Feld zum Importieren der Datei verfügbar ist. Weitere Informationen finden Sie unter Barrierefreiheit von Bildern: die Bedeutung von Alternativtexten.

  • Wenn Sie den Bereich noch weiter gestalten möchten, können Sie dem Abschnitt einen Rahmen zuweisen und Folgendes festlegen:

    • die Farbe;
    • die Stärke;
    • die Abschrägung;
    • den Schatten.
#tip - Wenn Sie einen Schatten anwenden, prüfen Sie, ob um den Abschnitt genügend Platz vorhanden ist, damit der Effekt vollständig sichtbar ist. Erhöhen Sie bei Bedarf den oberen und unteren Rand.



Im Fenster Abschnittsstil können Sie die Abschnitte, auf die bereits ein Stil angewendet wurde, leicht erkennen:

  • Abschnitte, deren Erscheinungsbild noch nicht definiert wurde, sind mit einem leeren Punkt gekennzeichnet;
  • Abschnitte, deren Erscheinungsbild bereits definiert wurde, sind mit einem ausgefüllten Punkt gekennzeichnet.


So erstellen Sie eine geformte Trennung zwischen zwei Abschnitten

Wenn Sie den Übergang zwischen einem Abschnitt und dem nächsten origineller gestalten möchten, können Sie die normale gerade Trennlinie durch eine Form ersetzen.


Die Form wird am unteren Rand des ausgewählten Abschnitts angewendet und erzeugt einen grafischen Übergang zum folgenden Abschnitt. Sie können sie unabhängig vom Hintergrundtyp verwenden, der auf den Abschnitt angewendet wurde, zum Beispiel eine Farbe, einen Farbverlauf oder ein Bild.


Gehen Sie dazu wie folgt vor:

  • Wählen Sie den Abschnitt im Fenster Abschnittsstil aus.
  • Klicken Sie auf den Befehl  Form.
  • Wählen Sie im Fenster Abschnittsform eine der verfügbaren Formen aus.
  • Legen Sie die Höhe fest, um zu bestimmen, wie ausgeprägt die Form sein soll.
  • Wenn Sie die Form horizontal spiegeln möchten, aktivieren Sie Horizontal spiegeln.
  • Bestätigen Sie mit OK.


Um wieder eine gerade Trennung zwischen den Abschnitten herzustellen, wählen Sie Keine.


Die Form verändert nur das grafische Erscheinungsbild des Übergangs zwischen den beiden Abschnitten: Sie erstellt keine neuen Abschnitte und ändert die Struktur der Seite nicht.


So wenden Sie denselben Stil auf mehrere Abschnitte an

Zwei oder mehr benachbarte Abschnitte können unterschiedliche Spaltenstrukturen haben, grafisch jedoch Teil desselben Bereichs sein.


So wenden Sie auf sie denselben Stil an:

  • Suchen Sie im Raster des Fensters Abschnittsstil die Abschnitte, die Sie verbinden möchten.
  • Bewegen Sie den Mauszeiger über die Linie, die sie trennt.
  • Klicken Sie auf das angezeigte Schloss, um sie zu verbinden.
  • Wiederholen Sie den Vorgang, wenn Sie weitere benachbarte Abschnitte verbinden möchten.


Zwei oder mehr miteinander verbundene Abschnitte bleiben im Layout-Raster unabhängig und können daher weiterhin eine unterschiedliche Anzahl und Breite von Spalten haben, teilen jedoch dasselbe grafische Erscheinungsbild.


So können Sie zum Beispiel einen durchgehenden Bereich erstellen, der aus einem Abschnitt mit 2 Spalten und einem darauffolgenden Abschnitt mit 3 Spalten besteht.


So vergrößern Sie den Abstand oberhalb und unterhalb eines Abschnitts

Wenn Sie einen Abschnitt stärker vom vorherigen oder folgenden Abschnitt absetzen möchten, müssen Sie kein Trennobjekt hinzufügen oder die Ränder der einzelnen Objekte anpassen.


Sie können direkt die Ränder des Abschnitts verwenden:

  • Wählen Sie den Abschnitt im Fenster Abschnittsstil aus.
  • Klicken Sie auf den Befehl Ränder.
  • Legen Sie im Fenster AbschnittsränderFolgendes fest:
    • Oben, um den Abstand oberhalb des Abschnitts festzulegen;
    • Unten, um den Abstand unterhalb des Abschnitts festzulegen.
  • Bestätigen Sie mit OK.


Wenn Sie zwei oder mehr Abschnitte grafisch miteinander verbunden haben, erscheint im Fenster zusätzlich der Wert Zwischenabschnitte. Damit können Sie den Abstand zwischen den Abschnitten festlegen, die zur selben Gruppe gehören.


Standardmäßig ist dieser Wert auf 0 gesetzt, sodass die verbundenen Abschnitte optisch einen einzigen durchgehenden Block bilden. Wenn Sie einen größeren Abstand zwischen den Abschnitten der Gruppe beibehalten möchten, können Sie den Wert erhöhen.


Die Ränder vergrößern den Abstand vor und nach dem Abschnitt und helfen dabei, unterschiedliche Inhaltsblöcke visuell voneinander abzugrenzen.


Auf diese Weise bleibt der Abstand dem Abschnitt und nicht einem einzelnen Objekt zugeordnet: Wenn Sie die Inhalte später ändern oder neu organisieren, müssen Sie die Ränder nicht erneut festlegen.


So kopieren Sie den Stil eines Abschnitts

Wenn Sie einen Stil eingerichtet haben, den Sie erneut verwenden möchten, müssen Sie ihn nicht von Grund auf neu erstellen. Sie können ihn ausschneiden, kopieren und in einen anderen Abschnitt derselben Seite oder einer anderen Seite einfügen.


Dazu können Sie:

  • den Abschnitt auswählen und die Schaltflächen Ausschneiden, Kopieren und Einfügen in der Symbolleiste verwenden;
  • oder mit der rechten Maustaste auf den Abschnitt klicken und die Befehle Ausschneiden, Kopieren und Einfügen im Kontextmenü verwenden.


In diesem Fall wird nur der grafische Stil des Abschnitts kopiert, nicht die Objekte oder die darin enthaltene Zeilen- und Spaltenstruktur.


#tip - Wenn Sie auch die Struktur und die Inhalte eines Abschnitts kopieren möchten, müssen Sie die Befehle zum Kopieren und Einfügen des gesamten Abschnitts direkt im Layout-Raster verwenden. Siehe Seitenabschnitte. Wie erstellt man Layouts mit unterschiedlichen Strukturen?


So erstellen Sie Bereiche mit erweiterten Effekten

Unabhängig vom gewählten Hintergrundtyp können Sie auf den Abschnitt auch einen Overlay-Effekt anwenden, also einen farbigen Filter, der über dem Hintergrund liegt:

  • Wählen Sie den Abschnitt im Fenster Abschnittsstil aus.
  • Klicken Sie in der Symbolleiste auf die Schaltfläche Overlay.
  • Legen Sie über die Einstellungen im geöffneten Fenster die Farben und die Deckkraft fest und aktivieren Sie bei Bedarf einen wiederholten Übergang zwischen den ausgewählten Farben.
  • Bestätigen Sie die Einstellungen.


Das Overlay ist nicht der einzige grafische Effekt, mit dem Sie die Bereiche Ihrer Seiten attraktiver gestalten können.


Sie können außerdem:


Zusammenfassung

Mit Abschnittsstil können Sie die strukturellen Bereiche der Seite in echte grafische Bereiche verwandeln. Sie können den Hintergrund definieren, ein Overlay verwenden, Ränder und Rahmen hinzufügen, mit Formen geformte Trennungen erstellen, mehrere Abschnitte zu einem einzigen visuellen Block verbinden oder einen bereits eingerichteten Stil kopieren und an anderer Stelle wiederverwenden.


Die Struktur der Abschnitte bleibt dabei unabhängig von ihrem Erscheinungsbild: Auch Abschnitte mit einer unterschiedlichen Anzahl von Spalten können daher denselben grafischen Stil verwenden.