Vielleicht hast du schon gehört, wie einfach es ist, eine Website mit Squarespace zu erstellen, oder hast dich von einem ihrer prominenten Markenbotschafter verzaubern lassen. Egal wie dein Interesse an Squarespace geweckt wurde, du bist wahrscheinlich aus einem ganz bestimmten Grund hier: Du hast eine Idee für eine Website und möchtest sie Wirklichkeit werden lassen.

illustration: wie man eine Squarespace website erstellt
Jeder kann eine Website mit Squarespace erstellen. Und so funktioniert es. Illustration von OrangeCrush

Als Alternative zu Wix oder anderen Website Buildern ist Squarespace eine tolle Plattform, um eine Website zu erstellen, selbst wenn du keinerlei Erfahrung darin hast. Die WYSIWYG-Oberfläche macht das Erstellen einer Website per Drag & Drop zum Kinderspiel und die Templates geben dir die Struktur und das Setup einer professionellen Seite.

Trotzdem gibt es einiges zu lernen und die benutzerfreundliche Oberfläche hat auch ihre Grenzen. Wenn du also wissen willst, wie man eine Website mit Squarespace erstellt, haben wir diese praktische Schritt-für-Schritt-Anleitung für dich zusammengestellt, die alle häufigen Fragen beantwortet, zusammen mit Screenshots, um weitere Verwirrung zu vermeiden.

Wie du einen Squarespace-Account erstellst

Bevor du irgendetwas tust, musst du dir einen Squarespace-Account anlegen. Du wirst deinen Squarespace-Login jedes Mal brauchen, wenn du deine Seite bearbeiten möchtest.

1. Gehe auf Squarespace.

2. Auch wenn es mehrere Möglichkeiten gibt, deinen Account anzulegen, geht es am schnellsten, in der oberen rechten Ecke der Homepage auf Anmelden zu klicken.

man man eine Squarespace website erstellt screenshot

3. Klicke auf Konto erstellen in der oberen rechten Ecke.

Squarespace website anmeldung screenshot

4. Du kannst dir aussuchen, wie du dich anmelden möchtest: per Google, Apple oder E-Mail, außerdem Twitter oder Facebook unter Weitere Optionen. Dies wird deine Account ID sein und kannst du hier dein Passwort festlegen.

How to make a Squarespace website screenshot

5. Das war’s erstmal. Von hier kommst du direkt zum Site Editor, auch wenn dein Account bereits erstellt wurde. Du kannst dich jederzeit wieder einloggen, um dort weiterzumachen, wo du aufgehört hast. Um die Zahlungsinformationen musst du dich noch nicht kümmern.

Wie du eine Website mit Squarespace erstellst

Sobald du deinen Account hast, kannst du jederzeit damit beginnen, deine Squarespace-Website zu erstellen.

1. Nachdem du dich eingeloggt hast, gehst du auf deine Account Seite. Klicke an irgendeine Stelle in der leeren Box oder klicke auf Seite erstellen in der oberen rechten Ecke. Beides führt dich zur selben Seite.

Squarespace website seite erstellen screenshot

2. Nun befindest du dich auf der Seite mit den Vorlagen. Dein Template zu wählen ist die mit Abstand wichtigste Entscheidung, die du beim Erstellen einer Squarespace-Website triffst. Es sei denn, du möchtest dein ganz eigenes individuelles Design. In diesem Fall kannst du mit einem Designer arbeiten, der dir ein Squarespace-Webdesign kreiert. Ja, auch das ist eine Option! Mehr dazu am Ende des Artikels.

Da die Wahl eines guten Templates so wichtig ist, empfehlen wir, dir mögliche Templates vorher anzuschauen, bevor du dich festlegst. Du siehst die beliebtesten Templates nach Branchen sortiert im linken Menü.

Um dir eine Vorschau eines Templates anzusehen, klicke einfach auf Vorschau beim jeweiligen Template, das dich interessiert.

Squarespace website vorschau screenshot

