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

Tipp: Um die Version Ihrer Website anzuzeigen, melden Sie sich bei Ihrer Website an und klicken Sie im linken Menü auf Hilfe. Weitere Hilfe erhalten Sie unter Welches Template und welche Version hat meine Website?

Ein Video anschauen

Colors

Kuratierte Optionen helfen Ihnen, Änderungen an allen Farben Ihrer Website auf einmal vorzunehmen. So ändern Sie die Farben Ihrer Website:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Farben.
  2. Verwenden Sie die Optionen Palette und Design, um eine Reihe von Farben auszuwählen und zu bestimmen, wie diese angezeigt werden.
  3. Klicken Sie auf Erweitert, um bestimmte Elemente innerhalb dieser Palette und dieses Designs zu gestalten, oder wählen Sie eine benutzerdefinierte Farbe aus.

Fehlerbeseitigung

Wenn globale Stile einen bestimmten Teil Ihrer Website nicht betreffen, hat dieser Abschnitt wahrscheinlich Abschnittstile, die globale Stile überschreiben.

So setzen Sie einen Abschnitt wieder auf die globalen Stile zurück:

  1. Klicken Sie auf Bearbeiten und dann auf das Bleistiftsymbol für den entsprechenden Abschnitt.
  2. Klicken Sie im Tab Farben auf das ausgewählte Design, um dessen Auswahl aufzuheben. Der Abschnitt wird damit auf die globalen Stile zurückgesetzt.

So ändern Sie die abschnittsspezifischen Farben:

  1. Klicken Sie auf Bearbeiten und dann auf das Bleistiftsymbol für den entsprechenden Abschnitt.
  2. Überprüfen Sie im Tab Farben, welches Farbschema Sie gewählt haben.
  3. Klicken Sie im Hauptmenü auf Design und anschließend auf Farben.
  4. Merken Sie sich, welches Farbschema Ihre Hauptseite aktuell verwendet.
  5. Klicken Sie auf das Farbschema für den Abschnitt, den Sie bearbeiten möchten. Der Rest Ihrer Website wird vorübergehend zu diesem Design wechseln, aber es wird auf Ihrer Live-Website nicht sichtbar sein.
  6. Klicken Sie auf Erweitert, um Änderungen vorzunehmen.
  7. Gehen Sie zurück zum Hauptmenü von Farben und wählen Sie das Design für Ihre Website erneut aus.
  8.  Klicken Sie auf Save (Speichern).

Background

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

Tipps:

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

Schaltflächen

Um die Buttons Ihrer Website zu gestalten, klicken Sie im Hauptmenü auf Design und dann auf Buttons.

Buttons folgen den globalen Farben und Schriftarten Ihrer Website.

Button-Blöcke 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 Bearbeiten, um die Größe und Ausrichtung zu ändern.

Fonts

So ändern Sie die Schriftarten Ihrer Website:

  1. Klicken Sie im Hauptmenü auf Design und dann auf Schriftarten.
  2. Wählen Sie ein Schriftart-Paket aus.
  3. Legen Sie die Basisgröße fest. Alle anderen Textgrößen beziehen sich auf diese Größe.
  4. Klicken Sie auf the-gear-icon, um spezifischen Text zu gestalten.

Use a specific font

To use a specific Adobe or Google Font, use the Browse all fonts option to search for it.

  1. In the Home Menu, click Design, then click Fonts
  2. Click a font pack, then click its the-gear-icon.
  3. Click the text type you want to change: Headings, Paragraphs, Buttons, or Meta.
  4. Click Family.
  5. Click Browse all fonts.
  6. Scroll to see the available fonts, or enter the font name in the Search fonts field at the top of the panel.
  7. Click Save to apply your changes.  

Text formatieren

Markieren Sie beliebigen Text und verwenden Sie die Symbole in der Werkzeugleiste, um die Formatierung anzuwenden.

Wir erstellen automatisch HTML-Tags für jede Textgröße im Code Ihrer Website:

  • <h1> – Extragroße Überschriften
  • <h2> – Große Überschriften
  • <h3>  Mittlere Überschriften
  • <h4> – Kleine Überschriften
  • <p> – Großer, regulärer und kleiner Abschnittstext

