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

Brine-Template-Gruppe

Mit Templates aus der Brine-Familie kannst du einen professionellen Webauftritt für jede Marke und jedes Unternehmen erstellen. Du kannst die Kopfzeilen, den Footer, die Inhaltseinrückung und den Stil für Mobilgeräte anpassen, damit sich deine Website von der Masse abhebt. Zudem kannst du randlose Banner zu jeder Seite hinzufügen oder sie im Index stapeln. Optional kannst du festlegen, dass sich Banner mit Parallax Scrolling langsamer als der Seiteninhalt bewegen. Dies verstärkt die Tiefenwirkung und schafft ein noch eindrucksvolleres Erlebnis.

In dieser Anleitung geht es um die Funktionen und Gestaltungsmöglichkeiten der Brine-Familie. Hier findest du eine Liste aller Brine-Templates.

Gestalte deine Website im Menü Website-Stile. In dieser Anleitung werden Stil-Anpassungen und der Abschnitt, unter dem sie im Menü „Website-Stile“ angezeigt werden, in Fettschrift angezeigt.

Unterstützte Seiten

Brine unterstützt die folgenden Seiten-Typen:

Kopfzeilen

Besucher verwenden die Kopfzeile am Seitenanfang, um durch Ihre Website zu navigieren. In Brine ist die Kopfzeile in einen oberen und einen unteren Abschnitt unterteilt.

  • Du kannst Elemente wie den Website-Titel oder das Logo und Navigationslinks zu den oberen und unteren Headern im Abschnitt Header: Layout der Website-Stile hinzufügen.
  • Die untere Kopfzeile unterstützt ein Hintergrundbild sowie einen Intro-Bereich, in dem du eigene Inhalte hinzufügen kannst.

brine-topbottom.png

Die Kopfzeilen gestalten

Gestalte den oberen Header mit diesen Anpassungen von Header: Oben:

  • Über Padding kannst du die gewünschte Höhe festlegen.
  • Und mit Hintergrund kannst du die gewünschte Farbe einstellen.

Im unteren Header werden Seiten-Banner als Hintergrundbilder oder Videos angezeigt. Wenn kein Banner vorhanden ist, entspricht die Hintergrundfarbe der Seite (wird mit der Anpassung Farbe unter Hauptbereich festgelegt).

So ändern Sie die Höhe der unteren Kopfleiste:

  • Alle Seiten – Ändere das Padding unter Header: Unten und die Anpassung Intro-Padding unter Hauptbereich.
  • Einzelne Seiten – Du kannst zusätzliche Zeilenumbrüche zum Intro-Bereich hinzufügen, wenn du die Höhe steigern möchtest.
  • Index-Seiten – Ändere die Höhe des oberen Index-Abschnitts.

Kopfzeilen-Elemente hinzufügen und gestalten

Sie können jedes der folgenden Elemente zu beiden Kopfzeilen-Abschnitten hinzufügen:

Wähle im Abschnitt Header: Layout der Website-Stile aus, wo sie angezeigt oder ausgeblendet werden sollen. Wähle beispielsweise Markenführungsposition: oben mittig, um deinen Website-Titel oder dein Logo in der Mitte des oberen Headers hinzuzufügen.

Du kannst sie mit den Anpassungen in den Header-Abschnitten wunschgemäß gestalten. Gehe beispielsweise zu Header: Hauptnavigation, um die Schriftart und die Farbe der Links auszuwählen.

  • Lege die (Overlay-)Farben von Elementen in der unteren Kopfzeile so fest, dass sie über Bannern gut sichtbar sind.
  • Du kannst festlegen, ob Elemente im gleichen Bereich (z. B. unten mittig) gestapelt werden sollen oder nicht. Dies geht über die Layout-Anpassungen unter Header: oben und Header: unten.
  • Lege separate Stile für Mobilgeräte fest, um ein optimales Erscheinungsbild auf Mobilgeräten zu gewährleisten.

Weitere Hilfe zu Kopfzeilen

