Bogen, Rundung & mehr: Bilder schneiden direkt in Squarespace!

October 13, 2021 Victoria Weber & Team

Bei Squarespace geht’s ab. 🔥

So ungefähr lässt sich die aktuelle Entwicklung beschreiben, die vor allem eines im Sinn hat: Einen noch besseren Website-Builder zu bauen, damit du die allertollsten Websites bauen kannst.

So jedenfalls sehe ich das 😊Und bin zunehmend verzückt von den neuen Features, die nach und nach rauskommen.

Seitdem Squarespace angekündigt hat, “alles fürs Verkaufen” bereitzustellen, kommen ständig neue tolle Funktionen. Der Fokus liegt, wie ich das sehe, ganz klar darauf, noch viel mehr visuelle Gestaltungsmöglichkeiten zu bieten. Das war schon daran sichtbar, dass Squarespace im September 2021 seine neue Video-App vorgestellt hat.

Ich selbst habe viele, viele Bilder für meine Websitekunden bisher in externen Programmen wie Adobe Illustrator oder Canva* zugeschnitten. Ein großer Teil davon dürfte jetzt allerdings nicht mehr nötig sein!

Denn: Squarespace hat sowohl in 7.0 als auch in Version 7.1 tollerweise die Möglichkeit, Bilder direkt innerhalb von Squarespace zu schneiden oder Masken zu bearbeiten.

Ganz konkret: Ecken und Rundungen, und gerundete Ecken. Dabei auch die besonders modernen, hipsterartigen Bogen, die du bestimmt schon überall online gesehen hast:

Besonders solche Bogen - aber auch runde Bilder sind ein tolles Gestaltungselement und deswegen einen zweiten Blick wert.

Von daher: Zeit, zu gucken, wie das geht!

See this content in the original post

👉 Du startest gerade erst? Teste Squarespace hier 14 Tage lang gratis & hol dir mit dem Code VICTORIA10 10% Rabatt auf dein erstes Jahr (Das ist natürlich Werbung für meinen Liebling Squarespace)

Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.

Bisher: Aufwändig in Canva* oder Adobe Illustrator

Wie gesagt: Bis vor gar nicht langer Zeit war die einzige Möglichkeit zu runden Bildern - selbst machen, und zwar in externen Programmen.

(Na gut, die zweite Möglichkeit war es, mit CSS zu arbeiten - denn damit könntest du alternativ natürlich auch alle Bilder zurecht schneiden.)

Dann musstest du ein Bild nehmen, es durch eine Maske schneiden und konntest so deine Rundungen und Bogen designen:

Das Ganze ging relativ einfach bei Canva* - aber PNG-Dateien mit transparentem Hintergrund zu exportieren (wie die beiden Bilder oben) hat die Pro-Version von Canva* vorausgesetzt.

Dort kannst du auch weiterhin sehr cool Bilder in Masken schneiden, die “exotische Formen” haben:

Hier siehst du links eine Auswahl der coolen Masken bei Canva*. Und ja, Canva gibt es auch auf Dänisch, wie du siehst 😊

Für Rundungen, Ecken etc. braucht es das aber nicht mehr. Das geht jetzt super bequem genau dort, wo du deine Bilder direkt auf deine Squarespace-Website lädst.

Bilder: Bogen-Masken direkt bei Squarespace

Das Gute ist: Du kannst die Bilder überall integrieren - und zwar egal, ob du ein Inline-, Karten-, Collagen- oder welches Bild auch immer gewählt hast.

Wie gesagt ist es sehr einfach, das “kurz zu machen”.

Dazu gehst du auf das jeweilige Bild, klickst auf den kleinen Stift oben links, und wählst im kleinen Reiter “Design” deine Einstellungen aus:

Hier gibt es jetzt die neue Einstellung des Eckenradius.

Bei dem oben stehenden Bild habe ich oben links und oben rechts den Wert auf 300 gesetzt - die Ecken sind also sehr gerundet. Für “softere Rundungen” musst du natürlich noch etwas herumprobieren.

Das bedeutet also: Oben links und oben rechts wird etwas abgeschnitten. Unten links und rechts bleiben die Ecken aber voll erhalten.

Bei Squarespace-Websites der Version 7.0 sieht das fast gleich aus und funktioniert auch so:

Falls es dir übrigens nicht aufgefallen ist: Links neben dem Eckenradius gibt es eine zweite kleine Option, in der nur eine einzige Zahl steht. Damit stellst du den Eckenradius gleich für alle vier Ecken ein:

Runde Bilder bei Squarespace

Um runde Bilder zu erstellen, gibst du einfach rechts, links, oben und unten den gleichen “Abschnittswert” ein. Der muss relativ groß sein, damit auch wirklich “Kurven” und nicht nur runde Ecken enstehen.

Oder du gehst (wie im Bild mit den Wellen oben) auf den linken Button und gibst das noch einfacher ein. 😊

Je größer der ist, desto kleiner wird der Kreis geschnitten. So kannst du dir genau anschauen, welcher der perfekte Wert für deinen gewünschten Bildausschnitt ist.

Freie geometrische Formen schneiden

Des Spaßes halber habe ich noch ein paar andere Formen ausprobiert - und das ergibt tatsächlich total schicke Effekte!

Eine spitze Ecke im Kreis - solche und ähnliche Effekte benutze ich schon lange zum Beispiel in meiner Email-Signatur. Ziemlich cool, das auch direkt online durch den Eckenradius machen zu können!

Oder hier eine Art “Blattform” wie hier, die du duch starke Ecken an einer oberen und einer unteren Seite hinbekommst:

So kannst du dich also komplett ausleben, verschiedene Eckenradius-Kombinationen testen und austoben. 😉

Und zack - fertig! Schon hast du deiner Squarespace-Website durch wenige Bild-Zuschnitte einen tollen modernen Touch verliehen.

👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥

Diese Artikel könnten auch noch interessant für dich sein:

… oder trage dich hier für die neusten Squarespace-Anleitungen ein: