Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Style-Änderungen vornehmen

Verwende die Optionen in den Menüs „Website-Stile“ und „Design“, um Stil-Änderungen an deiner Website vorzunehmen. Du kannst für ein einheitliches Erscheinungsbild die globalen Stile bearbeiten, um Änderungen vorzunehmen, die auf die gesamte Website angewendet werden, oder einzelne Abschnitte gestalten.

In dieser Anleitung wird beschrieben, wie Sie Stil-Optionen, sogenannte Anpassungen, verwenden, um das Aussehen Ihrer Website zu ändern. Wir empfehlen, mit den verschiedenen Gestaltungsoptionen zu experimentieren, während Sie Ihre Website erstellen. Indem Sie verschiedene Schriftarten, Farben und Seiteneinstellungen testen, erhalten Sie einen Überblick, was möglich ist und erstellen ein Design, das Sie lieben werden.

Ein Video anschauen

Dieses Video ist für Version 7.1. Für ein Video der Version 7.0 gehe zum Abschnitt Weitere Hilfe.

Stil-Optionen in Version 7.1 vs. Version 7.0

Stiländerungen funktionieren je nach Version deiner Website unterschiedlich. Klicke in den folgenden Abschnitten auf den Tab für deine Version, um die Schritte für deine Website zu sehen.

Version 7.1

In unserer neuesten Version von Squarespace kannst du die meisten Stil-Änderungen wie Änderungen von Schriftart, Farbe und Abständen über Website-Stil vornehmen. Änderungen, die du unter Website-Stil vornimmst, gelten normalerweise für die gesamte Website. Du kannst jedoch fein abgestimmte Änderungen durchführen, indem du bestimmte Abschnitte oder Textbereiche individuell gestaltest. Für erweiterte Stil-Änderungen, z. B. das Entwerfen deines Sperrbildschirms oder des Kassenbereichs, kannst du das Design-Menü verwenden.

Alle Websites in Version 7.1 basieren auf dem gleichen Template. Somit verfügen sie alle über die gleichen Stil-Optionen und Funktionen. Zudem werden bei allen Abschnitte zum Hinzufügen von Inhalten zu Seiten verwendet.

Es ist nicht notwendig, Templates zu wechseln, sodass diese Option in Version 7.1 nicht verfügbar ist. Verwenden Sie stattdessen die Schritte in dieser Anleitung, um verschiedene Looks für Ihre Website auszuprobieren.

Version 7.0

In unserer vorherigen Version von Squarespace haben die Website-Stile jedes Templates verschiedene Anpassungen, die in Abschnitte wie Website-Kopfzeile und Hauptinhalt gruppiert sind.

In Version 7.0 verfügt jedes Template über eigene Stil-Optionen und Standardeinstellungen. Weitere Informationen finden Sie in der Anleitung Ihres Template.

Eine Style-Anpassung finden

Wie Sie eine Stil-Anpassung finden, hängt von der Version Ihrer Website ab.

Klicke zum Öffnen des Menüs „Website-Stil“ auf das Pinsel-Symbol rechts oben, während du eine beliebige Seite bearbeitest.

paintbrush_icon.png

Klicke von dort aus auf das Website-Element, das du ändern möchtest, z. B. Schriftarten oder Farben. In dieser Anleitung findest du eine detailliertere Beschreibung der Schritte für die einzelnen Menüs. Du kannst Website-Stil auch über das Hauptmenü öffnen, indem du auf Design und dann auf Website-Stil klickst.

Um Website-Stil zu schließen, doppelklicke auf die Seitenvorschau, klicke auf das Pinselsymbol oder klicke oben im Menü auf Schließen. Deine Stil-Änderungen bleiben intakt, bis du sie speicherst oder rückgängig machst.

Wenn Website-Stile geschlossen ist, kannst du fein abgestimmte Änderungen vornehmen, indem du einen bestimmten Abschnitt bearbeitest. Um einen Abschnitt zu gestalten, bewege den Mauszeiger über den Abschnitt und klicke dann auf das Bleistiftsymbol. Abschnittsstile haben Vorrang vor Stilen für die gesamte Website.

