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

Style-Änderungen vornehmen

Verwenden Sie die Optionen im Design-Menü, um Stiländerungen an Ihrer Website vorzunehmen. Sie können globale Stile bearbeiten, um Änderungen vorzunehmen, die auf die gesamte Website angewendet werden, um ein einheitliches Aussehen zu erzielen, oder Sie können einzelne Abschnitte formatieren.

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. Ein Video der Version 7.0 finden Sie im Abschnitt Weitere Hilfe.

Stil-Optionen in Version 7.1 vs. Version 7.0

Stiländerungen funktionieren je nach Version Ihrer Website unterschiedlich. Klicken Sie während der Verwendung dieser Anleitung auf den Tab für Ihre Version, um die Schritte für Ihre Website anzuzeigen.

Version 7.1

In unserer neuesten Version von Squarespace werden Stil-Optimierungen nach Typ im Design-Menü sortiert. Änderungen, die Sie im Design-Menü vornehmen, gelten in der Regel global, aber Sie können fein abgestimmte Änderungen vornehmen, indem Sie bestimmte Abschnitte oder Textbereiche gestalten.

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 verwenden Sie das Menü „Website-Stile“, um alle Stiländerungen vorzunehmen. Die Website-Stile jedes Template haben unterschiedliche Anpassungen, die in Abschnitten 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.

Um Änderungen für die gesamte Website vorzunehmen, verwenden Sie die Optionen im Design-Menü. Klicken Sie im Hauptmenü auf Design, und klicken Sie dann auf das Website-Element, das Sie ändern möchten, wie Schriftarten oder Farben. Verwenden Sie diese Anleitung, um detailliertere Schritte zu jedem Menü zu erhalten.

Sie können fein abgestimmte Änderungen vornehmen, indem Sie einen bestimmten Abschnitt bearbeiten. Um einen Abschnitt zu formatieren, bearbeiten Sie die Seite, bewegen Sie den Mauszeiger über den Abschnitt, und klicken Sie dann auf das Stiftsymbol. Abschnittsstile überschreiben Stile 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 Sie Stiländerungen an einem Sammlungsabschnitt vornehmen, wirkt sich dies auf alle Layouts dieses Typs aus. Wenn Sie beispielsweise über zwei Blogabschnitte verfügen, die beide ein Mauerwerk-Layout verwenden, wirken sich alle Stiländerungen, die Sie an einem Abschnitt vornehmen, auf beide Abschnitte aus.

So öffnen Sie Website-Stile.

  1. Klicken Sie im Hauptmenü auf Seiten
  2. Öffnen Sie die Seite, die Sie gestalten möchten. Öffnen Sie für Funktionen auf der gesamten Website wie Fußzeilen eine beliebige Seite. Öffnen Sie für Sammlungsinhalte einen beliebigen Sammlungsinhalt dieses Typs (z. B. einen Blogbeitrag oder einen Produktartikel).
  3. Kehren Sie zum Hauptmenü zurück, klicken Sie auf Design und dann auf Website-Stile.
  4. Klicken Sie im Menü „Website-Stile“ 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 Sie sich befinden. Alle Änderungen an diesen Anpassungen gelten für alle Seiten dieses Typs auf Ihrer Website. Wenn Sie beispielsweise Stiländerungen an einer Produkt-Seite vornehmen, gilt die gleiche Änderung für alle Produkt-Seiten auf Ihrer Website. Eine vollständige Liste der Optimierungen Ihres Template finden Sie in der Anleitung zur Stil-Anpassungen Ihres Template.

Tipp: Jede Cover-Seite wird separat gestaltet.

Klicken Sie im Vorschaufenster auf einen Bereich einer Seite, um die für diesen Bereich verfügbaren Stil-Anpassungen anzuzeigen und den Rest auszublenden. Das Textmarker-Feld wird um das Element, auf das Sie klicken, angezeigt. Kehren Sie zu allen Optionen zurück, indem Sie auf Alle anzeigen klicken. Diese Verknüpfung ist in den meisten Templates und für die meisten Bereiche Ihrer Website verfügbar.

So könnte das im 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

Sie können Stiländerungen in der Squarespace App auf beiden Versionen von Squarespace vornehmen.

