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.

Gestalten Sie Ihre Website im Panel „Website-Stile“. In dieser Anleitung sind die Stil-Anpassungen fett gedruckt und verweisen auf die Liste aller Brine-Anpassungen, um Ihnen die Navigation im Panel zu erleichtern.

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 Seitentitel oder das Logo und Navigationslinks unter Kopfzeile: Layout zu den oberen und unteren Kopfzeilen 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

Unter Kopfzeile: oben kannst du die obere Kopfzeile nach deinen Wünschen gestalten:

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

In der unteren Kopfzeile werden Seiten-Banner als Hintergrundbilder oder -videos angezeigt. Wenn kein Banner vorhanden ist, entspricht die Hintergrundfarbe der Farbe der Seite (Farbe in Hauptbereich).

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

  • Alle Seiten – Ändere das Padding in Kopfzeile: Unten und Intro-Padding unter Haupt.
  • 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:

Unter Kopfzeile: Layout kannst du auswählen, wo sie angezeigt bzw. verborgen werden sollen. Wähle beispielsweise Markenführungsposition: oben mittig aus, damit dein Seitentitel oder dein Logo in der Mitte der oberen Kopfzeile angezeigt wird.

Du kannst sie jeweils in den Kopfzeilen-Abschnitten wunschgemäß gestalten. Gehe beispielsweise zu Kopfzeile: 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 Kopfzeile: oben und Kopfzeile: 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:

Fußzeilen-Navigationslinks:

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 Overlay-Farbe in Haupt: 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 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 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 in der unteren Kopfzeile ist ein seitenspezifischer Kopfzeilen-Bereich, den Sie mit Text, Bildern und weiteren Inhalten bearbeiten können. 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:

In den Footer-Abschnitten kannst du die Schriftarten und Farben anpassen. Wenn du den Footer verbergen möchtest, 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.

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

Unter Index: Galerie:

  • 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 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 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, 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 (Farbe unter Hauptbereich). 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 Ajax-Laden aktivieren unter Website: Laden kannst du Ajax-Laden 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 die Kopfzeile, 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:

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 Hauptbereich 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 Haupt 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 Kopfzeile: 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 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 Kopfzeilen-Element in die jeweilige Leiste. Gehe beispielsweise zu Mobil: Markenführung und wähle Position: oben links aus, um die obere Leiste hinzuzufügen.
  • Lege mit Seitenanfang auf Mobilgeräten fixieren unter Mobil: oben 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 unter Mobil: Oben und Mobil: Unten 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 dies in den einzelnen Mobil-Abschnitten gestalten. Unter Mobil: Markenführung kannst du z. B. den Seitentitel oder das Logo anpassen.
  • Die Navigation wird zu einem ☰ eingeklappt.
  • Lege die Hintergrundfarbe für die Navigation mit 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?
130 von 246 fanden dies hilfreich
Brine-Template-Gruppe