Beachten Sie folgende Tipps:

  • Platzieren Sie für optimale Ergebnisse jedes Element in einem anderen Bereich der Kopfzeile. Elemente können sich überlappen, wenn nicht genügend Platz vorhanden ist.
  • Manche Anpassungen werden nicht angezeigt, bis die Elemente, die sie betreffen, zu Ihrer Website hinzugefügt werden.
  • Wenn die obere Kopfzeile keine Elemente enthält, wird sie nicht angezeigt.
  • Weitere Tipps findest du unter Eine Website-Kopfzeile erstellen.

Navigationslinks

Brine hat drei Navigationsbereiche.

Hauptnavigationslinks und Sekundärnavigationslinks:

  • Können in der oberen oder unteren Kopfzeile angezeigt werden.
  • Können mit den Stil-Anpassungen Header: Hauptnavigation und Header: Sekundärnavigation gestaltet werden. Wähle z. B. Stil: Button aus, um Links für die Haupt- oder Sekundärnavigation als Buttons zu gestalten.

Fußzeilen-Navigationslinks:

  • Werden im Website-Footer angezeigt.
  • Können mit Footer: Navigation-Anpassungen wunschgemäß gestaltet werden.

Banner

Banner sorgen für ein visuelles Element, das den Ton für deine Seite vorgeben kann. Füge Seitenvorschaubilder und -videos hinzu, um Banner zu erstellen.

Banner in Brine:

  • Werden für Layout-Seiten und Sammlungs-Seiten angezeigt.
  • Werden zu Hintergründen für die untere Kopfzeile.
  • Werden randlos angezeigt, außer beim Layout Design: Eingeschränkt.
  • Können mit Parallax Scrolling langsamer scrollen als der Rest der Seite.
  • Werden nicht für Sammlungsinhalte (wie z. B. Blogeinträge, Produktartikel und einzelne Events) angezeigt.

Sie können mehrere Banner vertikal in einem Index stapeln.

brine-banner.png

Banner gestalten

Verwenden Sie diese Optionen, um Ihre Banner zu gestalten:

  • Füge einen Farbfilter mit der Anpassung Overlay-Farbe unter Hauptbereich: Overlay hinzu.
  • Im Intro-Bereich kannst du Text und andere Blöcke, wie z. B. Button-Blöcke, hinzufügen.
  • Bearbeite zur Änderung der Höhe den Intro-Bereich und füge Zeilenumbrüche hinzu.
  • Wähle mit der Anpassung Parallax aktivieren unter Website: Laden aus, ob Banner langsamer scrollen als der Rest der Seite.
  • In Website-Stil betreffen (Overlay-)Anpassungen Elemente, die über Banner-Bildern angezeigt werden, wie z. B. Text- und Navigationslinks.

Abschneiden und zentrieren

  • Wenn Parallax Scrolling aktiviert ist, kannst du die Anpassung Parallax Smart Crop in Website: Laden verwenden. So wird sichergestellt, dass der Bannerzuschnitt möglichst gering ausfällt.
  • Wenn der Bildzuschnitt unerwartet ausfällt, können dir unsere Tipps zur Fehlerbehebung beim Zuschneiden weiterhelfen.
  • Du kannst die Bildausschnitte von Banner-Bildern ändern, um festzulegen, wie die Bilder zentriert werden sollen.

Weitere Hilfe mit Bannern

Denken Sie daran:

Intro-Bereiche

Der Intro-Bereich im unteren Header ist ein seitenspezifischer Header-Bereich, den du mit Text, Bildern und weiteren Inhalten bearbeiten kannst. Dies ist eine großartige Möglichkeit, den oberen Teil einzelner Seiten anzupassen.

Intro-Bereiche werden über Seiten-Bannern angezeigt und folgen der Inhaltseinrückung. Sie sind auf allen Seiten außer Layout-Seiten ohne Banner und Index-Seiten verfügbar.