edit_a_section.png

Hier kannst du außerdem verschiedene Layouts für Sammlungs- und Galerie-Abschnitte auswählen. Wenn du Stil-Änderungen an einem Sammlungs-Abschnitt vornimmst, wirkt sich dies auf alle Layouts dieses Typs aus. Wenn du beispielsweise über zwei Blog-Abschnitte verfügst, die beide ein Mauerwerk-Layout verwenden, wirken sich alle Stiländerungen, die du an einem Abschnitt vornimmst, auf beide Abschnitte aus.

So öffnen Sie Website-Stile.

  1. Klicken Sie im Hauptmenü auf Seiten.
  2. Öffne die Seite, die du gestalten möchtest. Für Funktionen auf der gesamten Website wie Fußzeilen kannst du eine beliebige Seite öffnen. Öffne für Sammlungsinhalte einen beliebigen Sammlungsinhalt des jeweiligen Typs (z. B. einen Blogeintrag oder einen Produktartikel).
  3. Kehre zum Hauptmenü zurück. Klicke dort auf Design und dann auf Website-Stil.
  4. Klicke im Menü „Website-Stil“ auf eine beliebige Anpassung, um Änderungen vorzunehmen.

Die Bearbeitung der Website ist deaktiviert, wenn Website-Stile geöffnet ist. Um Inhalte hinzuzufügen oder zu entfernen, schließen Sie Website-Stile und öffnen Sie das Seiten-Menü.

„Website-Stile“ zeigt Optionen für die Seite an, auf der du dich gerade befindest. Alle Änderungen an diesen Anpassungen gelten für alle Seiten dieses Typs auf deiner Website. Wenn du beispielsweise Stiländerungen an einer Shop-Seite vornimmst, werden diese für alle Shop-Seiten auf deiner Website übernommen. Eine vollständige Liste aller Optimierungen deines Templates findest du in der Anleitung für Stil-Anpassungen deines Templates.

Tipp: Jede Cover-Seite wird separat gestaltet.

Klicke im Vorschaufenster auf einen Bereich einer Seite, um die für diesen Bereich verfügbaren Stil-Anpassungen anzuzeigen und den Rest auszublenden. Es erscheint ein Stil-Highlighter-Rahmen rund um das angeklickte Element. Kehre zu der Anzeige aller Optionen zurück, indem du auf Alle anzeigen klickst. Diese Abkürzung steht in den meisten Vorlagen und für die meisten Bereiche deiner Website zur Verfügung.

So könnte das beim Template „Brine“ aussehen:

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

Einige Anpassungen können in der Vorschau angeklickt und verschoben werden, um die Einstellungen anzupassen:

drag-spacers.gif

Schriftarten und Farben

In den folgenden Abschnitten erfährst du, wie du Schriftarten und Farben auf deiner Website änderst.

Schriftarten

Wie du Schriftarten ändern kannst, hängt von der Version deiner Website ab.

Um eine Schriftart zu ändern, öffne Website-Stile und klicke dann auf Schriftarten.

Im Menü „Schriftarten“ kannst du ein Schriftartpaket auswählen, das auf den gesamten Text auf deiner Website angewendet werden soll, oder die Schriftart bestimmter Texttypen ändern. Mehr dazu erfährst du unter Schriftarten ändern.

In jedem Textbereich kannst du das Textformat auch zu einer Überschrift, einem Absatztext oder einem Text mit Festbreite ändern oder einen Link hinzufügen.

  • Links sind immer unterstrichen.
  • Wenn Besucher auf einen Link klicken, erscheint eine gepunktete Linie um den Link herum, was dazu beiträgt, deine Website für alle Besucher besser zugänglich zu machen.

Um Schriftarten und Schriftgrößen zu ändern, verwenden Sie die Änderungen an Typografie oder Schriftart in Website-Stilen. Weitere Informationen finden Sie unter Schriftarten ändern.

