Du willst eine mega Website designen? 💻🖌️

Mit der Funktion - nennen wir es mal “Überlappen” - kannst du mit Squarespace echt coole Seiten erstellen, indem du Bilder und Wörter übereinander legst. Und dies ist super einfach, also du brauchst dafür keine besonderen Skills oder viel Zeit zu investieren!

Diese Funktion gibt es auch erst seit etwa einem Jahr oder so. Also total neu UND total schnell gemacht!

Wie das geht, zeige ich dir hier.👇

Inhaltsverzeichnis:

Wenn du dir lieber das Tutorial auf YouTube anschauen möchtest, go for it!

Kurz vorweg: Warum sollte ich überlappen?!

Ob du Bilder und Wörter überlappen möchtest, ist natürlich deine Entscheidung. Ich finde, dass du aber so Effekte kreieren kannst, die Tiefe erzeugen.

Und es ist auch mal etwas anderes und nicht einfach nur Text und Bild nebeneinander gereiht und that’s ist.

Text und Bild wirken dadurch optisch auch ganz anders:

Beispiel ein Wort- und Textüberlappung bei Squarespace

👉 Ständig frische Tipps für dein Webdesign-Business? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥

Überlappung: Wie funktioniert das?

Ich zeige dir das mal an einem visuellen Beispiel. 👇

Ebenen nutzen

Du kannst zum Beispiel zwei verschiedene Textfelder und ein Bild einfügen. Nehmen wir mal an, du möchtest, dass ein Textfeld hinter dem Bild ist und eins davor.

Dafür klickst du auf ein Feld (egal, ob du jetzt Text oder Feld nimmst) und wählst eine von den Symbolen für Ebenen aus. Das eine Symbol ist für “nach hinten” und das andere für “nach vorne”.

Das war’s auch schon, jetzt hast du Text und Bild überlappt - wie gesagt, mega easy!

Spiele mit den Blöcken

Kleines Geheimnis am Rand: Spiele mit den Text- und Bildblöcken!

Verschiebe diese, verkleiner oder vergrößer sie.

So erzeugst du verschiedene Effekte durch unterschiedliche Anordnungen und Größen. BAM!

Video-Workshop: Bei Google gefunden werden und Geld verdienen

Erzeuge Überlappungseffekte zwischen Abschnitten

Abschnitte sind bei Squarespace (leider) noch getrennt. Das heißt, zwischen den Abschnitten kannst du mit der Ebenenfunktion keine Überlappungen erstellen. Das Bild kann also nicht einfach den Abschnitt überlappen.

Aber du hast eine andere Möglichkeit, diesen Effekt zu erzeugen:

Formabschnitte bei Squarespace

Du kannst eine Form (also ein Rechteck in diesem Fall) auswählen und diese zwischen den Abschnitten anordnen.

Überlappungseffekte mit Formen erstellen

Passe noch die Farbe an.

Und ziehe dann die Form bis an den Rand.

Bei der Form kannst du dann wieder die Ebenenfunktion nutzen, um diese so ganz nach hinten zu packen.

Achte unbedingt darauf, dass keine Abstände da sind, sonst wirkt das natürlich nicht. Wenn du merkst, dass da irgendwo eine Lücke oder ein Loch ist, dann kannst du auch den Abstand bei der Form auf null setzen.

Passe nun noch Feinheiten an und schon hast du eine optisch mega ansprechende Seite designt, die mal so gar nicht 08/15 ist. 😉

Finaler Formabschnitt und Überlappung von Text- und Bildblöcken

Und voilà, schon hast du eine optische Illusion eines ineinander übergehenden Abschnitts erstellt!

Hast du noch Fragen zum Überlappen bei Squarespace? Stell sie gerne in den Kommentaren!

Diese Artikel könnten dich auch interessieren:

So geht: Überlappen bei Squarespace

Kurz vorweg: Warum sollte ich überlappen?!