So bearbeiten Sie das Intro:

  • Bewege den Mauszeiger über den Bereich oberhalb des Seiteninhalts und klicke auf Bearbeiten.
  • Füge Text und andere Inhalte mit Blöcken hinzu.

Der Intro-Bereich kann zusätzliches Padding anzeigen, während Sie Ihre Website erneut bearbeiten. Um zu sehen, wie der Intro-Abstand auf Ihrer Live-Website angezeigt wird, speichern Sie Ihre Änderungen und rufen Sie die Seite im Vorschaumodus auf.

brine-intro-area.png

Fußzeile

Passen Sie den Footer für die gesamte Website an, damit Besucher die Antworten erhalten, die sie benötigen. Der Footer von Brine verfügt über:

  • Drei Block-Bereiche, die Sie mit Ihren eigenen Inhalten personalisieren können.
  • Einen Bereich, der Ihre Geschäftsinformationen anzeigt.
  • Footer-Navigationslinks.
  • Zwei Layout-Optionen (verwende die Layout-Anpassung unter Footer).

Gestalte die Schriftarten und Farben mit den Footer-Anpassungen. Um den Footer auszublenden, deaktiviere Footer anzeigen.

Layout: Spalten

Ein Block-Bereich, die Unternehmensinformationen und die Navigation werden horizontal angezeigt. Es befindet sich ein Block-Bereich darüber und darunter. Ordner und Index-Seiten erzeugen Spalten. Die Index-Seite und die Titel von Ordnern werden als Überschriften angezeigt, die keine Links sind. Die Unterseiten-Links befinden sich darunter.

brine-footer-columns.png

Layout: Stapel

Die Unternehmensinformationen und die Navigation werden vertikal gestapelt. Es befinden sich Block-Bereiche darüber, dazwischen und darunter. Titel von Ordnern und Index-Seiten werden nicht angezeigt und deren Unterseiten-Links werden horizontal angezeigt.

brine-footer-stacked.png

Blogseiten

Die Template-Gruppe Brine basiert auf einer Blog-Seite mit Standard-Raster/-Liste. Mehr über die einmaligen Funktionen und Stil-Optionen dieser Art von Blog erfährst du unter Blog-Seiten mit Standard-Raster/-Liste.

Index-Seiten

Die Index-Seiten von Brine wandeln den Inhalt mehrerer Seiten in gestapelte Abschnitte um. So kannst du verschiedene Bilder und Informationen am gleichen Ort hervorheben.

brine-index-sections-scroll.gif

Inhaltsabschnitte

Inhaltsabschnitte werden mit Layout-Seiten erstellt. Nachdem Sie Inhaltsabschnitte hinzugefügt haben, passen Sie diese mit Blöcken an.

  • Die Inhaltseinrückung (optional) schafft zusätzlichen Leerraum um bestimmte Blöcke herum.
  • Wenn der obere Abschnitt ein Inhaltsabschnitt ist, wird er in der unteren Kopfzeile angezeigt.

Die Mindesthöhe für bestimmte oder alle Abschnitte kannst du über Mindesthöhe anwenden unter Index: Seite einstellen:

  • Dabei gibt es folgende Optionen: nur für den ersten Abschnitt, Seiten mit Bannern, alle Seiten oder keine Seiten.
  • Mit Padding und Padding (Overlay-Seiten), kannst du die Höhe aller Abschnitte ändern.
  • Wenn der Seiteninhalt länger als die Mindesthöhe ist, dehnt sich der Abschnitt entsprechend dem Inhalt aus, einschließlich des Paddings.
  • Du kannst die Höhe eines einzelnen Abschnitts ändern, indem du Zeilenumbrüche zum Seiteninhalt hinzufügst, um ihn länger zu machen.

Fügen Sie Seiten-Vorschaubilder hinzu, um einen Hintergrund für Banner-Bilder oder -Videos zu Abschnitten hinzuzufügen.

  • Banner können über Parallax Scrolling verfügen.
  • Wenn kein Banner vorhanden ist, entspricht die Hintergrundfarbe der Seite (wird mit der Anpassung Farbe unter Hauptbereich festgelegt).

