Kompatibilität:

WebSite X5 Evo und Pro

Die Grafik einer Webseite besteht nicht nur aus Bildern und Texten: Auch kleinste Details tragen dazu bei, ein einzigartiges visuelles Erlebnis zu schaffen. Mit dem optionalen Animated Shape Separator-Objekt können Sie animierte Separatoren einfügen, die die Inhalte strukturieren und gleichzeitig Bewegung und Persönlichkeit ins Design bringen.


Wählen Sie eine der voreingestellten Formen, passen Sie Farben und Animationen an oder laden Sie Ihre eigene SVG-Datei hoch, um maßgeschneiderte und animierte Separatoren zu erstellen. Dank des dynamischen Effekts der bewegten Formen gewinnen Ihre Seiten an Flüssigkeit und Energie und verwandeln einfache Trennlinien zwischen Abschnitten in echte Designelemente. Auf der Vorschauseite können Sie einige konkrete Beispiele für kreative Anwendungen sehen.



Wie es funktioniert

Vereinfacht gesagt, werden die Elemente einer Webseite normalerweise als Rechtecke „gezeichnet“. Dies führt dazu, dass die Abschnitte einer Seite in den meisten Fällen durch klar definierte horizontale Linien voneinander getrennt sind.


Um komplexere Separatoren zu erstellen (wie zum Beispiel Wellen), müssen SVG-Masken verwendet werden.


#Tipp - SVG (Scalable Vector Graphic) ist ein Vektorformat, das besonders häufig für Illustrationen, Symbole, Logos und grafische Elemente verwendet wird, da es eine geringe Dateigröße aufweist, mit CSS bearbeitet werden kann, ohne Qualitätsverlust skaliert werden kann und die Anwendung von Animationen unterstützt.


Mit einer SVG-Maske können wir dem Separator praktisch jede gewünschte Form geben. Anschließend müssen wir den Separator direkt am Anfang oder Ende des entsprechenden Abschnitts „andocken“ und dabei die Farben des vorherigen und des nächsten Abschnitts übernehmen.


Es ist ganz einfach. Schauen wir uns gemeinsam an, wie es funktioniert.


Wie man einen animierten Separator erstellt

Um zu verstehen, wie man das Animated Shape Separator-Objekt optimal nutzt, schauen wir uns die Schritte an, um das im folgenden Bild dargestellte Ergebnis zu erzielen: 


   

  • Im Schritt 4 - Seitenerstellung fügen Sie in Zeile 1 ein Text-Objekt und ein Bild-Objekt nebeneinander ein. In Zeile 2 fügen Sie das Animated Shape Separator-Objekt ein. 
  • Zuerst müssen Sie festlegen, welche Form Ihr Separator haben soll, indem Sie sie aus der Liste Typ auswählen: Im Beispiel haben wir 'Form 1' verwendet, die eine Welle darstellt.
  • Sie können auch entscheiden, wie viele Formen angezeigt werden sollen: Wenn Sie 4 auswählen, das Maximum, erhalten Sie einen volleren animierten Separator; mit nur einer Form erzielen Sie hingegen eine linearere und kompaktere Animation.
  • Anschließend stellen Sie die Höhe des Separators in Pixeln ein.
  • Je nachdem, wie die Inhalte Ihrer Seite angeordnet sind und welchen grafischen Effekt Sie erzielen möchten, können Sie die Form des Separators auch horizontal und/oder vertikal spiegeln. Um die Wellen wie im Beispiel direkt unter dem Text und dem Bild anzuordnen, müssen Sie eine vertikale Spiegelung anwenden.
  • Jetzt kümmern Sie sich um die Farben. Damit es keinen sichtbaren Übergang zwischen den Inhalten und dem Separator gibt, stellen Sie als Farbe dasselbe Gelb ein, das Sie für den Hintergrund der Objekte in Zeile 1 verwendet haben. Als Hintergrundfarbe sollten Sie Weiß lassen.
  • Wenn Sie einen dreidimensionalen Effekt hinzufügen möchten, können Sie einen Schatten für den Separator aktivieren und dessen Farbe, Stärke und Streufaktor einstellen.
  • Zum Schluss müssen Sie noch die Animationsgeschwindigkeit festlegen.
  • Sie haben Ihren Separator fertig konfiguriert, aber um sicherzustellen, dass es keine leeren Abstände zwischen den Zeilen 1 und 2 Ihrer Seite gibt und der Separator nahtlos mit dem vorherigen Abschnitt verbunden ist, müssen Sie noch die Ränder überprüfen. Klicken Sie auf OK, um das Einstellungsfenster des Animated Shape Separator-Objekts zu schließen und zur Layout-Gitteransicht von Schritt 4 zurückzukehren. 
  • Wählen Sie nacheinander die Objekte in den Zeilen 1 und 2 aus und klicken Sie auf die Schaltfläche Ränder . Verwenden Sie die verfügbaren Optionen, um die Externen Ränder auf null zu setzen. Auf diese Weise gibt es keine Unterbrechungen zwischen dem vorherigen Abschnitt und dem Separator, sodass sie wie ein einziges Element mit einer wellenförmigen unteren Kante erscheinen.


