Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Brine-Template-Gruppe

Mit Templates in der Brine-Familie können Sie einen professionellen Webauftritt für jede Marke und jedes Unternehmen erstellen. Passen Sie die KopfzeilenFooter, Inhaltseinrückung und Stile für Mobilgeräte an, um Ihre Website von der Masse abzuheben. Fügen Sie randlose Banner zu jeder Seite hinzu oder stapeln Sie sie im Index. Optional ist, wenn sich Banner mit Parallax Scrolling langsamer als der Seiteninhalt bewegen, was die Tiefenwirkung verstärkt und ein noch eindrücklicheres Erlebnis schafft.

Diese Anleitung behandelt die Funktionen und Gestaltungsmöglichkeiten der Brine-Familie. Hier finden Sie eine Liste der 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.

Tipp: Die Live-Vorschau-Seite von Brine präsentiert echte Kunden-Websites, die dieses Template nutzen.

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.

  • Fügen Sie Elemente wie den Seitentitel oder das Logo und Navigationslinks unter Kopfzeile: Layout zu den oberen und unteren Kopfzeilen hinzu.
  • Die untere Kopfzeile unterstützt ein Hintergrundbild und einen Intro-Bereich, in dem Sie eigene Inhalte hinzufügen können.

brine-topbottom.png

Die Kopfzeilen gestalten

Gestalten Sie die obere Kopfzeile unter Kopfzeile: Oben:

  • Legen Sie die Höhe mit Freiraum fest.
  • Legen Sie die Farbe mit Hintergrund fest.

Die untere Kopfzeile zeigt Seiten-Banner als Hintergrundbilder oder Videos an. Wenn kein Banner vorhanden ist, entspricht die Hintergrundfarbe der Farbe der Seite (Farbe unter Haupt).

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

  • Alle Seiten – Ändern Sie den Freiraum unter Kopfzeile: Unten und Intro-Freiraum in Haupt.
  • Einzelne Seiten – Fügen Sie Höhe hinzu, indem Sie zusätzliche Zeilenumbrüche zum Intro-Bereich hinzufügen.
  • Index-Seiten – Ändern Sie 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ählen Sie unter Kopfzeile: Layout, wo sie angezeigt oder verborgen werden. Wählen Sie beispielsweise Markenaufbau-Position: Oben mittig, um Ihren Seitentitel oder Ihr Logo in der Mitte der oberen Kopfzeile hinzuzufügen.

Gestalten sie Sie in jedem ihrer  Kopfzeilen-Abschnitte. Gehen Sie beispielsweise zu Kopfzeile: Hauptnavigation, um die Schriftart und Farbe der Links auszuwählen.

  • Für Elemente in der unteren Kopfzeile legen Sie deren (Overlay)-Farben so fest, dass sie über Bannern sichtbar sind.
  • Wählen Sie mit den Layout-Anpassungen unter Kopfzeile: Oben und Kopfzeile: Unten, ob Elemente im selben Bereich (z. B. Unten mittig) gestapelt werden oder nicht.
  • Legen Sie deren separate Stile für Mobilgeräte fest, um sicherzustellen, dass sie auf Mobilgeräten gut aussehen.

Weitere Hilfe zu Kopfzeilen

Beachten Sie dabei 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 finden Sie unter Eine Website-Kopfzeile erstellen.

Navigationslinks

Brine hat drei Navigationsbereiche.

Hauptnavigations- und Untergeordnete Navigationslinks:

Footer-Navigationslinks::

Banner

Banner schaffen ein visuelles Element, das den Ton für Ihre Seite vorgeben kann. Fügen Sie Seiten-Vorschaubilder 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 Veranstaltungen) 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ügen Sie einen Farbfilter mit Overlay-Color unter Haupt: Overlay hinzu.
  • Fügen Sie Text und andere Inhalte im Intro-Bereich hinzu.
  • Um die Höhe zu ändern, bearbeiten Sie den Intro-Bereich und fügen Sie Zeilenumbrüche hinzu.
  • Wählen Sie, ob Banner langsamer scrollen als der Rest der Seite – mit Parallax aktivieren unter Website: Laden.
  • In Website-Stile betreffen (Overlay)-Anpassungen Elemente, die über Banner-Bildern angezeigt werden, wie z. B. Text- und Navigationslinks.