Galerie-Indexabschnitte werden aus Galerie-Seiten erstellt. Nach dem Hinzufügen von Galerie-Indexabschnitten kannst du Bilder und Videos hinzufügen.

Im Abschnitt Index: Galerie der Website-Stile:

  • Wählen Sie aus, ob alle Katalog-Indexabschnitte als Slideshows oder Raster mit Layout angezeigt werden.
  • Wenn du den Abstand ändern oder einen Randlos-Effekte erzeugen möchtet, deaktiviere Abstände an den Seiten einfügen und verwende die Abstand-Anpassungen.
  • Über Seitenverhältnis kannst du die Fom von Bildern festlegen.
  • Wenn es sich bei dem Abschnitt oben um eine Galerie handelt, kannst du über Overlay-Kopfzeile in der ersten Index-Galerie auswählen, ob sie hinter der unteren Kopfzeile angezeigt wird.
  • Mit Bild-Overlay kannst du einen Farbfilter zu Bildern hinzufügen.
  • Mouseover-Stil legt fest, was passiert, wenn du den Mauszeiger über ein Bild bewegst.

Für Galerie-Index-Abschnitte ist Parallax Scrolling nicht verfügbar. Wenn Parallax aktiviert ist, scheinen diese Abschnitte über die sich langsamer bewegenden Inhaltsabschnitte zu gleiten.

Index-Navigation.

So helfen Sie Besuchern, Ihren Index zu erkunden:

  • Mit der Anpassung Index: Scroll-Indikator kannst du einen Pfeil, eine Linie oder Text zum ersten Abschnitt hinzuzufügen und so Besucher zum Scrollen anregen (nur für Inhaltsabschnitte).
  • Mit der Anpassung Stil unter Index: Navigation kannst du Navigationspunkte oder -linien hinzufügen. Durch Anklicken eines Punktes oder einer Linie gelangt man zum entsprechenden Abschnitt.

brine-index-nav.png

Leerraum unter dem ersten Abschnitt hinzufügen

Wenn deine Website einen Rand hat, kannst du unter dem ersten Abschnitt eine entsprechende Linie als Abstandshalter hinzufügen.

  • Aktiviere je nachdem, von welchem Typ der oberste Abschnitt ist, die Anpassung Rand unter erster Seite spiegeln unter Index: Seite oder Rand unter erster Galerie spiegeln unter Index: Galerie.
  • Der zweite Abschnitt muss ein Inhaltsabschnitt ohne Banner sein.
  • Die Abstandsfarbe ist identisch mit der Farbe der Seite. Ein optimales Ergebnis erzielst du, wenn diese mit der Randfarbe übereinstimmt.

brine-mirror-site-border.png

Weitere Hilfe zu Indizes

Denken Sie daran:

Struktur und Style

Verwenden Sie diese Optionen, um das Erscheinungsbild Ihrer Website zu ändern.

Ajax Loading

Ajax ist eine spezielle Methode, die den Ladevorgang einer Website beeinflusst und Seiten mit viel Inhalt, z. B. Blogseiten, deutlich schneller und reaktionsfreudiger macht. Um ein nahtloses Nutzererlebnis zu schaffen, empfehlen wir dir, „Ajax-Laden“ aktiviert zu lassen.

  • Über die Anpassung Ajax Loading aktivieren unter Website: Laden kannst du Ajax Loading aktivieren oder deaktivieren.
  • Mit den anderen Anpassungen unter Website: Laden kannst du den Ladebalken, der beim Laden von Seiten angezeigt wird, wunschgemäß gestalten oder verbergen.
  • Gelegentlich kann Ajax mit benutzerdefiniertem Code, Anker-Links und Analytics im Konflikt stehen.
  • Weitere Hilfe erhalten Sie unter Ajax Loading.

Rand

Mit Website: Rand-Anpassungen kannst du überall auf der Website einen Rahmen rund um den Header, den Hauptinhaltsbereich und den Footer herum hinzufügen. Auf Cover-Seiten wird der Rand nicht angezeigt.

