Anmerkung: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind andere Anleitungen bisher nur auf Englisch verfügbar
Style-Änderungen vornehmen

Style-Änderungen sind Bearbeitungen des Aussehens Ihrer Website, wie Schriftarten, Hintergründe und Abstände. Sie können über den Style Editor solche Style-Änderungen durchführen und dort auch eine Vorschau erhalten.

Der Style Editor jedes Templates weist verschiedene Optionen auf, die  "Anpassungen" genannt werden. In dieser Anleitung erfahren Sie, wie Sie den Style Editor einsetzen können, um das Design Ihrer Website zu perfektionieren. Darüber hinaus werden sämtliche Anpassungen erklärt, die Sie in unseren Templates finden. 

Wir empfehlen, dass Sie mit dem Style Editor herumexperimentieren, während Sie Ihre Website bauen. Indem Sie die Anpassungen Ihres Templates ausprobieren, erhalten Sie einen Eindruck davon, welche Möglichkeiten Ihr Template bietet und wie Sie ein Design erhalten können, dass Sie wirklich mögen.

Ein Video anschauen

Style Editor öffnen

Klicken Sie im Home Menu (Hauptmenü) auf Pages (Seiten). Öffnen Sie eine Seite, auf der die Änderungen angewendet werden sollen. Dies veranlsst den Style Editor, diejenigen Optionen anzuzeigen, die für die angezeigte Seite gelten und erlaubt Ihnen, einen Vorschau von Ihren Änderungen zu erhalten. (Wenn Sie ein Feature verändern, dass für die gesamte Website gilt wie Navigation-Menüs oder eine Fußzeile, können Sie eine beliebige Seite öffnen.)

Wenn Sie einmal auf der richtigen Seite sind, doppelklicken Sie oben im Menü auf Pages (Seiten), um in das Home Menu (Hauptmenü) zurückzukommen. Klicken Sie auf Design (Design) und anschließend auf Style Editor.

Der Style Editor öffnet sich mit einer Liste der bearbeitbaren Style-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 nicht möglich, wenn der Style Editor geöffnet ist. Um Inhalte hinzuzufügen oder zu entfernen, schließen Sie den Style Editor und öffnen Sie das Menü der Pages (Seiten) .

Seiten-spezifische Styles ansehen

Wenn Sie die Vorschau eines Seiten-Typs im unteren Teil des Style Editors betrachten, sehen Sie einen Bereich mit Anpassungen, die für diesen Seiten-Typ spezifisch sind. Um diese Anpassungen angezeigt zu bekommen, öffnen Sie zuerst die Seite und navigieren Sie anschließend zum Style Editor.

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

Hinweis: Wenn eine Cover-Seite im Style Editor geöffnet ist, dann werden Ihnen nur die Verfeinerungen für Cover-Seiten angezeigt.Erfahren Sie mehr unter Den Style einer Cover-Seite anpassen.

Eine Style-Anpassung finden

Wenn Sie im Style Editor sind, klicken Sie auf einen Bereich einer Seite, um nur die für diesen Seitenbereich verfügbaren Style-Anpassungen angezeigt zu bekommen und die übrigen auszublenden. Diese Verknüpfung steht in den meisten Templates und für die meisten Bereiche Ihrer Website zur Verfügung.

Zum Beispiel, um das Erscheinungsbild Ihres Navigationsmenüs zu verändern, klicken Sie auf ein Navigationsmenü in der Vorschau.Die Style-Anpassungen, die das Navigationsmenü steuern werden im Style Editor angezeigt. Die anderen Style-Anpassungen werden ausgeblendet.

Alternativ blendet auch ein Klick auf die Navigation die möglichen Anpassungen ein, wie im unteren Beispiel gezeigt.

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

nav_area_style_change.jpg

Häufige Style-Änderungen

Während jeder Style Editor über Dutzende von Anpassungen verfügt, gibt es einige Änderungen, die allen gemeinsam sind und häufig durchgeführt werden.

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.

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.

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.

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.

Hintergrundbild

Einige Templates unterstützen ein Hintergrundbild, dass für einzelne Seiten oder die gesamte Website über den Style Editor hinzugefügt werden kann. Um solch ein Bild hinzuzufügen, klicken Sie auf die Anpassung Background Image (Hintergrundbild) oder das entsprechende Bild-Symbol innerhalb des Style Editors. Sie können Ihr eigenes Bild hochladen oder eines mit einer Lizenz von Getty Images für 10 USD erwerben.

Erfahren Sie mehr unter Ein Hintergrundbild hinzufügen.

Banner-Bild

Einige Templates unterstützen websiteübergreifende Banner-Bilder. Diese lassen sich über den Style Editor hinzufügen. Klicken Sie auf die Anpassung Banner Image (Banner-Bild), Header Image (Kopfzeilen-Bild) oder auf das dazugehörige Bildsymbol im Style Editor.

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 Ein Banner-Bild hinzufügen.

Seitenleiste

Wenn Ihr Template eine Seitenleiste beinhaltet, können Sie deren Erscheinungsbild im Style Editor verändern. Zum Beispiel, können Sie in einigen Templates die Seitenleiste rechts oder links anzeigen lassen. Um die Style-Anpassung für die Seitenleiste angezeigt zu bekommen, klicken Sie auf die Seitenleiste in der Seitenvorschau oder suchen Sie im Style Editor nach der Überschrift Sidebar (Seitenleiste).

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

Ausblenden und Einblenden

In einigen Templates können Sie Design-Features wie Ihre Seitenbeschreibung, Seitentitel, Social Media-Logos, Rahmen, Banner und Fußzeilen ausblenden. Diese Anpassung besitzen gewöhnlich Häkchen, die im Bereich der Options (Optionen) angeklickt werden können.

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 Style-Ä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 rückgängig machen. 

undo_icon.jpg

  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.

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

Sobald Sie alle Änderungen durchgeführt haben und mit dem Ergebnis zufrieden sind, klicken Sie auf Save (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.

click_save.jpg

Zurücksetzen auf Standard-Style

Um noch einmal von vorne zu beginnen, können Sie den Style Ihrer Website auf die Standard-Einstellungen Ihres Templates zurücksetzen. Auf diese Weise lassen sich die ursprünglichen Schriftarten, Farben und auch das Padding des Templates wiederherstellen.

  1. Scrollen Sie bis zum unteren Ende des Style Editor und klicken Sie auf Reset Styles to Defaults (Style-Einstellungen zurücksetzen).
  2. Prüfen Sie die Bestätigungsmeldung und klicken Sie dann auf Reset (Zurücksetzen).
  3. Nach dem Speichern des Style Editor wird Ihr Template auf die ursprünglichen Style-Einstellungen zurückgesetzt.
Hinweis: Nach dem Speichern des Style Editor kann diese Änderung nicht mehr rückgängig gemacht werden.

Benutzerdefinierte CSS hinzufügen

Der Style Editor steuert die CSS Ihrer Website ohne benutzerdefinierten Code. Jedoch besteht die Möglichkeit, wenn Sie mit CSS vertraut sind und eine Änderung, die Sie benötigen, im Style Editor nicht finden, dass Sie CSS über den CSS Editor hinzufügen können.

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

Den Style Ihres Templates erkunden

Jedes Template hat eigene einzigartige Style-Optionen und Standard-Einstellungen. Näheres zu den Anpassungsmöglichkeiten eines bestimmten Templates erfahren Sie in der folgenden Liste und der jeweiligen Anleitung zu Struktur und Style Ihres Templates. Die Templates sind in Gruppen eingeteilt.

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