Abschneiden und zentrieren

  • Wenn Parallax Scrolling aktiviert ist, verwenden Sie Parallax: Intelligentes Abschneiden unter Website: Laden, um sicherzustellen, dass Banner nur im geringstmöglichen Maße beschnitten werden.
  • Wenn die Bilder auf unerwartete Weise abgeschnitten werden, ziehen Sie unsere Tipps zur Fehlerbehebung beim Zuschneiden.
  • Wählen Sie, wie Banner-Bilder zentriert werden, indem Sie deren Bildausschnitte ändern.

Weitere Hilfe mit Bannern

Beachten Sie dabei folgende Tipps:

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:

  • Fahren Sie mit der Maus über den Bereich oberhalb des Seiteninhalts und klicken Sie auf Bearbeiten.
  • Fügen Sie Text und andere Inhalte in Blöcken hinzu.

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:

Gestalten Sie die Schriftarten und Farben in den Footer-Abschnitten. Um den Footer zu verbergen, deaktivieren Sie Footer anzeigen.

Layout: Spalten

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

brine-footer-columns.png

Layout: Stapel

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

brine-footer-stacked.png

Index-Seiten

Die Index-Seiten von Brine wandeln den Inhalt mehrerer Seiten in gestapelte Abschnitte um, sodass Sie verschiedene Bilder und Informationen an einem einzigen Ort hervorheben können.

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 rund um bestimmte Blöcke.
  • Wenn der obere Abschnitt ein Inhaltsabschnitt ist, wird er in der unteren Kopfzeile angezeigt.

Um die Mindesthöhe für bestimmte oder alle Abschnitte einzustellen, verwenden Sie Mindesthöhe anwenden unter Index: Seite:

  • Dabei gibt es folgende Optionen: nur für den ersten Abschnitt, Seiten mit Bannern, alle Seiten oder keine Seiten.
  • Verwenden Sie Freiraum und Freiraum (Overlay-Seiten), um die Höhe aller Abschnitte zu ändern.
  • Wenn der Seiteninhalt länger als die Mindesthöhe ist, dehnt sich der Abschnitt entsprechend dem Inhalt aus, einschließlich des Freiraums.
  • Um die Höhe eines einzelnen Abschnitts zu ändern, fügen Sie dem Seiteninhalt Zeilenumbrüche hinzu, 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.

Index-Galerie-Abschnitte bestehen aus Galerie-Seiten. Nachdem Sie Galerie-Abschnitte hinzugefügt haben, können Sie Bilder und Videos hinzufügen.

Unter Index: Galerie:

  • Wählen Sie aus, ob alle Galerie-Abschnitte als Slideshows oder Raster mit Layout angezeigt werden sollen.
  • Um den Abstand zu ändern oder Randlos-Effekte zu erzeugen, deaktivieren Sie Abstände an den Seiten einfügen und verwenden Sie die Abstand-Anpassungen.
  • Legen Sie die Form von Bildern mit dem Seitenverhältnis fest.
  • Wenn sich oben ein Galerie-Abschnitt befindet, verwenden Sie Overlay-Kopfzeile in erster Index-Galerie, um auszuwählen, ob dieser hinter der unteren Kopfzeile angezeigt wird.
  • Fügen Sie mit Bild-Overlay einen Farbfilter zu Bildern hinzu.
  • Mouseover-Stil legt fest, was passiert, wenn Sie mit dem Mauszeiger über ein Bild fahren.

Galerie-Abschnitte haben kein Parallax Scrolling. Wenn Parallax aktiviert ist, scheinen diese über die sich langsamer bewegenden Inhaltsbereiche zu gleiten.

Index-Navigation.