brine-border.png

Schriftarten

Gestalten Sie die Schriftarten auf Ihrer Website mit diesen Optionen für Website-Stile:

  • Website-Schriftarten – Inhalt: Schriftarten und Inhalt: Farben
  • Text auf Bannern – Alle (Overlay)-Anpassungen
  • Galerie Indexabschnitte – Index: Galerie
  • Header-Elemente – In ihren Header-Abschnitten (z. B. Header: Markenführung)
  • Produkt-Seiten – Produkte
  • Blog-Seiten – Blog: Schrift und Farben

Text-Links sind unterstrichen.

Parallax Scrolling

Parallax ist ein spezieller Scrolling-Effekt, bei dem sich Hintergrundbilder oder Videos langsamer bewegen als der Seiteninhalt. Brine bietet Parallax Scrolling für Banner.

Teilen-Schaltflächen

Du kannst zu den meisten Seiten Sharing-Buttons hinzufügen. Besucher können mit diesen Buttons Inhalte auf ihren Social-Media-Profilen teilen.

  • Blog- und Shop-Seiten – Erweiterte Sharing-Buttons
  • Album- und Event-Seiten – klassische Sharing-Links

Seitenleisten werden bei Brine nicht unterstützt. Fügen Sie zusätzliche Inhalte stattdessen zum Footer, Intro-Bereich und zu Layout-Seiten hinzu.

Website-Breite

Mit den Anpassungen unter Website kannst du die Breite festlegen:

  • Mit Breite kannst du die Breite des Inhaltsbereichs festlegen.
  • Das über Design festgelegte Layout bestimmt, wie der Inhaltsbereich angezeigt wird.
  • Der Website-Rand betrifft ebenfalls das Layout.

In den folgenden Beispielen ist die Breite auf 880 Pixel eingestellt. Die Hintergrundfarbe des Inhaltsbereichs wird unter dem Abschnitt Hauptbereich der Website-Stile festgelegt.

Design: Gesamte Breite

Der Inhalt wird in der Breite des Browsers, abzüglich des seitlichen Paddings, angezeigt. Banner werden randlos angezeigt.

brine-full-width.png

Design: Gesamter Hintergrund

Der Inhalt wird in der gewählten Breite, abzüglich des seitlichen Paddings, angezeigt. Banner werden randlos angezeigt.

brine-full-background.png

Design: Eingeschränkte Breite

Die im Abschnitt Website ausgewählte Hintergrundfarbe wird außerhalb des Inhaltsbereichs angezeigt. Banner werden im Inhaltsbereich angezeigt.

brine-constrained-width.png

Inhaltseinschub

Über die Inhaltseinrückung kannst du auffällige Layouts erstellen. Wenn sie in einer einzigen Spalte angeordnet sind, werden einige Blöcke, wie z. B. Text- und Zitatblöcke, schmaler angezeigt als andere Seiteninhalte, wie z. B. Bild-Blöcke.

  • Dies betrifft alle Bereiche, in denen Sie Blöcke hinzufügen können, einschließlich Intro-Bereiche und den Footer.
  • Lege die Breite mit Inhaltseinrückung unter Hauptbereich fest.
  • Wenn du die Einrückung entfernen möchtest, stelle die Inhaltseinrückung auf 0 ein.
  • Weitere Hilfe finden Sie unter Inhaltseinrückung.

brine-content-inset.png

Hintergrundfarben

Verwenden Sie die folgenden Anpassungen, um die Hintergrundfarben für Ihre Website festzulegen:

  • Hauptinhaltsbereich – Farbe unter Haupt
  • Seitenränder - Hintergrund unter Website
  • Rand – Farbe unter Website: Rand
  • Obere Kopfzeile – Hintergrund unter Header: Oben
  • Untere Kopfzeile – Entspricht dem Hauptinhaltsbereich oder zeigt ein Banner an
  • Footer – Hintergrundfarbe unter Footer
  • Index-AbschnitteEntspricht dem Hauptinhaltsbereich oder zeigt ein Banner an
  • Hinter transparenten Banner-Bildern – Overlay-Farbe unter Hauptbereich: Overlay, auch wenn für diese Farbe die Option „transparent“ gewählt wurde
