Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Style-Änderungen vornehmen

Website-Stil-Änderungen sind Bearbeitungen des Erscheinungsbildes Ihrer Website, wie z. B. Schriftarten, Farben, Hintergründe und Abstände. Sie können über das Menü „Website-Stile“ Stil-Änderungen vornehmen und dort auch eine Vorschau von diesen erhalten.

Im Menü „Website-Stile“ jedes Templates finden Sie unterschiedliche Optionen, die als „Anpassungen“ bezeichnet werden. In dieser Anleitung erfahren Sie, wie Sie Website-Stile einsetzen können, um das Design Ihrer Website zu perfektionieren. Darüber hinaus werden sämtliche Anpassungen erklärt, die Sie in unseren Vorlagen finden.

Wir empfehlen, dass Sie mit „Website-Stil“ experimentieren, während Sie Ihre Website erstellen. Indem Sie die Anpassungen Ihrer Vorlage ausprobieren, erhalten Sie einen Eindruck davon, welche Möglichkeiten Ihr Template bietet und wie Sie ein Design erhalten können, das wirklich Ihren Vorstellungen entspricht.

Tipp: Das Menü „Website-Stil“ wurde zuvor als „Website-Stil-Editor“ bezeichnet.
Die Schritte in dieser Anleitung beziehen sich auf Version 7.0. Wenn Ihre Website Version 7.1 nutzt, gehen Sie zu Stil- und Design-Optionen für Version 7.1, um Hilfe zu erhalten.

Ein Video anschauen

Öffnen Sie Website-Stil

Klicken Sie im Hauptmenü auf Seiten. Öffnen Sie eine Seite, auf der die Änderungen angewendet werden sollen. Dies veranlasst Website-Stil, nur Optionen anzuzeigen, die für die angezeigte Seite relevant sind, und Sie erhalten eine Vorschau Ihrer Änderungen. (Wenn Sie eine Funktion verändern, die für die gesamte Website gilt, wie z. B. Navigationsmenüs oder eine Fußzeile, können Sie eine beliebige Seite öffnen.)

Wenn Sie auf der richtigen Seite sind, doppelklicken Sie oben im Panel auf Seiten, um zum Hauptmenü zurückzukehren. Klicken Sie auf Design und dann auf Website-Stile. Das Menü Website-Stile öffnet sich mit einer Liste der bearbeitbaren Stil-Anpassungen.

Die Anpassungen sind Bereich gruppiert, wie General (Allgemein), Site Header (Kopfzeile) und Main Content (Hauptinhalte). Die für Ihr Template spezifischen Anpassungen finden Sie gewöhnlich unter Options (Optionen).

Klicken Sie auf die einzelnen Anpassungen, um Änderungen durchzuführen.

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

Seiten-spezifische Styles ansehen

Wenn Sie die Vorschau eines der folgenden Seiten-Typen in Website-Stil betrachten, sehen Sie einen Abschnitt mit Anpassungen, die für diesen Seiten-Typ spezifisch sind. Um diese Anpassungen anzuzeigen, öffnen Sie zunächst die Seite und navigieren Sie anschließend zu Website-Stil.

  • Cover-Seite (Beachten Sie den unteren Hinweis)
  • Blog-Seite
  • Event-Seite
  • Galerie-Seite
  • Index-Seite
  • Produkt-Seite

Jegliche Änderungen dieser Verfeinerungen gelten für alle Seiten des gleichen Typs innerhalb Ihrer Website. Zum Beispiel, wenn Sie mehrere Produkt-Seiten angelegt haben und Style-Änderungen spezifisch für Produkt-Seiten durchführen, dann gelten diese Änderungen für alle Produkt-Seiten. Dies verleiht Ihrer Website ein einheitliches Erscheinungsbild.

Einige Sammlungsinhalte wie etwa Blogeinträge oder Veranstaltungen verfügen außerdem über inhaltsspezifische Anpassungen in Website-Stil. Öffnen Sie Website-Stil, während Sie einen einzelnen Sammlungsinhalt betrachten, um Änderungen vorzunehmen.

Hinweis: Wenn eine Titelseite in Website-Stil geöffnet ist, werden Ihnen nur Titelseiten-Anpassungen angezeigt. Mehr dazu erfahren Sie unter Eine Titelseite gestalten.

Eine Style-Anpassung finden