Tipp: In Version 7.1 wird das Stil-Menü in der Squarespace-App mit Website-Stile und Website-Stil-Editor beschriftet, je nachdem, wo es geöffnet wird. Dies unterscheidet sich vom üblichen Design-Menü, das du auf einem Computer sehen würdest, aber die Optionen innerhalb des Menüs stimmen immer noch mit dem überein, was auf dem Computer angezeigt wird. 

So formatieren Sie eine Seite:

  1. Tippe auf Seiten und dann auf die Seite, auf der die Änderungen angewendet werden sollen. Dies veranlasst Website-Stile, nur Optionen anzuzeigen, die für die angezeigte Seite relevant sind, und du erhältst eine Vorschau deiner Änderungen. Wenn du eine Funktion veränderst, die für die gesamte Website gilt, wie z. B. Navigationsmenüs oder eine Fußzeile, kannst du eine beliebige Seite öffnen.
  2. Tippen Sie auf die Vorschauleiste, um die Seitenvorschau einzuklappen.
  3. Tippen Sie auf Einstellungen und dann auf Website-Stile
  4. Das Menü Stil-Editor wird von unten mit einer Liste von Unterbereichen und Stil-Anpassungen geöffnet. Tippen Sie auf eine beliebige Anpassung, um Änderungen vorzunehmen.

Schriftarten und Farben

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

Schriftarten

Wie Sie Schriftarten ändern, hängt von der Version Ihrer Website ab.

Um eine Schriftart zu ändern, klicken Sie auf Design und dann auf Schriftarten.

Im Menü „Schriftarten“ können Sie ein Schriftartpaket auswählen, das auf den gesamten Text auf Ihrer Website angewendet werden soll, oder die Schriftart bestimmter Texttypen ändern. Weitere Informationen finden Sie unter Schriftarten ändern.

In einem beliebigen Textbereich können Sie das Textformat auch in eine Überschrift, einen Absatztext oder einen Text mit einem Leerzeichen ä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 Ihrer Website zu ändern, klicken Sie im Hauptmenü auf Design und dann auf Farben.

Mit kuratierten Farbpaletten können Sie Änderungen an allen Farben Ihrer Website auf einmal vornehmen oder die Farben für einzelne Website-Elemente anpassen. Weitere Informationen zum Ändern von Website- und Abschnittsfarben finden Sie 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 oben, um Ihre Website zu navigieren. Wie Sie die Kopfzeile bearbeiten, hängt von der Version Ihrer Website ab.

Um die Kopfzeile Ihrer Website zu bearbeiten, klicken Sie oben links in der Seitenvorschau auf Bearbeiten, bewegen Sie den Mauszeiger über die Kopfzeile und klicken Sie auf Website-Kopfzeile bearbeiten. Verwenden Sie die Optionen im Editor, um Ihren Website-Titel oder Ihr Logo und Navigationslinks anzupassen. Sie können auch ein Warenkorb-Symbol, Social-Media-Symbole und einen Handlungsaufforderungs-Button 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 zu Templates

Einige Templates haben spezielle Funktionen in der Kopfzeile. Eine Liste der verfügbaren Features finden Sie unter Erstellen einer Website-Kopfzeile.

Fußzeile

Wie Sie Ihre Fußzeile gestalten, hängt von der Version Ihrer 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 Sie den Website-Abstand ändern, hängt von der Version Ihrer Website ab.

Um den Abstand Ihrer Website zu ändern, klicken Sie im Hauptmenü auf Design und dann auf Abstand.

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.

Sie können den Abstand einzelner Abschnitte im Abschnitt-Editor ä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 deine Vorlage eine Seitenleiste beinhaltet, kannst du deren Erscheinungsbild in Website-Stil verändern. Zum Beispiel kannst du in einigen Vorlagen 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, das Bildseitenverhältnis anpasst und Animationen anwendest. 

Bild-Blöcke

Wie Sie Bild-Blöcke gestalten, hängt von der Version Ihrer Website ab. Einige Block-Layouts verfügen über eigene Stil-Einstellungen für Schriftarten, Farben und Buttons im Design-Menü.

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.

Sie können ein Bannerbild auf jeder Seite erstellen, indem Sie oben auf der Seite einen Block-Abschnitt mit einem Hintergrundbild hinzufügen.

  • 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 können Sie 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 Sie den Hintergrund Ihrer Website ändern, hängt von der Version Ihrer 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 Sie Buttons gestalten, hängt von der Version Ihrer Website ab und ob der Button für die gesamte Website oder nur auf einer bestimmten Seite oder einem bestimmten Abschnitt angezeigt wird.

