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

Style changes are edits to the look of your site, like fonts, colors, backgrounds, and spacing. You can make and preview style changes in the Site Styles panel. 

Each template's Site Styles has different options called "tweaks." This guide covers how to use Site Styles to perfect your site's design and explains tweaks found in all of our templates. 

We recommend experimenting with Site Styles as you build your site. By testing your template's tweaks, you'll get a grasp of what's possible in your template and reach a design you'll love.

Tip: The Site Styles panel used to be called the Style Editor.

Open Site Styles

In the Home Menu, click Pages. Open a page where you want the changes to apply. This tells Site Styles to show options relevant to the page you're seeing and allows you to preview your changes. (If you're changing a site-wide feature like navigation menus or a footer, open any page.) 

Once on the right page, double-click Pages at the top of the panel to return to the Home Menu. Click Design, and then click Site Styles. The Site Styles panel will open with a list of editable style tweaks.

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.

Note: Site editing is disabled when Site Styles is open. To add or remove content, close Site Styles and open the Pages panel.

Seiten-spezifische Styles ansehen

When you preview a page type below in Site Styles, you'll see a section of tweaks specific to the page type. To view these tweaks, first open the page, and then navigate to Site Styles.

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

Some collection items, like blog posts or events, also have item-specific Site Styles tweaks. To make changes, open Site Styles while viewing an individual collection item.

Note: When a Cover Page is open in Site Styles, you'll only see Cover Page tweaks. To learn more, visit Styling a Cover Page.

Eine Style-Anpassung finden

When in Site Styles, click an area of a page to display the style tweaks available for that area and hide the rest. The style highlighter box appears around the element you're clicking. This shortcut is available in most templates and for most areas on your site.

For example, to change the appearance of your navigation menu, click a navigation link in the preview. The style tweaks that control the navigation menu will display in Site Styles, as shown in the example below. The other style tweaks will be hidden.

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

Note: For a full list of your template's tweaks, see our list of "Site Styles tweaks" guides.

styles.png

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

drag-spacers.gif

Häufige Style-Änderungen

While each template's Site Styles has dozens of tweaks, there are some common trends between them.

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 Site Styles. To add one, click the Background Image tweak or the corresponding image icon within Site Styles. You can upload your own image or search and add a stock image.

Erfahren Sie mehr unter Ein Hintergrundbild hinzufügen.

Banner-Bild

Some templates feature a site-wide banner image you can add from Site Styles. Click the Banner Image tweak, Header Image tweak, or the corresponding image icon within Site Styles.

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

If your template includes a sidebar, you can change its appearance in Site Styles. For example, in some templates, you can move the sidebar to the left or right. To find the sidebar style tweaks, click on the sidebar in the page preview or look for the Sidebar heading in Site Styles. 

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

Ausblenden und Einblenden

In some templates, you can hide design features like page titles, social icons, borders, banners, and footers. These tweaks are usually checkmarks found in the Options section.

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. Scroll to the bottom of Site Styles and click Reset Styles to Defaults.
  2. Prüfen Sie die Bestätigungsmeldung und klicken Sie dann auf Reset (Zurücksetzen).
  3. After saving Site Styles, your template will reset to its default styles.
Note: After saving Site Styles, this change isn't reversible.                       

Benutzerdefinierte CSS hinzufügen

Site Styles controls your site's CSS without custom code. However, if you're familiar with CSS and you can't find a change you need in Site Styles, you can add CSS in the CSS Editor.

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 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.
  • Site Styles tweaks guides list all available tweaks for your template. They're a good reference when you're trying to remember a tweak's name or what section of Site Styles it's in.
Adirondack Struktur und Style Site Styles tweaks
Avenue Struktur und Style Site Styles tweaks

Aviator-Gruppe

Aubrey, Aviator

Struktur und Style Site Styles tweaks  

Bedford-Gruppe

Anya, Bryant, Bedford, Hayden

Struktur und Style Site Styles tweaks

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 Site Styles tweaks

Farro-Gruppe

Farro, Haute

Struktur und Style Site Styles tweaks
Five Struktur und Style Site Styles tweaks
Flatiron Struktur und Style Site Styles tweaks
Forte Struktur und Style Site Styles tweaks
Galapagos Struktur und Style Site Styles tweaks
Ishimoto  Struktur und Style Site Styles tweaks
Momentum  Struktur und Style Site Styles tweaks

Montauk-Gruppe

Julia, Kent, Montauk, Om

Struktur und Style Site Styles tweaks
Native  Struktur und Style Site Styles tweaks

Pacific-Gruppe

Charlotte, Fulton, Horizon, Naomi, Pacific

Struktur und Style Site Styles tweaks

Skye-Gruppe

Foundry, Indigo, Ready, Skye, Tudor 

Struktur und Style Site Styles tweaks
Supply  Struktur und Style Site Styles tweaks

Tremont-Gruppe

Camino, Carson, Henson, Tremont

Struktur und Style Site Styles tweaks
Wells  Struktur und Style Site Styles tweaks
Wexley  Struktur und Style Site Styles tweaks

York-Gruppe

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

Struktur und Style Site Styles tweaks
War dieser Beitrag hilfreich?
49 von 115 fanden dies hilfreich
Style-Änderungen vornehmen