Stapeln Sie zwei Abschnitte in unterschiedlichen Farben übereinander, und Sie erhalten eine klare Grenze: eine perfekt gerade horizontale Linie. Das sieht ordentlich aus, aber genau das machen auch alle anderen Websites. Um Ihren Seiten etwas Relief und Persönlichkeit zu verleihen, bietet WebAcappella Fusion die Formtrenner an – die berühmten Shape Dividers, die man auf modernen Websites sieht: eine Welle, eine Kurve oder ein Dreieck, das den Übergang von einem Abschnitt zum nächsten abmildert.
Die gute Nachricht: Sie müssen weder programmieren noch zeichnen. Alles lässt sich im Inspektor Ihres Abschnitts mit wenigen Klicks einrichten. In diesem Tutorial erfahren Sie, wo Sie diese Funktion finden, wie Sie Ihren ersten Trennbalken hinzufügen und vor allem den Farbtrick, der den entscheidenden Unterschied ausmacht.
Was ist ein Form-Trennzeichen?
Ein Formtrennzeichen ist ein dekorativer Ausschnitt, der am oberen oder unteren Rand eines Abschnitts platziert wird. Anstelle eines geradlinigen Übergangs zwischen Ihrem blauen Banner und dem darauf folgenden weißen Abschnitt erhalten Sie beispielsweise eine Welle: Die Farbe eines Abschnitts scheint in einer sanften Form auf den anderen „überzulaufen“.
Jeder Abschnitt verfügt über zwei unabhängige Trennlinien: eine oben und eine unten. Sie können nur eine davon aktivieren, beide aktivieren und ihnen unterschiedliche Formen oder Farben zuweisen. Auf diese Weise lassen sich abwechslungsreiche Übergänge über die gesamte Seite hinweg gestalten.
Wo Sie ihn in WebAcappella Fusion finden
Der Form-Trennbalken ist eine Einstellung des Abschnitts (der „Box“, die Ihre Inhaltsblöcke enthält). So greifen Sie darauf zu:
- Wählen Sie den Abschnitt aus, dessen Rand Sie gestalten möchten (klicken Sie auf einen leeren Bereich des Abschnitts, nicht auf ein Element darin).
- Öffnen Sie den Abschnittsinspektor an der Seite.
- Klicken Sie auf die Registerkarte Formtrennlinie (das wellenförmige Symbol).
- Dort finden Sie zwei Einstellungsgruppen: Oberer Trennbalken und Unterer Trennbalken.
Der Trennbalken wird auf den Abschnitt angewendet, nicht auf ein darin enthaltenes Element. Wenn Sie die Registerkarte nicht sehen, vergewissern Sie sich, dass Sie den Abschnitt selbst ausgewählt haben und nicht einen Text, ein Bild oder eine Schaltfläche, die er enthält.
Fügen Sie Schritt für Schritt Ihren ersten Trenner hinzu
Nehmen wir den häufigsten Fall: Sie möchten eine Welle zwischen einem farbigen Abschnitt und dem direkt darunter liegenden weißen Abschnitt einfügen.
- Wählen Sie den oberen Abschnitt aus und öffnen Sie die Registerkarte Formtrennlinie.
- Aktivieren Sie unter Unterer Trennstrich die Option Aktiviert.
- Wählen Sie eine Form aus der Liste aus (beginnen Sie mit „Welle“ oder „Sanfte Welle“).
- Stellen Sie die Farbe des Trennzeichens auf die Hintergrundfarbe des nächsten Abschnitts ein – das ist der entscheidende Trick, darauf kommen wir gleich noch zurück.
- Passen Sie die Höhe an, um die Welle mehr oder weniger ausgeprägt zu gestalten.
Und schon ist es geschafft: Der weiße Abschnitt darunter scheint sich wellenförmig in den farbigen Abschnitt hinaufzuschlängeln. Ganz ohne Bilder, ohne Export und ohne Code.
Der Trick, der alles verändert: die Farbe
Das ist der häufigste Anfängerfehler, also sollten wir ihn gleich beheben. Um den Effekt „zwei ineinander verschachtelte Abschnitte“ zu erzielen, muss die Farbe des Trennstrichs mit dem Hintergrund des benachbarten Abschnitts übereinstimmen, nicht mit dem des Abschnitts, auf dem er sich befindet.
Welle unten eines Abschnitts: Weisen Sie ihr die Hintergrundfarbe des darunter liegenden Abschnitts zu. Welle oben eines Abschnitts: Weisen Sie ihr die Hintergrundfarbe des darüber liegenden Abschnitts zu. Der Trennbalken fungiert als „Überlauf“ des benachbarten Abschnitts – daher die Illusion eines Ausschnitts.
Wenn Ihre Abschnitte die dynamischen Farben des Themes verwenden, denken Sie daran, denselben Farbton zu übernehmen: So bleibt der Trennbalken auch dann mit dem Rest im Einklang, wenn Sie die Farbpalette Ihrer Website ändern.
Die verfügbaren Formen
WebAcappella Fusion bietet elf Formen, von schlicht bis auffällig. Wählen Sie je nach Stil Ihrer Website:
- Wellen: Welle und Sanfte Welle – die Allround-Option, ideal für ein fließendes und organisches Erscheinungsbild.
- Kurven: Kurve und Asymmetrische Kurve – ein abgerundeter, eleganter und dezenter Übergang.
- Ecken: Dreieck, Asymmetrisches Dreieck, Neigung und Zickzack – für einen grafischeren, dynamischeren oder „technischeren“ Stil.
- Dekorativ: Berge, Tropfen und Wolken – eher thematische Formen, die sparsam eingesetzt werden sollten.
Noch einen Schritt weiter: die erweiterten Einstellungen
Sobald Form und Farbe festgelegt sind, stehen Ihnen mehrere Optionen zur Verfügung, um das Ergebnis zu verfeinern:
- Höhe: die vertikale Ausdehnung der Form. Je höher sie ist, desto ausgeprägter ist der Effekt.
- Breite (%) und horizontale Position: Vergrößern Sie das Motiv über 100 % hinaus, um nur einen Teil der Form anzuzeigen, und wählen Sie dann aus, welcher Teil sichtbar sein soll (links, Mitte, rechts).
- Ebenen: Legen Sie bis zu drei Exemplare der Form mit abnehmender Deckkraft übereinander, um einen schönen Tiefeneffekt zu erzielen.
- Horizontale/vertikale Spiegelung: Spiegeln Sie die Form, um von Abschnitt zu Abschnitt Abwechslung zu schaffen.
- Überlagerung des Inhalts: Ist diese Option aktiviert, wird der Trenner über den Inhalt gelegt, ohne die Höhe des Abschnitts zu vergrößern; ist sie deaktiviert, vergrößert sich der Abschnitt, um Platz für den Trenner zu schaffen.
Auf Mobilgeräten kann ein zu hoher Trenner viel vertikalen Platz beanspruchen. Mit der Einstellung Responsive-Anzeige können Sie ihn auf kleinen Bildschirmen ausblenden: Ein auf großen Bildschirmen spektakulärer Trenner kann auf dem Computer sichtbar bleiben und auf dem Smartphone verschwinden, wo jedes Pixel zählt.
Drei Tipps, um es nicht zu übertreiben
- Bleiben Sie konsistent: Ein oder zwei Formfamilien auf der gesamten Website reichen aus. Ein Wechsel zwischen Wellen, Zickzacklinien und Wolken auf derselben Seite verwässert die Botschaft.
- Schlichtheit zahlt sich aus: Ein Trennelement soll das Lesen unterstützen, nicht davon ablenken. Im Zweifelsfall verringern Sie die Höhe.
- Prüfen Sie immer auf dem Handy: Sehen Sie sich Ihre Seiten vor der Veröffentlichung in Handygröße in der Vorschau an und blenden Sie sperrige Trennelemente bei Bedarf aus.
Zusammenfassung
- Form-Trennlinien lassen sich im entsprechenden Reiter des Inspektors für den Abschnitt oben und/oder unten anpassen.
- Die Farbe des Trennzeichens sollte dem Hintergrund des benachbarten Abschnitts entsprechen, um den Ausschnitt-Effekt zu erzeugen.
- Es stehen elf Formen zur Verfügung, von der dezenten Welle bis zum grafischen Zickzack, sowie Einstellungen für Höhe, Breite, Ebenen und Umkehrung.
- Denken Sie an die Darstellung auf Mobilgeräten: Ein Trennzeichen kann auf kleinen Bildschirmen ausgeblendet werden.
- Alles erfolgt visuell, ganz ohne Programmiercode.
Form-Trennlinien sind eines dieser kleinen Details, die eine Website ohne zusätzlichen Aufwand „professionell“ wirken lassen. Eine gut platzierte Welle, die richtige Farbe – und schon gewinnen Ihre Seiten sofort an Stil.
Wellen, Kurven, Dreiecke oder Wolken: Gestalten Sie die Übergänge Ihrer Abschnitte mit WebAcappella Fusion mit wenigen Klicks, ohne auch nur eine einzige Zeile Code zu schreiben.
Entdecken Sie WebAcappella Fusion