So helfen Sie Besuchern, Ihren Index zu erkunden:

  • Verwenden Sie Index: Scroll-Indiktator, um dem ersten Abschnitt einen Pfeil, eine Linie oder Text hinzuzufügen und so zum Scrollen zu ermutigen (nur Inhaltsabschnitte).
  • Fügen Sie Navigationspunkte oder -linien mit Stil unter Index: Navigation hinzu. Durch Anklicken eines Punktes oder einer Linie gelangen diese zum entsprechenden Abschnitt.

brine-index-nav.png

Leerraum unter dem ersten Abschnitt hinzufügen

Wenn Ihre Website einen Rand hat, können Sie unter dem ersten Abschnitt eine entsprechende Linie als Abstandshalter hinzufügen.

  • Aktivieren Sie Rand unter erster Seite spiegeln unter Index: Seite oder Rand unter erster Galerie spiegeln unter Index: Galerie, je nachdem, welchen Typ der oberste Abschnitt hat.
  • Der zweite Abschnitt muss ein Inhaltsabschnitt ohne Banner sein.
  • Die Abstandsfarbe ist identisch mit der Farbe der Seite (Farbe unter Haupt). Passen Sie diese für optimale Ergebnisse an die Randfarbe an.

brine-mirror-site-border.png

Weitere Hilfe zu Indizes

Beachten Sie dabei folgende Tipps:

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, wie z. B. Blogseiten, deutlich schneller und reaktionsfreudiger macht. Um ein nahtloses Nutzererlebnis zu schaffen, empfehlen wir, Ajax Loading aktiviert zu halten.

  • Aktivieren oder deaktivieren Sie Ajax Loading mit Ajax Loading aktivieren unter Website: Laden.
  • Gestalten oder verstecken Sie den Ladebalken, der angezeigt wird, während Seiten laden, mit den anderen Anpassungen unter Website: Laden.
  • Gelegentlich kann Ajax mit benutzerdefiniertem Code, Anker-Links und Analytics im Konflikt stehen.
  • Weitere Hilfe erhalten Sie unter Ajax Loading.

Rand

Fügen Sie einen Website-weiten Rahmen rund um die Kopfzeile, den Hauptinhaltsbereich und die Fußzeile mit Website: Rand-Anpassungen hinzu. Auf Titelseiten 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 seine Banner.

Teilen-Schaltflächen

Sie können den meisten Seiten Sharing-Buttons hinzufügen. Besucher verwenden diese Buttons, um Inhalte auf ihren Social-Media-Profilen zu teilen.

  • Blog- und Produktseiten – Erweiterte Sharing-Buttons
  • Album- und Veranstaltungsseiten – 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

Legen Sie die Breite mit den Anpassungen unter Website fest:

  • Legen Sie die Breite des Inhaltsbereichs mit Breite fest.
  • Das Layout, das Sie mit Design wählen, legt fest, 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 Haupt festgelegt.

Design: Gesamte Breite

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

brine-full-width.png

Design: Gesamter Hintergrund

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

brine-full-background.png

Design: Eingeschränkte Breite

Die Hintergrundfarbe, die im Abschnitt Website ausgewählt wurde, wird außerhalb des Inhaltsbereichs angezeigt. Banner werden im Inhaltsbereich angezeigt.

brine-constrained-width.png

Inhaltseinschub

Verwenden Sie die Inhaltseinrückung, um auffällige Layouts zu 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.
  • Legen Sie die Breite mit Inhaltseinrückung unter Haupt fest.
  • Um die Einrückung zu entfernen, stellen Sie Inhaltseinrückung auf 0.
  • 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
  • Seitliche Abstände – 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-Abschnitte – Entspricht dem Hauptinhaltsbereich oder zeigt ein Banner an
  • Hinter transparenten Banner-Bildern – Overlay-Farbe unter Haupt: Overlay, auch wenn diese Farbe auf transparent gesetzt ist
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.