Tipp: Sie können einen Index verwenden, um den Effekt eines Seitenhintergrundbildes zu erzeugen.

Dieses Beispiel zeigt viele der Hintergrundbereiche:

brine-background-colors.png

Mobilgeräte

Mit dem integrierten Responsiven Design von Squarespace passt sich Ihre Website an, damit sie auf jedem Gerät hervorragend aussieht. In Brine können Sie die Darstellung Ihrer Website auf Mobilgeräten und in schmalen Browsern anpassen.

Über die Anpassung Mobil-Breakpoint unter Mobil kannst du festlegen, bei welcher Browser-Breite deine Website zur Ansicht für Mobilgeräte wechselt. Der Standardwert ist 640 Pixel.

Mobile Kopfzeilen-Elemente werden in der oberen oder unteren Navigationsleiste angezeigt.

  • Wenn du eine obere oder untere Leiste hinzufügen möchtest, verschiebe ein beliebiges Header-Element in die jeweilige Leiste. Gehe beispielsweise zum Abschnitt Mobil: Markenführung und wähle Position: Oben links aus, um die obere Leiste hinzuzufügen.
  • Lege mit der Anpassung Seitenanfang auf Mobilgeräten fixieren unter Mobil: Seitenanfang fest, ob die obere Leiste am Seitenanfang fixiert sein oder mit der Seite nach oben scrollen soll.
  • Die untere Leiste ist immer fixiert.
  • Lege die Hintergrundfarben mit den Anpassungen Mobil: Seitenanfang und Mobil: Seitenende fest.

brine-mobilebars.png

Kopfzeilen-Elemente

Die Kopfzeilen-Elemente deiner Website werden in den Navigationsleisten angezeigt und verfügen über einen separaten Stil für Mobilgeräte.

  • Du kannst sie in den einzelnen Mobil-Abschnitten der Website-Stile gestalten. Mit den Anpassungen von Mobil: Markenführung kannst du z. B. den Website-Titel oder das Logo anpassen.
  • Die Navigation wird zu einem ☰ eingeklappt.
  • Lege die Hintergrundfarbe für die Navigation mit der Anpassung Menü: Farbe unter Mobil-Menü: Allgemein fest.
  • Die Anpassungen für den Schließen-Button unter Mobil-Menü: Allgemein gestalten das X, mit dem das Navigationsmenü geschlossen wird.
  • Symbole sozialer Netzwerke und Slogans werden auf Mobilgeräten nicht angezeigt.
  • Wenn du das Suchsymbol antippst, öffnet sich ein Overlay mit einer Suchleiste. Der Overlay-Hintergrund richtet sich nach der Website-Hintergrundfarbe.

Trotz separater Stile wird das gleiche Element sowohl auf dem Computer als auch auf Mobilgeräten angezeigt. Beispielsweise ist Folgendes möglich/nicht möglich:

  • Möglich – Du kannst eine andere Farbe und Schriftart für deinen mobilen Seitentitel auswählen.
  • Möglich – Du kannst deine Suchleiste auf Mobilgeräten anzeigen, aber auf einem Computer ausblenden lassen.
  • Nicht möglich – Zeige einen Seitentitel auf einem Computer und ein Logo auf Mobilgeräten an.

Mehr Hilfe mit Mobilgeräten

Denken Sie daran:

Templates in der Brine-Gruppe.

Alle Templates in der Brine-Familie haben dieselben Stil-Optionen und Funktionen. Im Template-Shop für Version 7.0 findest du alle Brine-Templates.

Die Brine-Familie beinhaltet:

Sprachoptionen

Sole unterstützt zwei Sprachoptionen:

War dieser Beitrag hilfreich?
134 von 251 fanden dies hilfreich
Brine-Template-Gruppe