3. Die Vorschau zeigt Beispiel-Screenshots in verschiedenen Versionen, beispielsweise für Desktop, Smartphones oder Tablets. Du kannst zwischen ihnen wechseln, indem du die Symbole on der oberen linken Ecke anklickst. Um ein interaktives Beispiel davon zu sehen, wie die Seite aussieht, wenn sie veröffentlicht ist, klicke auf Demoseite anzeigen in der oberen rechten Ecke.

Squarespace website demoseite screenshot

4. Wenn du dein Template gefunden hast, klicke auf Mit diesem Design beginnen, wenn du dich in der Vorschau befindest, oder auf Beginne mit… wenn du auf der Template-Seite bist.

5. Nun kommst du zum Onboarding-Assistenten. Hier gibst du den Titel deiner Squarespace-Website ein und kannst dir ein kurzes Tutorial dazu durchlesen, wie du Seiten bearbeitest und designst, oder klickst auf Überspringen.

Squarespace website eigene seite erstellen screenshot

6. Jetzt geht es los. Im Seiten-Editor kannst du deine Seite nach deinen Vorstellungen designen. Es braucht etwas Zeit, sich an den Editor zu gewöhnen, daher empfehlen wir dir, ein wenig herumzuspielen und auf alles zu klicken, was deine Neugier weckt – weiter unten erklären wir dir, wie du einige der häufigsten Dinge machst.

Squarespace website erstellen screenshot

Du kommst über das Menü auf der linken Seite zur Hauptkategorie, die du bearbeiten möchtest – den einzelnen Seiten deiner Website („Seiten“), das Design dieser Seiten („Design“), die E-Commerce-Funktionen („Commerce“) und weitere.

Du kannst den WYSIWYG-Editor jederzeit öffnen, indem du in der oberen linken Ecke der Seitenvorschau auf Bearbeiten klickst. Hier kannst du den Text und die Bilder ändern und Buttons und weiteres hinzufügen. Du kannst auch zur Mobilansicht wechseln, indem du das Smartphone-Symbol in der oberen rechten Ecke anklickst.

Squarespace website haupteditor screenshot

Experimentiere ruhig ein wenig. Abhängig von deinem Projekt benötigst du vielleicht unterschiedliche Designoptionen. Die Benutzeroberfläche ist ziemlich selbsterklärend. Sieh dir unten bestimmte Schritt-für-Schritt-Anleitungen an, um kompliziertere Aufgaben zu bewältigen.

7. Nachdem du die Änderungen im WYSIWYG-Editor vorgenommen hast, musst du sie speichern (oder verwerfen), bevor du in den Haupteditor zurückkehrst. Klicke dazu auf Fertig in der oberen linken Ecke und klicke dann auf deine Auswahl im Dropdown-Menü.

Squarespace website screenshot speichern

8. Um dir eine Vorschau deiner Seite anzusehen und mit ihr zu interagieren, klicke auf den Pfeil in der rechten oberen Ecke. Du kannst hier auf deiner Seite surfen, sie aber nicht bearbeiten. Um zurückzukehren, klicke einfach auf den umgekehrten Pfeil oben rechts.

Squarespace website screenshot vorschau anzeigen

9. Wenn es dir ernst ist mit der Erstellung einer Squarespace-Website und du deine Seite veröffentlichen willst, wirst du irgendwann ein Abo benötigen. Wenn du das möchtest, klicke im Seiten-Editor unten auf Abonnieren.

Es gibt vier Preismodelle: Zwei für gewöhnliche Unternehmen und zwei für E-Commerce. Um einen Vergleich der Funktionen und Zahlungsoptionen zu sehen, schau dir die Preisliste auf Squarespace an.

squarespace preisliste

Hier musst du einfach ganz normal deine Kreditkartendaten eingeben. Sobald du bezahlt hast, kannst du deine Seite veröffentlichen.

Wie du eine Seite deiner Squarespace-Website bearbeitest