Detaillierte Schritte für alle Szenarien finden Sie unter Buttons gestalten.

Produkte

Wie Sie Produktartikel gestalten, hängt von der Version Ihrer Website ab.

Um die Shop-Seite zu gestalten, öffne die Abschnittsstile des Shops. Es werden Optionen zum Ändern des Abschnittsformats, des Hintergrunds und der Farben angezeigt. 

Um Produktartikel zu gestalten, öffnen Sie die Stil-Optionen im Design-Menü:

  1. Klicken Sie im Hauptmenü auf Design.
  2. Klicke auf Produktartikel.

Diese Einstellungen wirken sich auf die einzelnen Produktdetailseiten aus. Hinweis: Einige dieser Optionen gelten nur für Produkte mit mehreren Bildern. Dir werden daher möglicherweise keine Änderungen angezeigt, wenn dein Produkt nur über ein Bild verfügt.

Näheres erfährst du hier: Produkt-Seiten gestalten.

Die Stil-Optionen für Ihre Produkte hängen vom Template Ihrer Website ab und ob Ihr Template eine klassische, erweiterte oder einzigartige Produkt-Seite verwendet.

Eine detaillierte Liste der Produkt-Stiloptionen finden Sie auf Produkt-Seiten gestalten. Sie können auch alle Produkt-Anpassungen in der Anleitung für die Stil-Anpassungen Ihres Template sehen.

Ausblenden oder Einblenden von Features

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

Sie können bestimmte Design-Features wie Social-Media-Symbole, Banner und Fußzeilen ausblenden, indem Sie den Block oder Abschnitt löschen. Öffnen Sie den Abschnitt-Editor, um die verschiedenen Optionen für diesen Abschnitt der Seite zu erkunden.

In einigen Templates können Sie Design-Features wie Seitentitel, Social-Media-Symbole, Rahmen, Banner und Fußzeilen ausblenden. Diese Anpassungen finden Sie in der Regel im Abschnitt Optionen der Website-Stile. Eine Liste dieser Optionen finden Sie in der Anleitung zu Stil-Anpassungen Ihres Template.

Ä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 Änderungen vorgenommen hast und dir gefällt, was du siehst, klicke in der oberen linken Ecke auf Speichern. Diese Änderung kann nicht rückgängig gemacht werden. Du kannst zwar zu den Standardstilen 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:

  • Klicken Sie oben im Menü auf das Zurücksetzen-Symbol. Damit heben Sie die letzte vorgenommene Stil-Änderung auf. Klicken Sie mehrmals auf das Symbol, um fortlaufend weitere Änderungen rückgängig zu machen. Alternativ lässt sich eine Änderung auch per Klick auf das Wiederherstellen-Symbol erneut vornehmen.

theme_-_undo_and_redo.png

  • In einigen Menüs kannst du auf den Punkt neben der Anpassung, die du geändert hast, klicken. Dadurch wird eine bestimmte Stiländerung aufgehoben. Die Punkte bleiben sichtbar, bis du die Änderungen speicherst.

style_dot.png

Tipp: Wenn du eine Stil-Änderung durchführst und diese anschließend wieder rückgängig machst, wird die Option „Speichern“ oben im Menü nicht angezeigt. Die Option „Speichern“ wird nur dann angezeigt, wenn du eine Anpassung änderst und dies beibehältst.

Zurücksetzen auf Standard-Style

Für einige Stil-Optionen im Design-Menü kannst du den Stil auf die Standardwerte der Website zurücksetzen. Dadurch wird der Bereich auf die ursprüngliche Weise zurückgesetzt, wie er beim ersten Start deiner Website festgelegt wurde. Nach dem Speichern ist diese Änderung nicht rückgängig zu machen.

Detaillierte Schritte findest du unter Starting over (Neu anfangen). 

Benutzerdefinierte CSS hinzufügen

Alle Squarespace-Websites steuern automatisch das CSS Ihrer Website ohne benutzerdefinierten Code. Wenn Sie jedoch mit CSS vertraut sind und eine gewünschte Anpassung nicht in Website-Stile finden können, können Sie CSS im CSS-Editor hinzufü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:

Weitere Hilfe zu Version 7.0

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

War dieser Beitrag hilfreich?
66 von 203 fanden dies hilfreich
Style-Änderungen vornehmen