Farben

Wie du die Farben deiner Website ändern kannst, hängt von der Version deiner Website ab.

Um die Farben deiner Website zu ändern, öffne Website-Stile und klicke dann auf Farben.

Mit kuratierten Farbpaletten kannst du Änderungen an allen Farben deiner Website auf einmal vornehmen oder die Farben für einzelne Website-Elemente anpassen. Weitere Informationen zum Ändern von Website- und Abschnittsfarben findest du unter Farben ändern.

Um die Farben zu ändern, wählen Sie eine beliebige Änderung von Website-Formatvorlagen mit einem Farbkreis neben der Beschriftung aus. Weitere Informationen finden Sie unter Farben ändern.

Layout

In den folgenden Abschnitten erfährst du, wie du das Seiten-Layout und den Abstand auf deiner Website änderst.

Kopfzeile

Besucher verwenden die Kopfzeile am Seitenanfang, um durch deine Website zu navigieren. Wie du die Kopfzeile bearbeiten kannst, hängt von der Version deiner Website ab.

Klicke zum Bearbeiten der Kopfzeile deiner Website oben links in der Seitenvorschau auf Bearbeiten, bewege den Mauszeiger über die Kopfzeile und klicke dann auf Website-Kopfzeile bearbeiten. Anhand der Optionen im Editor kannst du deinen Website-Titel oder dein Logo und die Navigationslinks anpassen. Du kannst ein Warenkorb-Symbol, Social-Media-Symbole und einen CTA-Button (für eine Handlungsaufforderung) hinzufügen.

Ausführlichere Schritte finden Sie unter Erstellen einer Website-Kopfzeile.

Der Kopfzeilenstil deiner Website hängt von deinem Template ab. Weitere Informationen zu deinen spezifischen Kopfzeileneinstellungen findest du in der Anleitung für dein Template.

Manche Templates haben besondere Funktionen in der Kopfzeile. Eine Liste der verfügbaren Features findest du unter Erstellen einer Website-Kopfzeile.

Fußzeile

Wie du deine Fußzeile gestalten kannst, hängt von der Version deiner Website ab.

So gestalten Sie die Fußzeile:

  1. Klicken Sie in der linken oberen Ecke auf Bearbeiten.
  2. Bewegen Sie den Mauszeiger über den Footer und klicken Sie auf Footer bearbeiten.
  3. Klicken Sie auf das Stift-Symbol, um Änderungen am Stil vorzunehmen.

Mehr dazu erfährst du unter Footer bearbeiten.

Der Fußzeilenstil Ihrer Website hängt von Ihrem Template ab. Weitere Informationen zu Ihren spezifischen Fußzeileneinstellungen finden Sie in der Anleitung Ihres Template.

Weitere Informationen zu verschiedenen Fußzeilenoptionen nach Template finden Sie unter Fußzeilen bearbeiten.

Abstand und Padding

Wie du den Website-Abstand änderst, hängt von der Version deiner Website ab.

Um den Abstand deiner Website zu ändern, öffne Website-Stile und klicke dann auf Abstände.

Diese Anpassungen ändern den Abstand auf allen Seiten deiner Website:

  • Seitenbreite (max.) – Ändere die maximal mögliche Breite der Seiten deiner Website. Die tatsächliche Breite hängt von deinem Browser und Gerät ab. Diese Anpassung wirkt sich nicht auf die Abstände in der Kopfzeile deiner Website aus.
  • Website: Rand – Ändere die Randbreite auf beiden Seiten deiner Website. Abhängig von deiner Einstellung für die Seitenbreite hat diese Anpassung möglicherweise keinen sichtbaren Effekt auf deinen Seiteninhalt. Diese Anpassung betrifft deine gesamte Website, einschließlich der Kopfzeile. In Galerie-Abschnitten ändert sich das Padding oben und unten im Verhältnis zur Randbreite.

Du kannst den Abstand einzelner Abschnitte im Abschnittseditor ändern.