Links sind immer unterstrichen.

Kopfzeile

Besucher verwenden die Kopfzeile am Seitenanfang, um durch Ihre Website zu navigieren. In Version 7.1 enthält die Kopfzeile den Seitentitel oder das Logo, Navigationslinks, den Warenkorb und Social-Media-Symbole. Sie können auch einen Button zur Handlungsaufforderung hinzufügen.

So gestalten Sie Ihren Header:

  1. Klicken Sie in der linken oberen Ecke auf Bearbeiten.
  2. Bewegen Sie den Mauszeiger über die Kopfzeile und klicken Sie auf Website-Header bearbeiten.
  3. Wählen Sie das Layout, das Branding, die Symbole, die Buttons und die Stil-Optionen Ihrer Kopfzeile aus.

Die Hintergrundfarbe hängt davon ab, wie die Farbe der Kopfzeile eingestellt ist:

  • Transparent – Die Kopfzeile entspricht dem Stil des ersten Abschnitts auf der Seite. Dies kann sich von Seite zu Seite ändern, je nachdem, ob der erste Abschnitt über Abschnittsstile verfügt. 
  • Nicht transparent – Wählen Sie im Kopfzeilen-Editor ein Farbschema aus oder heben Sie die Auswahl aller Designs auf, um den globalen Farbstilen zu folgen.
  • Die Dropdown-Menüs der Ordner entsprechen der Hintergrundfarbe der Kopfzeile.
  • Weitere Hilfe finden Sie in unseren Tipps zur Fehlerbehebung für Farben.

Denken Sie daran:

  • Wenn Sie ein Logo hinzufügen, fügen Sie auch einen Seitentitel hinzu. Suchmaschinen verwenden den Titel für Suchergebnisse und Browser-Tabs, es sei denn, Sie fügen einen separaten SEO-Titel hinzu.
  • Vermeiden Sie es, spitze Klammern um Ihren Titeltext zu setzen, z. B. so: Meine <Website>. Spitze Klammern werden als Code dargestellt, und Teile Ihres Titels können unsichtbar sein oder es kann andere Probleme verursachen.
  • Erfahren Sie mehr über Website-Titel und Logos.

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.

Portfolio-Seiten

Eine Portfolio-Seite erstellt eine speziell gestaltete Landing-Page, die Besucher mit Unterseiten verbindet. Dies ist eine großartige Möglichkeit, mehrere Galerien, Projekte, Portfolio-Highlights und andere Inhalte an einem Ort zu präsentieren.

So fügen Sie eine Portfolio-Seite hinzu und richten sie ein:

  1. Klicken Sie im Hauptmenü auf Seiten und dann auf +.
  2. Klicken Sie auf Portfolio und wählen Sie ein Layout aus. Sie können dies später mit Abschnittsstilen ändern.
  3. Um anklickbare Bilder auf der Landing-Page zu erstellen, fügen Sie Bilder zu allen Unterseiten in den Einstellungen für Portfolioelemente hinzu.
  4. Fügen Sie Unterseiten mit Abschnitten hinzu oder bearbeiten Sie sie.
Hinweis: Es ist derzeit nicht möglich, Unterseiten zwischen Portfolios zu verschieben.

Abschnittsstile

Um einen Abschnitt zu gestalten, bearbeiten Sie die Seite, klicken Sie auf den Abschnitt und 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.

Stile für Sammlungsinhalte

So gestalten Sie Blogeinträge und Produktartikel:

  1. Klicken Sie im Hauptmenü auf Design.
  2. Klicken Sie auf Blogeinträge oder Produktartikel.

Bild-Block-Stile

So gestalten Sie Bild-Blöcke:

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

Templates in Version 7.1

Alle Websites in Version 7.1 basieren auf der gleichen Template-Gruppe. 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:

  • Aktualisieren Sie Ihre globalen Stile.
  • Ändern Sie die Layouts in Ihren Abschnitten.
  • Fügen Sie neue Abschnitte hinzu, 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.
War dieser Beitrag hilfreich?
18 von 83 fanden dies hilfreich
Stil- und Design-Optionen für Version 7.1