Der Großteil des Squarespace-Editors ist leicht verständlich, aber ein paar Funktionen können Kopfzerbrechen bereiten. Hier erklären wir, wie man auf Squarespace einen Button hinzufügt, Text bearbeitet und Bilder anpasst.

Wie man einen Button hinzufügt

1. Gehe zum WYSIWYG-Editor, wie oben beschrieben.

2. Squarespace-Templates sind in Abschnitte unterteilt. Die Abschnitte werden durch schwarze und graue, runde Tabs dargestellt, aber sie erscheinen nur, wenn du mit der Maus über sie fährst. Wenn du einen neuen Button hinzufügen möchtest, musst du das in diesen Bereichen tun. Ansonsten kannst du den bereits vorhandenen Button eines Templates bearbeiten, damit er die gewünschte Aktion ausführt.

Squarespace website screenshot button hinzufügen

3. Ein Klick auf die Tabs öffnet das Menü Inhalts-Blöcke. Dort kannst du eigenen Content wie Textblöcke, Bilder, Videos, Abstand oder Buttons hinzufügen.

Squarespace website screenshot button wählen

4. Klicke auf Button im Menü Inhalts-Blöcke, um einen neuen Button hinzuzufügen. Du kannst den Ankertext, die Größe, die Ausrichtung und die Ziel-URL im Popup-Menü bearbeiten. Alles andere musst du an anderer Stelle ändern.

Squarespace website screenshot button einstellungen

5. Um die Schrift und Farbe des Buttons zu ändern, gehe in den Haupteditor (speichere vorher deine Änderungen, wenn du im WYSIWYG-Editor bist). Klicke dort dann auf Designs > Buttons, um die Button-Einstellungen zu ändern. Deine Änderungen wirken sich auf alle Buttons aus.

Squarespace website screenshot button design wählen

6. Die Farbe deiner Buttons hängt von deiner Farbpalette ab. Du kannst diese auch im Haupteditor ändern: Gehe zu Design > Farben. Sei dir bewusst, dass dies nicht nur die Farbe der Buttons ändert.

Wie du Text bearbeitest

1. Es gibt zwei Wege, um deiner Squarespace-Seite Text hinzuzufügen oder ihn zu bearbeiten. Der erste Weg besteht darin, den Text zu ändern, den dein Template bereits enthält.

Um diesen Text zu ändern, musst du nur in den WYSIWYG-Editor und auf den Text klicken, den du bearbeiten möchtest. Dann erscheint ein Texteditor mit Optionen für Textstil, Ausrichtung, Aufzählungen, Überschriften und Links (wir erklären weiter unten, wie man Schriftarten ändert).

Squarespace website screenshot text bearbeiten

2. Wenn du an einer Stelle der Vorlage Text hinzufügen möchtest, an der noch kein Text vorhanden ist, kannst du das im Menü Inhalts-Blöcke. Wie oben bereits erklärt, musst du auf den grau/schwarzen Tab zwischen den Abschnitten klicken, um das Menü zu öffnen und dann auf Text klicken. Dadurch entsteht ein neuer Textbereich, wo du mit einem Texteditor Text bearbeiten kannst.

Squarespace website screenshot text auswählen

3. Egal wie du Text auf deiner Seite einfügst, du musst in den Haupteditor gehen, um Designeinstellungen wie Schriftart und Textgröße zu bearbeiten. Klicke dazu im Haupteditor Design > Schriftart an, um deine Typografie anzupassen.

Du kannst zuerst deine Schriftart wählen mit Beispielen für den Header und den Body-Text und die Größe mit einem Slider ändern. Du kannst die Typografie deiner Squarespace-Website aber noch umfänglicher anpassen, indem du auf das Rädchen (oder die „Sonne“) in der oberen rechten Ecke deiner gewählten Schrift klickst.

Squarespace website screenshot text weitere einstellungen

Dies öffnet ein erweitertes Schriftmenü. Hier kannst du einstellen, welche Schriftarten und Größen du für verschiedene Bereiche, beispielsweise Buttons, Header, Preisliste etc. nutzen möchtest.

Squarespace website screenshot schriftmenü