Viele Größenänderungen wie Padding, Abstand, Breite und Rand befinden sich unter der Überschrift Größen& Werte. Je nach Template können sie sich auch in anderen Abschnitten befinden.

Um eine Größe zu ändern, bewegen Sie den Mauszeiger über eine Größenänderung. Verwenden Sie dann den Schieberegler oder geben Sie eine Zahl in das Feld ein.

Seitenleisten (Version 7.0)

Seiten der Version 7.1 enthalten keine Seitenleisten.

Wenn dein Template eine Seitenleiste beinhaltet, kannst du deren Erscheinungsbild in Website-Stil verändern. Zum Beispiel kannst du in einigen Templates die Seitenleiste rechts oder links anzeigen lassen. Die Stil-Anpassungen für Seitenleisten findest du, indem du in der Seitenvorschau auf die Seitenleiste oder in Website-Stil auf die Überschrift Seitenleiste klickst.

Bilder und Animationen

In den folgenden Abschnitten erfährst du, wie du Bild-Blöcke und Banner gestaltest, Bildseitenverhältnisse änderst und Animationen anwendest.

Bild-Blöcke

Wie du Bild-Blöcke gestaltest, hängt von der Version deiner Website ab. Einige Block-Layouts haben in Website-Stile ihre eigenen Stil-Einstellungen für Schriftarten, Farben und Buttons.

Weitere Informationen zu Bild-Block-Stilen für beide Versionen findest du unter Bild-Blöcke.

Banner

Wie Sie Banner bearbeiten, hängt von der Version Ihrer Website ab.

Du kannst ein Banner-Bild auf jeder Seite erstellen, indem du oben auf der Seite einen Block-Abschnitt mit einem Hintergrundbild hinzufügst.

  • Wenn Sie nur ein Bild in Ihrem Banner wünschen, beginnen Sie mit einem leeren Abschnitt.
  • Alle Blöcke, die zum Abschnitt hinzugefügt werden, überlagern das Banner.
  • Um die Höhe zu ändern, klicken Sie auf das Bleistift-Symbol und legen Sie die Abschnittshöhe fest.
  • Wenn Sie ein Hintergrundbild auswählen, befolgen Sie unsere Tipps zur Bildformatierung.

Erfahren Sie mehr unter Banner-Bilder hinzufügen.

Die meisten Templates unterstützen Seiten-Banner, die du in den Einstellungen deiner Seite hinzufügen kannst.

Seitenverhältnis

Das Seitenverhältnis eines Bildes besteht aus dem Verhältnis seiner Höhe zu seiner Breite und wird als Zahl ausgedrückt, z. B. 3:4. Wenn du eine Seitenverhältnis-Anpassung auswählst, wird das Bild auf diese Form zugeschnitten (z. B. 1:1  Quadrat), gewöhnlich unter Bezugnahme auf den Fokuspunkt.

  • In Version 7.1 kannst du Bildseitenverhältnisse in Abschnitt- und Block-Editoren ändern.
  • In Version 7.0 können Sie Bildseitenverhältnisse in Website-Stile und Block-Editoren ändern.
  • Bei beiden Versionen können Sie den integrierten Bild-Editor verwenden, um das Seitenverhältnis eines Bildes nach dem Hochladen auf Ihre Website zu ändern.

Wenn das Seitenverhältnis auf Auto (Automatisch)eingestellt ist, wird das Bild so angepasst, wie es am besten auf die Seite passt. Es kann jedoch sein, dass Bilder in einer anderen Reihenfolge angezeigt werden, als sie ursprünglich hochgeladen wurden. Weitere Informationen hierzu findest du unter Seitenverhältnisse verstehen.

Animationen

Um visuell Interesse zu wecken, können Sie mithilfe des Menüs Animationen Ihre Inhalte subtil animieren, während Besucher sich durch Ihre Website bewegen. Um mehr zu erfahren, besuchen Sie Animationen für die gesamte Website.

Hintergrund

Wie du den Hintergrund Ihrer Website ändern kannst, hängt von der Version deiner Website ab.

