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

Stil- und Design-Optionen für Version 7.1

Verwenden Sie die globalen Stil-Optionen von Squarespace Version 7.1, um umfangreiche Stil-Änderungen an Ihrer Website vorzunehmen. Dies schafft ein einheitliches Erscheinungsbild für einen einheitlichen Markenauftritt. Sie können auch einzelne Abschnitte gestalten und Portfolio-Seiten verwenden, um Landing-Pages zu erstellen, die auf Ihre Inhalte verlinken.

Diese Anleitung behandelt die Design- und Stil-Optionen für Version 7.1. Um Ihrer Website Inhalte hinzuzufügen, gehen Sie zu Seitenabschnitte.

Tipp: Diese Anleitung ist für Version 7.1. Für Websites in Version 7.0 besuche Vornehmen von Stiländerungen. Wenn du nicht sicher bist, auf welcher Version sich deine Website befindet, besuche Welches Template und welche Version hat meine Website?

Ein Video anschauen

Schriftarten

Klicke zum Öffnen des Schriftarten-Menüs auf Design und anschließend auf Schriftarten.

Im Menü „Schriftarten“ kannst du ein Schriftpaket auswählen, das auf den gesamten Text auf deiner Website angewendet werden soll, oder die Schriftart bestimmter Texttypen ändern. Weitere Informationen zum Auswählen und Formatieren von Schriftarten findest du unter Ändern von Schriftarten.

Text formatieren

Markiere einen beliebigen Text auf der Seite und verwende die Symbolleistensymbole, um Formatierungen anzuwenden. Du kannst aus diesen Textformaten auswählen:

  • Heading 1
  • Heading 2
  • Heading 3
  • Überschrift 4
  • Absatz 1
  • Absatz 2
  • Absatz 3
  • Monospace

Links

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

Farben

Um die Farben deiner Website zu formatieren, klicke im Hauptmenü auf Design und dann auf Farben.

Mit kuratierten Farbpaletten kannst du Änderungen an allen Farben deiner Website auf einmal vornehmen oder die Farben für einzelne Website-Elemente anpassen. Weitere Informationen zum Ändern von Website- und Abschnittsfarben findest du unter Farben ändern.

Animationen

Um visuelles Interesse hinzuzufügen, kannst du das Animations-Menü verwenden, um deine Inhalte auf subtile Weise zu animieren, während sich Besucher durch deine Website bewegen. Weitere Informationen findest du unter Site-weiten Animationen.

Schaltflächen

Um die Buttons deiner Website zu gestalten, klickst du im Hauptmenü auf Design und dann auf Buttons. In einigen Fällen beeinflussen Anpassungen nicht jeden Button auf deiner Website. Um beispielsweise das Layout „Newsletter-Block“ beizubehalten, hat die Padding-Anpassung keine Auswirkungen auf Newsletter-Buttons.

Buttons folgen den globalen Farben und Schriftarten Ihrer Website.

Button-Blöcke und Blöcke mit integrierten Buttons wie Newsletter-Blöcken haben zusätzliche Stil-Optionen:

  1. Klicken Sie für diese Seite auf Bearbeiten.
  2. Bewegen Sie den Mauszeiger über den Block, und klicken Sie auf das Stiftsymbol, um Text und Ausrichtung zu ändern. Sie können auch die Größe von Button-Blöcken anpassen.

Abstände

Um die Abstände deiner Website zu gestalten, klicke im Hauptmenü auf Design und dann auf Abstände.

Du kannst diese Anpassungen bearbeiten:

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

Du kannst die Abstände der einzelnen Abschnitte mithilfe von Abschnittsstile ändern.

Produktartikel-Stile

Um Produktartikel zu gestalten, öffne eine Produktdetail-Seite und klicke oben links auf Design bearbeiten.

Du kannst auch im Design-Menü auf die Stil-Optionen zugreifen:

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

Diese Einstellungen wirken sich auf die einzelnen Produktdetailseiten aus. Denken Sie daran, dass einige dieser Optionen nur für Produkte mit mehreren Bildern gelten, sodass Sie möglicherweise keine Änderungen sehen, wenn Ihr Produkt nur über ein Produkt verfügt. Weitere Informationen finden Sie unter Styling Products Pages.

Bild-Block-Stile

So gestalten Sie Bild-Blöcke:

  1. Klicke im Hauptmenü auf Design und dann auf Bild-Blöcke.
  2. Klicken Sie auf den Block, den Sie gestalten möchten, um Anpassungen zu finden, die für diesen Block gelten.

Weitere Informationen zu Bild-Block-Stilen findest du unter Bild-Blöcke.

Hintergrund

So ändern Sie den Hintergrund:

  • Verwenden Sie das Farben-Menü, um den Website-Hintergrund zu ändern.
  • Verwenden Sie Abschnitts-Stile, um die Hintergrundfarbe einzelner Abschnitte zu ändern oder Hintergrundbilder oder Videos hinzuzufügen. Dazu gehören auch Footer-Abschnitte.
  • Wenn für einen Abschnitt ein Hintergrundbild auf Einrückung gesetzt ist, kannst du 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.