Wie du Bilder und Videos hinzufügst und bearbeitest

1. Um Bilder und Videos zu bearbeiten, musst du zuerst in den WYSIWYG-Editor gehen.

2. Um ein Hintergrundbild oder -video auszutauschen, doppelklicke auf das Bild im Template. Achte darauf, nicht zu nah an einem Text oder Button zu klicken, da du ansonsten den Editor dafür öffnest. Hier kannst du das Bild bearbeiten, löschen oder ersetzen oder dich anstelle eines Bildes für eine Farbe entscheiden.

How to make a Squarespace website screenshot
How to make a Squarespace website screenshot

Hier kannst du auch zwischen Randlos (das Bild geht bis zum Seitenrand) oder Einrückung (es gibt einen Rand zwischen Bild und Seitenrand) wählen und die Deckkraft aussuchen, wenn du mit Transparenz herumspielen möchtest.

2. Für weitere Optionen klicke auf Bild bearbeiten im Tab Hintergrund. Dadurch öffnet sich der Bildeditor mit weiteren Optionen. Hier kannst du die Bildgröße ändern, das Bild beschneiden und eine Farbkorrektur vornehmen.

Squarespace website screenshot bilder hinzufügen

3. Wenn du ein neues Bild oder Video an einer Stelle hinzufügen möchtest, an der im Template keines ist, kannst du wieder das Menü Inhalts-Blöcke nutzen. Klicke auf den runden grau/schwarzen Tab und wähle dann Bild oder Video. 

Squarespace website screenshot bilder oder video hinzufügen

Wie du eine Squarespace-Website für E-Commerce erstellst

promo squarespace und 99designs

In den vergangenen Jahren hat Squarespace bei seiner E-Commerce-Funktionalität ordentlich zugelegt, um mit Shop Buildern wie Shopify mithalten zu können. Dadurch haben Onlinehändler mehr Designoptionen, die viele E-Commerce-Plattformen nicht haben.

Falls du nicht weißt, wie du eine Squarespace-Website für E-Commerce erstellst, haben wir hier eine kurze Anleitung für dich. Lass dir nur vorher gesagt sein, dass du eines der beiden E-Commerce-Abos benötigst, um deinen Onlineshop fertigzustellen und zu starten.

(HINWEIS: Das Tolle an Squarespace ist, dass du jedes Template um E-Commerce-Funktionen erweitern kannst, wodurch du mehr Personalisierungsoptionen als bei anderen Website Buildern hast. Wenn Webdesign für dich allerdings noch Neuland ist, solltest du am besten ein Template nutzen, dass eigens für Onlineshops designt ist.)

1. Klicke im Haupteditor auf E-Commerce.

2. Wenn dies dein erstes Mal ist, öffnet sich ein kurzer Onboarding-Assistent, der dir hilft. Du musst ein paar Fragen zu deiner Branche und Produktpalette beantworten oder einfach auf Überspringen klicken.

Squarespace website screenshot unternehmensinformationen eingeben

3. Zuerst musst du deine Shopseite aufsetzen. Klicke im Haupteditor auf Seiten, dann auf +Seite Hinzufügen und dann auf Shop. Wähle zwischen den verschiedenen Layouts für deine Produkte, um fortzufahren.

Squarespace website screenshot seite hinzufügen

4. Es befinden sich nun ein paar Beispielprodukte in deinem Squarespace-Editor. Klicke auf die Produkte (in der Vorschau oder im WYSIWYG-Editor), um das Produkt zu bearbeiten. Du siehst die Optionen Produkt bearbeiten und Design bearbeiten in der oberen linken Ecke.

Squarespace website screenshot produktseiten

5. Klicke auf Produkt bearbeiten, um den erweiterten Produkteditor zu öffnen. Hire kannst du alle Produkteinzelheiten bearbeiten: Name, Preis, Fotos, Beschreibung, Variationen und alles Grundlegende. Außerdem gibt es weitere Optionen für Abonnements oder SEO. Du kannst auch im Social-Media-Tab die Vorschau für die sozialen Medien bearbeiten und außerdem im unteren Menü die Produkte duplizieren oder löschen.