So ändern Sie den Hintergrund:

  • Verwenden Sie das Farben-Menü, um den Website-Hintergrund zu ändern.
  • Verwenden Sie den Abschnitt-Editor, um die Hintergrundfarbe einzelner Abschnitte zu ändern oder Hintergrundbilder oder Videos hinzuzufügen. Dazu gehören Fußzeilenabschnitte.
  • Wenn für einen Abschnitt ein Hintergrundbild auf Einrückung gesetzt ist, können Sie die Einrückungs-Rahmenfarbe festlegen.
  • Die Kopfzeile hat die gleiche Hintergrundfarbe wie der oberste Abschnitt, wenn sie transparent ist. Deaktivieren Sie die Transparenz im Kopfzeilen-Editor, um ein anderes Farbschema für die Kopfzeile festzulegen.

Du kannst die Hintergrundfarbe deines Hauptinhaltsbereichs in den Website-Stilen festlegen. Einige Templates bieten auch die Möglichkeit, eine Hintergrundfarbe zu Kopf- und Fußzeilen sowie zu anderen Bereichen um deinen Inhalt hinzuzufügen. Um mehr zu erfahren, besuche die Seite Farben ändern.

Einige Templates unterstützen ein Hintergrundbild, das über Website-Stile für einzelne Seiten oder die gesamte Website hinzugefügt werden kann. Klicke zum Hinzufügen eines solchen Bilds auf die Anpassung Hintergrundbild oder das entsprechende Bild-Symbol unter Website-Stile. Du kannst dein eigenes Bild hochladen oder ein Agenturbild suchen und hinzufügen. Weitere Informationen findest du unter Hintergrundbilder für die gesamte Website hinzufügen.

Schaltflächen

Wie du Buttons gestalten kannst, hängt von der Version deiner Website ab und ob der Button für die gesamte Website oder nur auf einer bestimmten Seite oder einem bestimmten Abschnitt angezeigt wird.

Ausführliche Schritte für alle Szenarien findest du unter Buttons gestalten.

Produkte

Wie du Produkte gestaltest, hängt von der Version deiner Website ab.

Öffne zum Gestalten der Shop-Seite die Abschnittsstile des Shops. Es werden Optionen zum Ändern des Abschnittsformats, des Hintergrunds und der Farben angezeigt.

Um Produktartikel zu gestalten, öffne Website-Stile und klicke dann auf Produktartikel. Diese Einstellungen wirken sich auf die einzelnen Produktdetailseiten aus. Beachte, dass einige dieser Optionen nur für Produkte mit mehreren Bildern gelten, weshalb einige Änderungen nicht angezeigt werden, wenn dein Produkt nur über ein Bild verfügt.

Mehr dazu erfährst du unter Shop-Seiten gestalten.

Die Stil-Optionen für deine Produkte hängen vom Template deiner Website ab und ob dein Template eine klassische, erweiterte oder einzigartige Shop-Seite verwendet.

Eine detaillierte Liste aller Produkt-Stil-Optionen findest du unter Shop-Seiten gestalten. Du kannst alle Produkt-Anpassungen auch in der Anleitung für die Stil-Anpassungen deines Templates sehen.

Ausblenden oder Einblenden von Features

Wie Sie verschiedene Website-Elemente und Features ausblenden oder anzeigen, hängt von der Version Ihrer Website ab.

Du kannst bestimmte Design-Features wie Social-Media-Symbole, Banner und Fußzeilen ausblenden, indem du den Block oder Abschnitt löschst. Öffne den Abschnitts-Editor, um die verschiedenen Optionen für diesen Abschnitt der Seite zu erkunden.

In einigen Vorlagen können Sie Designmerkmale wie Seitentitel, Symbole sozialer Netzwerke, Ränder, Banner und Footer ausblenden. Diese Anpassungen werden in der Regel im Abschnitt Optionen der Website-Stile vorgenommen. Eine Liste dieser Optionen findest du in der Anleitung zu Stil-Anpassungen deines Templates.

