[CW 43.2022] Shape Dividers and Animated Gradient Background

:us: :large_blue_diamond: Hey Sitejetters,

Happy Wednesday! We brought you a little update for the beginning of November:

#1 Shape Dividers for Containers

You always wanted to create some mindblowing transitions between sections and containers? Like this for example:

Well, now there is a super simple way to do that - with our new shape dividers! :raised_hands:

We added various shapes like clouds, fire, shredded paper, paint drip, but also the more ‘traditional’ ones like fan, triangle, diagonal, zig zag, waves etc.







Simply open the edit panel of a container and check out the new setting “Shape Dividers” in the “Container” tab:

Depending on the shape you will see different settings. You can:

  • … change the color of a shape (some even have up to 3 different color options) to match the design of your website
  • … adjust the width to stretch or squeeze the shape
  • … customize the height of the shape
  • … play with the horizontal position of the shape within a container
  • … switch between positions - should it be on the top or the bottom of the container?
  • … invert a shape
  • … flip the shape
  • … add an animation where you can select the duration and direction of the animation

As you can probably imagine the options are endless! :infinity:

The new shape dividers are part of the container and will be placed between any background (color, images, videos etc. - incl. opacity) and the content you put into the container.

Please also note that although there are similarities when it comes to shapes between the shape dividers and the separators (in the left sidebar under Content) are not the same :wink:

Enough with our theoretical introduction - time to test it for yourself and divide sections with style :sunglasses:

#2 Animated Gradient Background

Gradients are great, but do you know what’s even better? Yes, animated gradients!

When you now add a gradient as background you will find the option “Duration” for linear gradients. Here you can determine how fast or slow the gradient should moves from one side to the other.

As you will see, we also adjusted the design of the color/gradient selection to make it more comfortable to set everything up.

If you are feeling super creative you can also combine the (animated) gradient and the shape dividers for some hot designs! :wink:

#3 We also released some smaller changes and bug fixes like

  • The dropdowns in the toolbar of the text editor are no longer cut off!
  • You can now see uploaded fonts in the text editor toolbar again!
  • Collections URL Filter no longer overwrite Collections Listing filter
  • Selecting a custom color is no longer mandatory for the whitelabel feature to work
  • Google and Facebook signup are no longer available for whitelabel login
  • Terms of Service and Privacy Policy link in the login screen (for partner. - so.e.g partner.whitelabel-domain.com) are being replaced by custom links if they have been added

We hope you enjoy the new features and we are looking forward to your feedback! :speech_balloon:

Have a great day!
The Sitejet Team


:de: :large_blue_diamond: Hey Sitejetters,

Happy Bergfest! Zum Start in den November haben wir euch ein Update mitgebracht:

#1 Formtrenner für Container

Du wolltest schon immer außergewöhnliche Übergänge zwischen Sections und Containern schaffen? Wie das hier z.B.:

Ab sofort gibt es dafür super einfache Einstellungsmöglichkeit mit unseren neuen Formtrennern! :raised_hands:

Wir haben unterschiedliche Formen wie Wolken, Feuer, Abgerissenes Papier, Farbtropfen, Fächer, Dreieck, Diagonal, Zickzack, Wellen und vieles mehr hinzugefügt.









Wenn du jetzt das Bearbeitungspanel eines Container öffnest, findest du hier jetzt die neue Option “Formtrenner” im “Container”-Tab:

Je nachdem welche Form zu ausgewählt hast, findest du unterschiedliche Einstellungen. Du kannst:

  • …die Farbe der Form ändern (bei einigen sogar bis zu 3 Farben), um sie an das Design deiner Website anzupassen
  • …die Breite der Form auseinanderziehen oder zusammendrücken
  • …die Höhe der Form ändern
  • …mit der horizontalen Position spielen
  • …wählen, ob die Position oben oder unten am Container erscheinen soll
  • …die Form invertieren
  • …die Form horizontal spiegeln
  • …die Animation aktivieren und dafür Richtung und Dauer festlegen

Wie du dir vorstellen kannst, gibt es unzählige Gestaltungsmöglichkeiten! :infinity:

Die neuen Formtrenner sind ein Teil des Containers und werden zwischen dem Hintergrund (unabhängig davon hier eine Farbe/verlauf oder Bilder oder Videos ausgewöhlt wurden - inkl. Farb-Overlay) und dem Content, der in dem Container platziert wird, eingebettet.

Die neuen Formtrenner sollten nicht mit den bestehenden Trennern verwechselt werden - auch wenn viele der Formen gleich sind.

Genug erzählt! Es wird Zeit, dass du die neuen Formtrenner testet und stylische Übergänge hinzufügst! :sunglasses:

#2 Animierte Farbverläufe als Hintergrund

Farbverläufe sind super, aber weißt du was noch besser ist? Genau, animierte Farbverläufe!

Wenn du einen Verlauf als Hintergrund hinterlegst, findest du beim “linearen Verlauf” ab sofort auch die Möglichkeit die “Dauer” einzustellen. Damit kannst du festlegen, wie schnell oder langsam sich der Verlauf von der einen zur anderen Seite bewegen soll.

Außerdem wirst du sehen, dass wir die Farbe/Verlauf-Auswahl neu designt haben, um das Setup zu vereinfachen.

Wenn du dich richtig kreativ fühlst, kannst du sogar die (animierten) Farbverläufe und die Formtrenner kombinieren :wink:

#3 Wir haben zusätzlich ein paar Bug Fixes und kleinere Updates veröffentlicht:

  • Die Dropdowns in der Tololbar des Text-Editors sind jetzt wieder zu sehen und problemos zu bedienen!
  • Du kannst wieder die hochgeladenen Fonts in der Toolbar des Text-Editors sehen
  • Collections-URL-Filter überschreiben keine Collections Listing Filter mehr
  • Eine benutzerdefinierte Farbe ist nicht mehr notwendig, damit das Whitelabel-Feature funktioniert
  • Google und Facebook sind keine Sign Up-Optionen mehr, wenn Whitelabel aktiviert ist
  • Die AGB- und Datenschutzerklärungslink für den Login bei partner. (z.B. partner.whitelabel-domain.com werden jetzt auch angepasst, wenn eigene Links unter “Team managen” hinterlegt wurden

Wir wünschen euch viel Spaß mit den neuen Funktionen und freuen uns auf euer Feedback! :speech_balloon:

Schönen Tag noch!
Das Sitejet Team

6 Likes

AMAZING! Thanks for implementing this feature request.

4 Likes

A very timely and useful feature addition indeed . Thanks :clap:

1 Like

Can we have option to upload own created shape dividers in SVG format?

@mughal You can use the SVG element to upload custom SVG shape dividers. If you would like to upload custom SVG shape dividers with the feature we released then this is not possible. You can add a feature request for that in the respective community topic: Website Builder Request - Sitejet Community

1 Like

@Franzi i already know that i can use svg elements but it doesn’t work in same way as built-in shape divider feature … i am adding it as a feature request …