Squarespace website screenshot produkte erstellen

6. Klicke auf Design bearbeiten (oder im Haupteditor auf Design > Produktartikel), um den Produkteditor zu öffnen. Dort kannst du alle Designelemente anpassen, die nichts mit dem eigentlichen Produkt zu tun haben, wie die Bildabstände, die Ausrichtung oder die allgemeine Platzierung, ebenso wie Klick-Aktionen oder Slideshow-Funktionen. Diese Designattribute betreffen alle Produktseiten.

Squarespace website screenshot produktinformationen

7. Du musst deine Zahlungsoption wählen, bevor deine Seite veröffentlicht werden kann. Unter E-Commerce > Zahlungen kannst du aus drei Optionen wählen: Stripe, Paypal oder Point of Sale (nur in den USA verfügbar).

Hier kannst du auch die Währung des Shops ändern.

8. Du musst zudem deine Versandart angeben und tust dies unter E-Commerce > Versand. Hier kannst du deine Versandmethode wählen und die Formulare bearbeiten, wie viel du pro Versand berechnest und welchen Paketdienst du nutzt. Verschiedene Versandmethoden haben verschiedene Einstellungsmöglichkeiten.

Squarespace website screenshot versandoptionen

9. Das ist alles, was du brauchst, um deinen Shop zu starten, aber der E-Commerce Tab hat noch viele andere nützliche Dinge zu bieten.

  • Unter E-Commerce > Kasse kannst du deine Kassenoptionen anpassen und beispielsweise eine Warenkorb-Wiederherstellung aktivieren.
  • Unter E-Commerce > Inventar siehst du eine Zusammenfassung all deiner Produktseiten, um sie schnell bearbeiten zu können.
  • Unter E-Commerce > Kunden siehst du Kundendaten, einschließlich Bestellungen und wie viel sie ausgegeben haben.
  • Unter E-Commerce > Rabatte kannst du Promoaktionen wie Coupon-Codes einstellen.

Jedes Geschäftsmodell hat seine eigenen Anforderungen und es stehen zahlreiche Anpassungsoptionen zur Verfügung. Wenn du nach etwas Besonderem suchst, das wir nicht erwähnt haben, sieh dir den Haupteditor an, um dich selbst davon zu überzeugen.

Solltest du ein Squarespace-Template verwenden oder ein individuelles Squarespace-Webdesign?

squarespace designer für individuelle designs
Du kannst einen Squarespace Experten engagieren, der dir eine individuelle Seite designt.

Squarespace-Webseiten sind so beliebt, weil jeder eine designen kann, egal wie gut er sich mit Webdesign auskennt. Wenn du allerdings ohne viel Erfahrung eine Seite designst, wird sie aussehen wie eine Seite, die von jemandem ohne Erfahrung gemacht wurde. Und vergiss nicht, dass der Nachteil eines Templates darin liegt, dass Tausende anderer Leute dasselbe Template für ihre Website nutzen. Du kannst sie zwar personalisieren, aber Templates haben ihre Grenzen.

Das kann für kleine und neue Onlineshops okay sein, oder auch für Unternehmen, die noch am Anfang stehen, aber wenn du es ernst mit deinem Onlineunternehmen meinst, möchtest du eine Seite, die professionell und einzigartig aussieht. Oder du bist vielleicht auf der Suche nach einem einzigartigen Look oder einer Funktion, die ein Template dir nicht bieten kann.

Squarespace bietet einen Service, der dich mit einem professionellem Webdesigner zusammenbringt, um eine Seite nur für dich zu designen. Du erzählst dem Designer von deiner Marke und was du brauchst, und erklärst ihm, welche Vorstellungen du von deinem Webdesign hast, und er wird daraus eine einzigartige Website nur für dich machen.

Du möchtest ein perfektes Squarespace-Webdesign?
Finde jetzt deinen Squarespace Experten.