Änderungen speichern oder rückgängig machen

Du kannst Stiländerungen speichern, die vorherige Änderung rückgängig machen oder Bereiche deiner Website auf ihre Standardstile zurücksetzen.

Änderungen speichern

Nachdem du alle Stil- und Inhaltsänderungen vorgenommen hast, bewege den Mauszeiger oben links im Seiten-Editor über Fertig und klicke auf Speichern. Diese Änderung kann nicht rückgängig gemacht werden. Du kannst zwar zu den Standard-Stilen zurückkehren, jedoch kannst du bisherige Stil-Änderungen nach dem Speichern nicht wiederherstellen.

Änderungen rückgängig machen

Sie können die meisten Stiländerungen auf zwei verschiedene Arten rückgängig machen:

  • Klicke oben im Menü auf den Rückgängig-Pfeil. Dadurch wird die zuletzt vorgenommene Stil-Änderung rückgängig gemacht. Klicke mehrmals auf das Symbol, um fortlaufend weitere Änderungen rückgängig zu machen. Alternativ lässt sich eine Änderung auch per Klick auf den Wiederholen-Pfeil erneut vornehmen.
Tipp: Wenn du Website-Stile unter Version 7.1 bearbeitest, kannst du das Menü „Website-Stile“ schließen, um deinen Seiteninhalt zu bearbeiten und dabei weiterhin deine letzte Stil-Änderung rückgängig machen oder wiederherstellen.
  • In einigen Menüs kannst du auf den Punkt neben der Anpassung, die du geändert hast, klicken. Dadurch wird die Anpassung auf die zuletzt gespeicherte Änderung zurückgesetzt. Die Punkte bleiben sichtbar, bis du die Änderungen speicherst.

style_dot.png

Tipp: Wenn du eine Stil-Änderung vornimmst und diese anschließend wieder rückgängig machst, wird die Speicheroption nicht angezeigt. Die Option zum Speichern erscheint nur, wenn du eine Anpassung änderst und sie beibehältst.

Zurücksetzen auf Standard-Style

Du kannst einige Stil-Optionen auf die Standardwerte der Website zurücksetzen. Dadurch wird der Bereich auf den ursprünglichen Stil zurückgesetzt, der beim ersten Start deiner Website festgelegt wurde. Nach dem Speichern kann diese Änderung nicht rückgängig gemacht werden.

Eine detaillierte Schritt-für-Schritt-Anleitung findest du unter Neu anfangen.

Benutzerdefinierte CSS hinzufügen

Alle Squarespace-Websites steuern automatisch das CSS deiner Website ohne benutzerdefinierten Code. Wenn du aber mit CSS vertraut bist und eine gewünschte Änderung nicht in Website-Stil finden kannst, kannst du CSS im CSS-Editor hinzuzufügen.

Benutzerdefinierte CSS kann die Funktionalität Ihrer Website beeinträchtigen und sämtliche benutzerdefinierten Codes übersteigen den Rahmen der Kundenbetreuung von Squarespace.

Weitere Hilfe

Zusätzlich zu unseren Anleitungen bieten wir weitere Ressourcen an, die Ihnen helfen, den Stil Ihrer Website zu ändern:

  • Besuche die FAQ zu Stiländerungen, um Antworten auf häufig gestellte Fragen zu erhalten.
  • Nimm an einem einstündigen Webinar zum Thema Erste Schritte mit Squarespace teil, um die Grundlagen zur Einrichtung deiner Website zu erlernen, einschließlich der Erstellung von Seiten und der Anpassung von Website-Stilen.
  • Beauftrage über Squarespace Marketplace einen unabhängigen Designer damit, das Design deiner Website anzupassen.

Weitere Hilfe zu Version 7.0

Weitere Hilfe zu Stiländerungen in Version 7.0 finden Sie in diesem Video.

War dieser Beitrag hilfreich?
106 von 328 fanden dies hilfreich
Style-Änderungen vornehmen