Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind 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.

Note: If you don't see Style Editor, click Site Styles instead. Learn more.

Making_style_changes.png

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.

Einige Sammlungselemente wie etwa Blog-Einträge oder Events verfügen über spezifische Anpassungen im Style Editor. Öffnen Sie den Style Editor, während Sie ein einzelnes Sammlungselement betrachten, um Änderungen vorzunehmen.

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

Klicken Sie im Style Editor auf einen Bereich einer Seite, um nur die für diesen Seitenbereich verfügbaren Style-Anpassungen anzuzeigen und die übrigen Anpassungen auszublenden. Die Style-Highlight-Box erscheint und umgibt das angeklickte Element. Diese Verknüpfung 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 Style-Anpassungen, die das Navigationsmenü steuern, werden genau wie im Beispiel unten im Style Editor angezeigt. Die anderen Style-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 zu „Style Editor-Anpassungen“.

nav_area_style_change.jpg

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

drag-spacers.gif

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

Some templates feature a site-wide or page background image added via the Style Editor. To add one, click the Background Image tweak or the corresponding image icon within the Style Editor. You can upload your own image or search and add a stock image.

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.

Häufig gestellte Fragen

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

I can't find the Style Editor

To find the Style Editor on most sites, go to the Home Menu, click Design, then click Style Editor.

On some new sites, we're testing a new look for style options. If you don't see Style Editor in the Design panel, click Site Styles instead. This panel includes all the features of the Style Editor, and also includes a theme switcher.

site-styles.png

Den Style Ihres Templates erkunden

Jedes Template bietet eigene Style-Optionen und Standardeinstellungen. Näheres zu den verschiedenen Styles eines Templates erfahren Sie in der folgenden Liste und der entsprechenden Anleitung Ihres Templates. Die Templates sind in Gruppen eingeteilt.

  • Die Anleitungen zu Struktur und Style enthalten Erklärungen zu den Style-Optionen Ihres Templates sowie entsprechende Beispielbilder. Dies ist ein großartiger Ausgangspunkt, wenn Sie gerade erst am Anfang Ihres Projekts stehen.
  • Die Anleitungen zu Style Editor-Anpassungen enthalten alle verfügbaren Anpassungen Ihres Templates. Dies ist ein guter Bezugspunkt, wenn Sie nicht mehr genau wissen, wie eine Anpassung bezeichnet wird oder in welchem Abschnitt des Style Editor sie sich befindet.
Adirondack Struktur und Style Style Editor-Anpassungen
Avenue Struktur und Style Style Editor-Anpassungen

Aviator-Gruppe

Aubrey, Aviator

Struktur und Style Style Editor-Anpassungen  

Bedford-Gruppe

Anya, Bryant, Bedford, Hayden

Struktur und Style Style Editor-Anpassungen

Brine-Gruppe

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Struktur und Style Style Editor-Anpassungen

Farro-Gruppe

Farro, Haute

Struktur und Style Style Editor-Anpassungen
Five Struktur und Style Style Editor-Anpassungen
Flatiron Struktur und Style Style Editor-Anpassungen
Forte Struktur und Style Style Editor-Anpassungen
Galapagos Struktur und Style Style Editor-Anpassungen
Ishimoto  Struktur und Style Style Editor-Anpassungen
Momentum  Struktur und Style Style Editor-Anpassungen

Montauk-Gruppe

Julia, Kent, Montauk, Om

Struktur und Style Style Editor-Anpassungen
Native  Struktur und Style Style Editor-Anpassungen

Pacific-Gruppe

Charlotte, Fulton, Horizon, Naomi, Pacific

Struktur und Style Style Editor-Anpassungen

Skye-Gruppe

Foundry, Indigo, Ready, Skye, Tudor 

Struktur und Style Style Editor-Anpassungen
Supply  Struktur und Style Style Editor-Anpassungen

Tremont-Gruppe

Camino, Carson, Henson, Tremont

Struktur und Style Style Editor-Anpassungen
Wells  Struktur und Style Style Editor-Anpassungen
Wexley  Struktur und Style Style Editor-Anpassungen

York-Gruppe

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York 

Struktur und Style Style Editor-Anpassungen
War dieser Beitrag hilfreich?
48 von 113 fanden dies hilfreich
Style-Änderungen vornehmen