Natürlich ist dies nur eines der Ergebnisse, die Sie mit dem Animated Shape Separator-Objekt erzielen können: Jetzt, da Sie das zugrunde liegende Prinzip verstanden haben, können Sie problemlos alternative Lösungen ausprobieren, bis Sie diejenige finden, die am besten zum Design Ihrer Seiten passt.

  

Wie man eine individuelle Form erstellt 

Wie bereits erwähnt, können Sie neben der Auswahl zahlreicher vordefinierter Formen mit dem Shape Separator-Objekt auch eine eigene SVG-Maske verwenden. Sehen wir uns gemeinsam die Schritte an, die in diesem Fall zu befolgen sind:

  • Zunächst müssen Sie ein Vektorgrafikprogramm öffnen. Jede Plattform, die das Erstellen von Pfaden ermöglicht, kann verwendet werden, um eine SVG-Datei zu exportieren: Softonic Inkscape, Adobe Illustrator, Affinity Designer oder auch die bekannten Tools wie Adobe XD, Figma, Sketch usw. Alternativ finden Sie online viele spezialisierte Tools zur Erstellung von Separatoren, eines davon ist ShapeDivider. ShapeDivider ist kostenlos und bietet neben der Erstellung des Separators als SVG auch den dazugehörigen HTML-Code an. 
  • Wählen Sie ein Programm aus und zeichnen Sie die Form, die Sie für Ihren Separator verwenden möchten.
  • Ausgehend von dem gezeichneten Polygon müssen Sie einen Pfad erstellen. Wenn Sie beispielsweise Inkscape verwenden, können Sie dies tun, indem Sie das Objekt auswählen und den Befehl Pfad > Objekt in Pfad umwandeln verwenden. Sie können den SVG-Code direkt in dem Fenster anzeigen, das Sie über den Befehl Bearbeiten > XML-Editor aufrufen.
  • Falls Ihre Grafiksoftware diese Art der Anzeige nicht unterstützt, können Sie die SVG-Datei einfach speichern und anschließend mit einem Texteditor wie Notepad öffnen, um die Daten anzuzeigen und zu kopieren..
  • Wenn Sie stattdessen die ShapeDivider-App verwenden, können Sie den Konfigurator nutzen, um den Separator zu zeichnen: Alles ist sehr intuitiv, und Sie sehen das Ergebnis sofort. Sobald Sie zufrieden sind, können Sie auf die Schaltfläche mit der Wolke klicken, um den benötigten HTML-Code anzuzeigen.   
  • In jedem Fall ist es wichtig, einen SVG-Code wie diesen zu erhalten:: 
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
    </svg>

Wie Sie sehen, ähnelt die Struktur stark HTML, allerdings mit unterschiedlichen Tags. Die für Sie relevanten Elemente des Codes sind die Werte von 'viewBox' und 'd' (Pfaddaten); in diesem Beispiel sind diese Werte gelb hervorgehoben.

  • Jetzt können Sie in WebSite X5 weiterarbeiten. Öffnen Sie das Animated Shape Separator-Objekt und wählen Sie als Typdie 'Benutzerdefinierte Form'.

    Legen Sie alle notwendigen Parameter fest, um den Separator und die Animation zu definieren.

  • Tragen Sie die Werte der ViewBox in das entsprechende Feld ein.
  • Kopieren Sie (CTRL+C) aus dem SVG-Code der Maske den Wert des Elements d und fügen Sie ihn (CTRL+V) in das Feld Form (d) ein.  
#Tipp - Sowohl für die ViewBox als auch für die Form müssen Sie nur die Werte der Elemente viewBox und d einfügen, also den Inhalt zwischen den Anführungszeichen (ohne die Anführungszeichen selbst). Um Übertragungsfehler zu vermeiden, empfiehlt es sich, die Werte zu kopieren (CTRL+C) und einzufügen (CTRL+V).  
  • Klicken Sie auf OK, um zu bestätigen, und sehen Sie sich Ihre Seite in der lokalen Vorschau an, um sicherzustellen, dass das Ergebnis genau Ihren Erwartungen entspricht.


#Tipp – Alternativen. Neben dem Animated Shape Separator-Objekt sind auch die folgenden Objekte verfügbar: Simple Separator, Separator, Shape Separator und Waves Separator: Das erste dient zur Verwaltung des Abstands zwischen zwei Inhalten, das zweite ermöglicht die Erstellung eines statischen linearen grafischen Elements, das dritte erlaubt die Erstellung eines statischen Separators mit einer benutzerdefinierten Form, und das letzte ermöglicht das Erstellen einer animierten Welle.Denken Sie daran, dass Sie die Abstände immer über das Fenster 'Rand und Ausrichtung' verwalten können, das Sie über die Schaltfläche  in der Symbolleiste über dem Seitenraster aufrufen können. Es wird nicht empfohlen, leere Zellen oder Zeilen einzufügen, um die Ausrichtung der Objekte zu ändern. 



Sind Sie schon neugierig, wie diese Objekt auf Ihrer Website aussieht? Installieren Sie sofort Animated Shape Separator 


Fehlen Ihnen noch Credits für den Kauf dieses Objekts? Alle Kreditpakete ansehen