Compatibilità:

WebSite X5 Evo e Pro

Wenn Sie eine Webseite erstellen, machen die sorgfältige Gestaltung von Abständen und grafischen Details den Unterschied zwischen einem gewöhnlichen und einem wirklich beeindruckenden Design aus. Leerräume helfen, den Inhalten Raum zum Atmen zu geben, aber mit dem optionalen Shape Separator-Objekt können Sie noch mehr tun: attraktive grafische Separatoren hinzufügen, die nicht nur ordnen, sondern auch das visuelle Layout Ihrer Seite bereichern.


Das Shape Separator-Objekt ermöglicht es Ihnen, über einfache gerade Linien hinauszugehen und aus dynamischen Formen wie Wellen, Kurven oder komplexen Separatoren zu wählen. Darüber hinaus können Sie eigene Grafikmasken im SVG-Format importieren, um vollständig personalisierte Separatoren zu erstellen und das Design Ihrer Website einzigartig zu machen. Auf der Vorschauseite finden Sie einige Beispiele, wie Sie eine einfache Trennung in ein markantes grafisches Element verwandeln können.


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 Separator erstellt

Um zu verstehen, wie man das 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 Shape Separator-Objekt ein. 
  • Für die Objekte in Zeile 1 können Sie die Hintergrundfarbe Gelb einstellen, indem Sie auf die Schaltfläche Stil in der Werkzeugleiste klicken und die Option Hintergrundfarbe verwenden.
  • An dieser Stelle doppelklicken Sie auf das Shape Separator-Objekt in Zeile 2, um das Einstellungsfenster zu öffnen..
  • Zuerst stellen Sie die Höhe des Separators in Pixeln ein..
  • Nun kümmern Sie sich um die Farben. Der Separator muss an den vorherigen Seitenabschnitt angeschlossen werden. Daher sollten Sie als Farbe dasselbe Gelb verwenden, das Sie für den Hintergrund der Objekte in Zeile 1 verwendet haben. Als Hintergrundfarbe hingegen lassen Sie Weiß eingestellt..
  • Wenn Sie einen 3D-Effekt hinzufügen möchten, können Sie einen Schatten für den Separator aktivieren und dabei die Farbe, die Stärke und den Verbreitungsfaktor festlegen.
  • Abschließend müssen Sie die gewünschte Form für Ihren Separator aus der Liste Typ auswählen. In diesem Beispiel haben wir die 'Form 10' verwendet. Je nachdem, wie der Inhalt Ihrer Seite angeordnet ist und welchen grafischen Effekt Sie erzielen möchten, können Sie die Form des Separators auch vertikal und/oder horizontal drehen.
  • 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 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 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 zurück in WebSite X5 arbeiten. Öffnen Sie das Shape Separator-Objekt und wählen Sie nach Festlegung aller anderen Einstellungen als Typ die Option 'Benutzerdefinierte Form'. 
  • 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 Shape Separator-Objekt stehen auch das Separator-Objekt und das Simple Separator-Objektzur Verfügung: Während das erste die Erstellung eines linearen grafischen Elements ermöglicht, dient das zweite lediglich der Verwaltung des Abstands zwischen zwei Inhalten. Denken Sie daran, dass Sie zur Verwaltung von Abständen jederzeit das Fenster „Rand und Ausrichtung“ verwenden können, das Sie über die Schaltfläche in der Werkzeugleiste oberhalb des Layout-Rasters aufrufen. Es wird jedoch 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 Shape Separator 


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