Klicken Sie in Website-Stil auf einen Bereich einer Seite, um nur die für diesen Seitenbereich verfügbaren Stil-Anpassungen anzuzeigen und die übrigen Anpassungen auszublenden. Der Stil-Highlighter-Rahmen erscheint rund um das angeklickte Element. Diese Abkürzung steht in den meisten Templates und für die meisten Bereiche Ihrer Website zur Verfügung.

Zur Änderung des Erscheinungsbildes Ihres Navigationsmenüs können Sie beispielsweise in der Vorschau auf einen Navigationslink klicken. Die Stil-Anpassungen, die das Navigationsmenü steuern, werden, wie im Beispiel unten zu sehen, in Website-Stil angezeigt. Die restlichen Stil-Anpassungen werden ausgeblendet.

Kehren Sie zu der Anzeige aller Optionen zurück, indem Sie auf Show All (Alle anzeigen) klicken.

Hinweis: Eine vollständige Liste aller Anpassungen Ihres Templates finden Sie in unserer Liste der Anleitungen für „Website-Stil-Anpassungen“.

Wenn Sie auf ein Element auf der Seite klicken, werden die für diesen Bereich verfügbaren Stil-Anpassungen angezeigt.

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

Bei der Vorlage „Five“ lässt sich der Freiraum um den Banner-Bereich durch Anklicken und Ziehen anpassen.

Häufige Style-Änderungen

Während „Website-Stil“ für jedes Template über Dutzende von Anpassungen verfügt, gibt es einige Aspekte, die alle gemeinsam haben.

Typografie

Um Schriftart und Schriftgröße zu ändern, benutzen Sie die Anpassungen für  Typography (Typographie)oder Font (Schriftart) . Näheres erfahren Sie hier: Schriftarten ändern.

Schriften können mit Typografie- oder Schriftart-Anpassungen geändert werden.

Farben

Um die Farben zu ändern, wählen Sie irgendeine Anpassung mit einem color circle (Farbkreis) neben der Beschriftung aus. Näheres erfahren Sie hier: Farben ändern.

Farbkreise erscheinen neben Farb-Anpassungen.

Größen und Werte

Viele Style-Änderungen sind mit der Größe verbunden, wie Padding, Abstände, Breiten oder Rahmen. Diese Verfeinerungen können unter der Überschrift Sizes & Values (Größen und Werte) gefunden werden. In Abhängigkeit von Ihrem Template können sie ebenfalls in anderen Bereichen zu finden sein. Die Größen werden gewöhnlich in Pixel (px) angegeben.

Um diese Style-Änderung durchzuführen, fahren Sie mit der Maus über eine Größen-Verfeinerung. Benutzen Sie den Schieberegler oder geben Sie eine Zahl in das Feld ein.

Die Anpassung der Schieberegler beeinflusst die Größe von Freiräumen, Rändern und anderen Elementen.

Seitenverhältnis

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

Wenn das Seitenverhältnis auf Auto (Automatisch)eingestellt ist, wird das Bild so angepasst, wie es am besten auf die Seite passt. Es kann sein, dass die Bilder in einer anderen Reihenfolge angezeigt werden, als sie hochgeladen worden sind.

Verschiedene Seitenverhältnis-Optionen in einem Drop-Down-Menü.

Hintergrundbild

Einige Vorlagen unterstützen ein Hintergrundbild, das für einzelne Seiten oder die gesamte Website über Website-Stil hinzugefügt werden kann. Um solch ein Bild hinzuzufügen, klicken Sie auf die Anpassung Hintergrundbild oder das entsprechende Bild-Symbol unter Website-Stil. Sie können Ihr eigenes Bild hochladen oder ein Agenturbild suchen und hinzufügen.

Erfahren Sie mehr unter Ein Hintergrundbild hinzufügen.

Einige Vorlagen haben eine Anpassung für das Website-Hintergrundbild.

Banner-Bild

Einige Vorlagen unterstützen ein Banner-Bild, das für die gesamte Website gilt und über Website-Stil hinzugefügt werden kann. Klicken Sie auf die Anpassung Banner-Bild, Kopfzeilen-Bild oder auf das entsprechende Bild-Symbol in Website-Stil.

Um Bilder für einzelne Seiten hinzuzufügen, öffnen Sie die Seiteneinstellungen der jeweiligen Seite, klicken Sie auf den Reiter Media (Medien) und laden Sie dann ein Bild hoch.

Erfahren Sie mehr unter Banner-Bilder hinzufügen.