Wählen Sie die Browser-Breite, bei der Ihre Website zur mobilen Ansicht wechselt, mit Mobil-Breakpoint unter Mobil. Der Standardwert ist 640 Pixel.

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

  • Um eine obere oder untere Leiste hinzuzufügen, verschieben Sie ein beliebiges Kopfzeilen-Element in diese. Gehen Sie beispielsweise zu Mobil: Markenaufbau und wählen Sie Position: Oben links, um die obere Leiste hinzuzufügen.
  • Wählen Sie mit Seitenanfang auf Mobilgeräten fixieren unter Mobil: Oben, ob die obere Leiste am Seitenanfang fixiert ist oder mit der Seite nach oben scrollt.
  • Die untere Leiste ist immer fixiert.
  • Legen Sie die Hintergrundfarben unter Mobil: Oben und Mobil: Unten fest.

brine-mobilebars.png

Kopfzeilen-Elemente

Die Kopfzeilen-Elemente Ihrer Website werden in den Navigationsleisten angezeigt und haben separate Stile für Mobilgeräte.

  • Gestalten Sie sie in jedem ihrer Mobil-Abschnitte. Gestalten Sie z. B. den Seitentitel oder das Logo unter Mobil: Markenaufbau.
  • Die Navigation zu einem ☰ eingeklappt.
  • Legen Sie die Hintergrundfarbe der Navigation mit Menüfarbe unter Mobil-Menü: Allgemein fest.
  • Die Schließen-Button-Anpassungen 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 Sie darauf tippen, öffnet das Suchsymbol ein Overlay mit einer Suchleiste. Der Overlay-Hintergrund richtet sich nach der Website-Hintergrundfarbe.

Obwohl sie getrennte Stile haben, wird das gleiche Element sowohl auf dem Computer als auch auf Mobilgeräten angezeigt. Beispielsweise ist Folgendes möglich/nicht möglich:

  • Möglich – Geben Sie Ihrem mobilen Seitentitel eine andere Farbe und Schriftart.
  • Möglich – Zeigen Sie Ihre Suchleiste auf Mobilgeräten an, aber blenden Sie sie auf einem Computer aus.
  • Nicht möglich – Zeigen Sie einen Seitentitel auf einem Computer und ein Logo auf Mobilgeräten an.

Mehr Hilfe mit Mobilgeräten

Beachten Sie dabei folgende Tipps:

Templates in der Brine-Gruppe.

Alle Templates in der Brine-Familie haben dieselben Stil-Optionen und Funktionen. Sie können die Brine-Templates im Template Shop durchsuchen.

Die Brine-Familie beinhaltet:

  • Aria
  • Basil
  • Blend
  • Brine
  • Burke
  • Cacao
  • Clay
  • Benutzerdefiniertes Template (Websites, die mit dem benutzerdefinierten Website-Builder erstellt wurden)
  • Ethan
  • Fairfield
  • Feed
  • Foster
  • Greenwich
  • Hatch
  • Heights
  • Hunter
  • Hyde
  • Impact
  • Jaunt
  • Juke
  • Keene
  • Kin
  • Lincoln (eingestellt)
  • Maple
  • Margot
  • Marta
  • Mentor
  • Mercer
  • Miller
  • Mojave
  • Moksha
  • Motto
  • Nueva
  • Pedro
  • Polaris
  • Pursuit
  • Rally
  • Rover
  • Royce
  • Sofia
  • Sonny
  • Sonora
  • Stella
  • Thorne
  • Vow
  • Wav
  • West

Kundenbeispiele

Wenn Sie Beispiele von echten Websites von Kunden sehen möchten, klicken Sie auf die Links unten und scrollen Sie zu Kunden, die dieses Template verwenden. Da alle Templates in dieser Gruppe über die selben Funktionen verfügen, können Sie diese als Inspiration verwenden, selbst wenn Ihr Template nicht in der Liste unten aufgeführt ist.

Sprachoptionen

Sole unterstützt zwei Sprachoptionen:

War dieser Beitrag hilfreich?
92 von 174 fanden dies hilfreich
Brine-Template-Gruppe