Banner

So erstellen Sie ein Banner:

  1. Klicken Sie in der linken oberen Ecke auf Bearbeiten.
  2. Fügen Sie einen Block-Abschnitt hinzu und klicken Sie auf dessen Bleistiftsymbol.
  3. Klicken Sie auf Hintergrund, um ein Bild oder Video hinzuzufügen.
  4. Klicken Sie auf Farben, um einen beliebigen Overlay-Text zu gestalten und eine Overlay-Farbe hinzuzufügen.
  5. Füge unten zusätzliche Blockabschnitte für den Seiteninhalt hinzu.

Tipps:

  • Wenn Sie nur ein Banner-Bild möchten, fangen Sie mit einem leeren Abschnitt an.
  • 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.

Kopfzeile

Besucher verwenden die Kopfzeile am Seitenanfang, um durch deine Website zu navigieren. In Version 7.1 enthält die Kopfzeile den Seitentitel oder das Logo und Navigationslinks. Du kannst ein Warenkorb-Symbol, Social-Media-Symbole und einen Button zur Handlungsaufforderung hinzufügen.

Weitere Informationen findest du unter Eine Website-Kopfzeile erstellen.

Fußzeile

So bearbeiten Sie Ihren Footer:

  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. Fügen Sie mit Abschnitten Inhalte zu Ihrem Footer hinzu.

Zurücksetzen auf Standard-Style

Bei einigen Stil-Optionen im Design-Menü kannst du den Stil auf die Standardeinstellungen der Seite zurücksetzen. Dadurch wird der Bereich auf die ursprüngliche Art und Weise zurückgesetzt, wie er beim ersten Start der Site festgelegt wurde.

  1. Klicke im Hauptmenü auf Design, und klicke dann auf den Bereich, den du zurücksetzen möchtest.
  2. Scrolle bis zum unteren Rand des Menüs, und klicke auf Stil auf Standard zurücksetzen.
  3. Klicke zum Bestätigen auf Zurücksetzen.
  4. Klicken Sie auf Speichern.
Hinweis: Nach dem Speichern kann diese Änderung nicht mehr rückgängig gemacht werden.

Abschnittsstile

Um einen Abschnitt zu gestalten, bearbeite die Seite, fahre mit der Maus über den Abschnitt und klicke dann auf das Bleistiftsymbol. 

pencil-icon.png

Hier können Sie außerdem verschiedene Layouts für Sammlungs- und Galerie-Abschnitte auswählen.

Wenn Sie Stil-Änderungen an einem Sammlungs-Abschnitt vornehmen, wirkt sich dies auf alle Layouts dieses Typs aus. Wenn Sie beispielsweise zwei Blog-Abschnitte haben und beide ein Mauerwerk-Layout verwenden, wirken sich alle von Ihnen vorgenommenen Stil-Änderungen, wie z. B. die Ausrichtung des Textes, auf beide Abschnitte aus.

Abschnittsstile überschreiben globale Stile.

Templates in Version 7.1

Alle Websites in Version 7.1 basieren auf demselben Template. Das bedeutet:

  • Sie alle haben die gleichen Stil-Optionen und Funktionen.
  • Sie alle verwenden Abschnitte, um Inhalte zu Seiten hinzuzufügen.

Es ist nicht erforderlich, das Template zu wechseln, weshalb diese Option in Version 7.1 nicht verfügbar ist. Tun Sie stattdessen Folgendes, um verschiedene Looks für Ihre Website auszuprobieren:

  • Ändern Sie Ihre globalen Stile.
  • Fügen Sie neue Seiten mit verschiedenen vordefinierten Seitenlayouts hinzu.
  • Erstellen Sie neue Abschnitte, um das Erscheinungsbild einer Seite zu ändern. Fügen Sie beispielsweise oben auf der Seite einen Abschnitt mit einem Hintergrundbild hinzu, um ein Seiten-Banner zu erstellen.

Um mehr zu erfahren, lesen Sie Squarespace Version 7.1 vs. Squarespace Version 7.0.

Mehr in einem Webinar erfahren

Zusätzlich zu unseren Anleitungen und Video-Anleitungen bieten wir ein Webinar Erste Schritte mit Squarespace 7.1 an. In dieser Live-Sitzung führen wir dich durch die Grundlagen der Einrichtung deiner Website in Version 7.1, einschließlich der Erstellung von Seiten und der Anpassung von Website-Stilen. Webinare dauern in der Regel eine Stunde und du benötigst keine Squarespace-Website und kein Konto, um dich anzumelden.

War dieser Beitrag hilfreich?
88 von 474 fanden dies hilfreich
Stil- und Design-Optionen für Version 7.1