Einige Vorlagen haben eine „Kopfzeilen-Hintergrundbild“-Anpassung für Banner, die für die gesamte Website gilt.

Seitenleiste

Wenn Ihre Vorlage eine Seitenleiste beinhaltet, können Sie deren Erscheinungsbild in Website-Stil verändern. Zum Beispiel, können Sie in einigen Vorlagen die Seitenleiste rechts oder links anzeigen lassen. Um die Stil-Anpassungen für die Seitenleiste zu sehen, klicken Sie auf die Seitenleiste in der Seitenvorschau oder suchen Sie in Website-Stile nach der Überschrift Seitenleiste.

Hier sehen Sie ein Beispiel, wie eine Seitenleisten-Anpassung von Ihrem Template aussehen kann.

Seitenleisten-Anpassungen werden angezeigt, wenn Ihre Vorlage über eine Seitenleiste verfügt.

Ausblenden und Einblenden

In einigen Vorlagen können Sie Designmerkmale wie Seitentitel, Symbole sozialer Netzwerke, Rahmen, Banner und Fußzeilen ausblenden. Diese Anpassungen werden in der Regel über Kontrollkästchen vorgenommen, die im Abschnitt Optionen zu finden sind.

Das Aktivieren oder Deaktivieren bestimmter Anpassungen verbirgt oder ändert anderweitig Elemente der Website.

Eine Style-Änderung rückgängig machen

Style-Änderungen können auf zwei unterschiedlichen Wegen rückgängig gemacht werden:

  1. 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.

Klicken Sie auf das Rückgängig-Symbol, um Stil-Änderungen rückgängig zu machen.

  1. Klicken Sie auf den Punkt neben der geänderten Anpassung. Damit lassen sich bestimmte Style-Änderungen in beliebiger Reihenfolge rückgängig machen. Die Punkte werden eingeblendet, bis Sie Ihre Änderungen gespeichert haben.

Klicken Sie auf den Punkt neben einer Stil-Anpassung, um eine kürzliche Änderung rückgängig zu machen.

Hinweis: Wenn Sie eine Style-Änderung durchführen und diese anschließend wieder rückgängig machen, wird die Speichern-Option oben im Menü nicht angezeigt. Die Speichern-Option erscheint nur, wenn Sie eine Anpassung ändern und dies beibehalten.

Änderungen speichern

Nachdem Sie alle Änderungen vorgenommen haben und Ihnen gefällt, was Sie sehen, klicken Sie oben links auf Speichern. Die Änderungen werden dann auf Ihrer Live-Website erscheinen.

Hinweis: Diese Änderung ist nicht umkehrbar. Sie können den Standard-Style des Templates wiederherstellen, jedoch keine vorangegangenen Style-Änderungen.

Zurücksetzen auf Standard-Style

Um noch einmal von vorne zu beginnen, können Sie den Stil Ihrer Website auf die Standard-Einstellungen Ihrer Vorlage zurücksetzen. Auf diese Weise lassen sich die ursprünglichen Schriftarten, Farben und auch der Freiraum der Vorlage wiederherstellen.

  1. Scrollen Sie bis zum unteren Ende von Website-Stil und klicken Sie auf Stil auf Standard zurücksetzen.
  2. Prüfen Sie die Bestätigungsmeldung und klicken Sie dann auf Reset (Zurücksetzen).
  3. Nach dem Speichern in Website-Stil wird Ihr Template dann auf das ursprüngliche Standard-Design zurückgesetzt.
Hinweis: Nach dem Speichern in Website-Stile kann diese Änderung nicht mehr rückgängig gemacht werden.

Benutzerdefinierte CSS hinzufügen

Website-Stil steuert die CSS Ihrer Website ohne benutzerdefinierten Code. Wenn Sie mit CSS vertraut sind und eine Änderung, die Sie benötigen, in Website-Stil nicht finden können, besteht jedoch die Möglichkeit, 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.

Häufig gestellte Fragen

Weitere Hilfestellungen erhalten Sie hier: Häufig gestellte Fragen zu Style-Änderungen.

Den Style Ihres Templates erkunden

Jedes Template bietet ganz eigene Stil-Optionen und Standardeinstellungen. Näheres dazu erfahren Sie in unseren ausführlichen Layout-Anleitungen.

War dieser Beitrag hilfreich?
57 von 150 fanden dies hilfreich
Style-Änderungen vornehmen