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

Template-Gruppe York

Die Template-Gruppe York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor und York) ist darauf ausgelegt, die Arbeit von Illustratoren, Fotografen, Kreativagenturen und sonstigen Produzenten visueller Inhalte zu präsentieren. Mit einer Raster-Index-Seite und einzigartigen Projekt-Seiten geben diese Templates dir die nötigen Werkzeuge an die Hand, um deinen kreativen Output zur Schau zu stellen und mit anderen zu teilen.

Diese Anleitung behandelt die Funktionen und Gestaltungsmöglichkeiten der York-Gruppe. Anpassungen unter Website-Stile werden in fetter Schrift angezeigt und verlinken auf die Liste aller York-Anpassungen, um dir die Navigation des Menüs zu erleichtern.

Unterstützte Seiten-Typen

York unterstützt diese Seiten-Typen:

Kopfzeile

Besucher verwenden den Vollbild-Header im oberen Bereich, um auf deiner Website zu navigieren. In York ist die Kopfzeile in drei Bereiche unterteilt: links, Mitte und rechts. Du kannst jedes der folgenden Elemente zur Kopfzeile hinzufügen:

Gestalte das Kopfzeilen-Layout im Abschnitt Website: Kopfzeilen-Layout:

  • Wähle Linkes Layout, Mittiges Layout oder Rechtes Layout, um das Layout von Horizontal zu Gestapelt zu ändern. Diese Optionen werden angezeigt, nachdem du zwei oder mehr Elemente in en Kopfzeilen-Bereich eingefügt hast.
  • Lege mit der Anpassung Header in voller Breite fest, wie der Header angezeigt wird.

Die Kopfzeile gestalten

Gestalte den Header-Inhalt in Website: Header:

  • Lege die Schriftart und Farbe des Website-Titels mit Website-Titel fest.
  • Lege die Schriftart und Farbe des Slogans mit Website-Slogan fest.
  • Ändere die Logo-Größe mit Logo-Größe (max.).
  • Unter Warenkorb kannst du Schriftart, Farbe und Stil des Warenkorbs festlegen.

Gestalte die Navigation unter Website-Navigation:

  • Ändern Sie die Primärnavigation und die Sekundärnavigation mit Primär und Sekundär.
  • Neben Drop-down-Menüs kannst du mit Ordner-Indikator anzeigen ein Caret-Symbol ein- oder ausblenden.

folder_indicator_caret.png

Weitere Hilfe zu Kopfzeilen

Tipps:

Kopf- und Fußzeile der Seite

Seiten-Header und -Footer sind eine hervorragende Möglichkeit, einzelne Seiten anzupassen. Um Blöcke hinzuzufügen, fahre mit dem Mauszeiger über den oberen oder unteren Bereich der Seite und klicke dann auf Bearbeiten auf der Anmerkung Sammlung: Header-Inhalt oder Sammlung: Footer-Inhalt.

York hat Seiten-Kopfzeilen und -Footer auf:

  • Album-Seiten
  • Blogseiten
  • Veranstaltungsseiten
  • Galerie-Seiten
  • Index-Seiten
  • Shop-Seiten
  • Projektseiten

Um diese auf deiner gesamten Website zu aktivieren, aktiviere Seiten-Header anzeigen und/oder Seiten-Footer anzeigen im Abschnitt Seite. Text-Blöcke im Seiten-Header und im Footer folgen den Anpassungen unter Website: Typografie.

Denken Sie daran:

  • Einzelne Sammlungsinhalte, wie z. B. Blogeinträge, unterstützen keine Kopfzeilen und Footer.
  • Versteckte Kopfzeilen- oder Footer-Inhalte können immer noch erscheinen, wenn du eine Seite in sozialen Medien teilst. Um dies zu verhindern, lösche den Inhalt, bevor du die Kopfzeile oder den Footer ausblendest.
  • Seiten innerhalb eines Index zeigen die Navigation unterhalb des Seiten-Footers an.

Footer für die gesamte Website

Um einen Footer für die gesamte Website zu aktivieren, aktiviere die Option Globalen Website-Footer anzeigen unter Website: Footer. Um Blöcke hinzuzufügen, fahre mit dem Mauszeiger über den Footer und klicke auf Bearbeiten. Die vollständigen Schritte findest du unter Footer bearbeiten.

Seiten Banner

Füge oben auf diesen Seitentypen ein Banner-Bild oder -Video hinzu:

  • Album-Seiten
  • Blogseiten
  • Veranstaltungsseiten
  • Galerie-Seiten (nur Bilder)
  • Index-Seiten
  • Layout-Seiten
  • Shop-Seiten
  • Projektseiten

Um ein Banner-Bild oder -Video hinzuzufügen, füge ein Vorschaubild oder eine Video-URL im Tab Medien in den Seiteneinstellungen hinzu.

Denken Sie daran:

  • Diese Banner erstellen eine Miniatur-Navigation auf Index-Seiten.
  • Wenn die Seite kein Vorschaubild hat, zeigt das Banner eine Hintergrundfarbe an. Eventuell musst du die Transparenz ändern.
  • Banner-Einstellungen sind für jeden Seiten-Typ universell. Mit den Banner-Anpassungen im Abschnitt Seite kannst du ein Banner für einen Seiten-Typ ein- oder ausblenden.
  • Der Seitentitel und die -beschreibung können das Banner überlagern.
  • Banner unterstützen das Laden animierter Seiten.

Reines Startseiten-Banner

Du kannst ein Banner auf deiner Startseite anzeigen, es aber für alle anderen Seiten dieses Typs ausblenden. Wenn deine Startseite z. B. eine Layout-Seite ist, würdest du diese Schritte befolgen:

  1. Gehe zur Startseite.
  2. Öffnen Sie Website-Stil.
  3. Scrolle nach unten zu Seite.
  4. Deaktiviere Seiten-Banner anzeigen. Dadurch wird das Banner auf allen Layout-Seiten ausgeblendet.
  5. Aktiviere Startseiten-Banner anzeigen. Damit wird das Banner auf der Startseiten-Layout-Seite angezeigt.

Der Seitentitel und die Seitenbeschreibung bleiben universell. Wenn du z. B. die Option Seitentitel anzeigen aktivierst, wird der Seitentitel auf der Startseite und allen anderen Layout-Seiten angezeigt.

Banner gestalten

Gestalte Banner im Abschnitt Banner. Diese Anpassungen betreffen alle Seiten-Banner auf deiner Website.

  • Lege auf Seiten mit Vorschaubildern die Banner-Höhe mit Höhe fest.
  • Positioniere das Bild mit der Bildausrichtung im Banner.
  • Wenn die Bildausrichtung auf rechts oder links eingestellt ist, füllen Sie die rechte oder linke Hälfte des Bildes mit Bild zuschneiden. Um das gesamte Banner zu füllen, legen Sie die Bildausrichtung als zentriert fest und aktivieren Sie das Kontrollkästchen Bild zuschneiden.
  • Aktiviere Automatische Hintergrundfarbe, damit das Banner automatisch eine Hintergrundfarbe aus dem Vorschaubild übernimmt. Dies ist nützlich für Illustrationen und Bilder mit einer einzigen dominanten Hintergrundfarbe, da das Bild so bis zu den Rändern des Banners zu reichen scheint.
  • Um das Banner bis zu den Rändern des Browsers zu erweitern, aktivieren Sie Randloses Banner.
  • Navigations-Banner in einem Index weisen eigene Style-Einstellungen auf.

Die Hintergrundfarbe wird an folgenden Stellen angezeigt:

  • Auf Bannern, die keine Vorschaubilder haben
  • Während ein Banner-Bild oder -Video geladen wird
  • Hinter Vorschaubildern, die nicht das ganze Banner ausfüllen, wenn die Option Automatische Hintergrundfarbe nicht aktiviert ist

banner_sample_1.png

Banner_sample_2.png

Banner_sample_3.jpg

banner_sample_4.png

Seitentitel und Beschreibungen

Über die Seiteneinstellungen kannst du den Seitentitel und die Seitenbeschreibung oben auf jeder beliebigen Seite anzeigen. Projekt-Seiten und Galerie-Seiten können auch einzelne Bild-Kategorien anzeigen.

  • Diese Einstellungen sind für jeden Seiten-Typ universell.
  • Blende den Text mit Titel, Beschreibung und Kategorie im Abschnitt Seite aus oder zeige ihn an.
  • Text kann das Seiten-Banner überlagern oder allein angezeigt werden.
  • Blende die Beschreibung einer einzelnen Seite aus, indem du sie über die Seiteneinstellungen löschst.

Text auf Bannern vs. kein Banner

Du kannst unterschiedliche Stil-Optionen zuweisen, je nachdem, ob der Text über einem Banner oder über der Seite angezeigt wird. Der von dir verwendete Abschnitt „Website-Stile“ ist unterschiedlich je nachdem, ob sich auf deiner Seite ein Banner befindet:

Formatiere den Text mit Titel, Beschreibung und Kategorie.

Seiten ohne Banner haben zusätzlichen Optionen:

  • Lege die Seitenränder für den Text mit Textbreite fest.
  • Lege den Abstand oberhalb und unterhalb des Textes mit Texthöhe fest.

Text, der über einem Banner angezeigt wird, hat diese zusätzlichen Optionen:

  • Positioniere Text im Banner mit Ausrichtung.
  • Lege die Seitenränder für den Text mit Breite fest.
  • Füge mit den Markieren-Anpassungen eine Farbe hinter dem Text hinzu. Lege die Breite der Hintergrundfarbe mit Hervorhebungs-Text-Einzug fest.

text_on_a_banner.png

Blogseiten

In der Template-Gruppe York wird eine Blog-Seite mit Standard-Raster/-Liste verwendet. Mehr über die einmaligen Funktionen und Stil-Optionen dieser Art von Blog erfährst du unter Blog-Seiten mit Standard-Raster/-Liste.

Projektseiten

Die Projekt-Seite ordnet Bilder, Titel und Beschriftungen in eleganten Layouts an. Dies ist eine einzigartige Alternative zu einer Galerie-Seite, insbesondere wenn du eine Mischung aus Text und Bildern verwendest.

Mehr dazu erfährst du unter Projekt-Seiten.

york-project.png

Index-Seiten

York-Index-Seiten erstellen Navigations-Vorschaubilder in einem Banner oder einem Raster, mit denen Besucher verschiedene Seiten aufrufen können.

  • Das Navigations-Raster zeigt Seiten-Vorschaubilder an. Selbst wenn eine Seite ein Video-Banner hat, wird ihr Vorschaubild im Raster angezeigt.
  • Du kannst ein Seiten-Banner, einen Navigationstitel und einen Beschreibungstext sowie anpassbare Kopfzeilen- und Footer-Bereiche hinzufügen.
  • Auf Mobilgeräten zeigen Index-Seiten ein Vorschaubild pro Zeile an.
  • Index-Seiten folgen nicht der Website: Max. Breite.

index-example__1___1_.png

Unterstützte Seiten

Du kannst die folgenden Seiten zu einem Index hinzufügen:

  • Album-Seiten
  • Blogseiten
  • Galerie-Seiten
  • Veranstaltungsseiten
  • Shop-Seiten
  • Projektseiten
  • Layout-Seiten

Vorschaubilder

Füge ein Vorschaubild oder eine Video-URL zu den Einstellungen einer Seite hinzu, um sie im Vorschaubild der Index-Navigation anzuzeigen. Gestalte die Vorschaubilder unter Index: Inhaltsbild:

  • Richte das Bild im Vorschaubild an der Bildausrichtung aus.
  • Fülle die rechte Hälfte, die linke Hälfte oder das gesamte Vorschaubild mit Bild abschneiden. Diese Option erscheint, wenn Bildausrichtung auf Rechts, Links oder Mittig gesetzt ist.
  • Wähle mit Bild-Deckkraft aus, wie viel von der Hintergrundfarbe durch das Bild hindurch zu sehen ist.
  • Ändere, wie stark das Bild verblasst, wenn Besucher mit der Maus über das Bild fahren.
  • Um das gesamte Vorschaubild zu füllen, wähle Bildausrichtung: Zentrieren aus und aktiviere Bild zuschneiden.
  • Um Vorschaubilder so einzustellen, dass automatisch eine Hintergrundfarbe aus dem Vorschaubild oder -Video übernommen wird, aktiviere Automatische Hintergrundfarbe.
  • Wählen Sie eine Artikel-Hintergrundfarbe aus, die in Vorschaubildern ohne Bilder oder Videos angezeigt werden soll. Diese Anpassung wird angezeigt, wenn die Option Hintergrund automatische Farbe deaktiviert ist.

Die Vorschaubild-Hintergrundfarbe wird angezeigt:

  • Wenn Navigations-Vorschaubilder keine Bilder oder Videos enthalten
  • Hinter Bildern, die nicht das ganze Vorschaubild ausfüllen
  • Durch Vorschaubilder, wenn Sie ihre Deckkraft geändert haben

Vorschaubild-Layout

Index-Navigations-Vorschaubilder können als Banner oder in einem Raster angezeigt werden. Lege den Stil im Abschnitt Index: Layout fest.

  • Zeige die Vorschaubilder als Banner mit Artikelbreite an. Wähle entweder Voll oder Halb aus, um ein oder zwei Banner pro Zeile anzuzeigen.
  • Lege die Höhe der Banner mit der Artikelhöhe fest.
  • Wenn du die Vorschaubilder in einem Raster anzeigen möchtest, wähle Element-Breite: Raster aus. Gestalte das Raster mit den Anpassungen für Spalten und dem Vorschaubild-Verhältnis.
  • Lege den Abstand zwischen den Bannern oder Thumbnail-Kacheln mit Element: Abstände fest.
  • Um die Vorschaubilder auf den Browserrand zu erweitern, aktiviere den Randlosen Index. Wenn diese Option deaktiviert ist, folgen Vorschaubilder dem Padding der Website. Dies betrifft auch das Banner im Seiten-Header.
  • Wenn du zwischen Zeilen, in denen ein Banner bzw. zwei Banner angezeigt werden, wechseln möchtest, aktiviere Alternative Breiten. Diese Option wird angezeigt, wenn Banner auf Bild-Ausrichtung: Mittig und Index: Breite auf Voll oder Halb gesetzt sind.
  • Um die Seite zu wechseln, auf der das Bild angezeigt wird, aktiviere Alternative Seiten. Diese Option wird angezeigt, wenn Banner auf Bildausrichtung: Rechts oder Links und Index-Breite auf Voll gesetzt sind.

Index-Vorschaubilder können den Navigationstitel für jede Seite und Kategorien anzeigen, die du zu Bildern auf Galerie- und Projekt-Seiten hinzugefügt hast. Der Navigationstitel erscheint auf Index-Vorschaubildern, aber der Seitentitel erscheint am oberen Rand einzelner Seiten. Das bedeutet, dass du unterschiedlichen Text an diesen beiden Stellen anzeigen lassen kannst.

Ändern Sie Schriftart, Farbe und Größe des Textes mit dem Abschnitt Index: Artikeltext.

  • Wähle mit Titel-Anzeige, wie die Titel angezeigt werden sollen.
  • Um den Kategorietext auszublenden, aktivieren Sie die Option Kategorien anzeigen.
  • Um anpassbare Hintergrundfarben hinter dem Text hinzuzufügen, aktivieren Sie Titelhintergrund verwenden und Kategoriehintergrund verwenden.
  • Lege mit Textausrichtung fest, wo der Text angezeigt wird.

index_thumbnails_with_titles.png

Navigation

Um die Index-Navigation zu gestalten, gehe zu einer Seite innerhalb des Index und öffne dann „Website-Stil“.

Die Navigation wird am unteren Rand aller Seiten innerhalb eines Index angezeigt. Um sie auszublenden, deaktiviere Index-Navigation anzeigen. Um sie zu gestalten, verwende den Abschnitt Index: Navigation:

  • Setze Link-Stil auf Liste, um alle Seiten im Index als Navigationslinks anzuzeigen.
  • Setze Link-Stil auf Weiter, um ein Weiter-Label anzuzeigen. Deaktiviere Nur Label anzeigen, um den Namen der nächsten Seite nach dem Weiter-Label anzuzeigen.

link-style-list.png

link-style-next.png

Für beide Stile kannst du den Text als Inline oder Gestapelt anzeigen und die Farbe, Schriftart und Skalierung des Textes ändern. Lege den Linkstil fest, einschließlich Abstand, Schriftart und Art der Trennung der Links, mit den anderen Anpassungen in Index: Navigation.

Seite wird geladen

York-Templates unterstützen Ajax, eine Methode zum Laden von Seiten, die deine Website schneller macht, indem nur der Inhalt geladen wird, der auf der Seite sichtbar ist. Um ein nahtloses Nutzererlebnis zu schaffen, empfehlen wir, Ajax Loading aktiviert zu halten. Weitere Hilfe erhalten Sie unter Ajax Loading.

York-Templates unterstützen außerdem spezielle Seitenanimationen:

  • Bilder und Beschriftungen auf Projekt-Seiten scheinen von unten nach oben zu gleiten, wenn du auf der Seite nach unten scrollst. Deaktiviere die Anpassung Bilder und Beschriftungen kaskadieren, um den Effekt zu entfernen.
  • Inhalte auf Seiten in einem Index scheinen beim ersten Laden nach oben zu gleiten. Deaktiviere die Anpassung Animation für Seitenübergänge, um diesen Effekt zu entfernen.
  • Seiten-Banner werden mit einem Einblend-Effekt geladen.

Nicht alle Animationen sind sichtbar, wenn du angemeldet bist. Um eine Vorschau der Effekte zu sehen, besuche deine Website im Privat- oder Inkognito-Modus.

image-sliding-up.gif

page_banner_fading_in.gif

Struktur und Style

Teilen-Schaltflächen

Anpassbare Sharing-Buttons werden auf Blogeinträgen und Produktdetailseiten angezeigt:

  • Legen Sie die Größe, den Abstand, die Farbe und den Stil im Abschnitt Sharing-Buttons fest. Je nach gewähltem Stil werden weitere Anpassungen angezeigt, um die Buttons weiter anzupassen.
  • Wähle im Abschnitt Produkte: Details die Sharing-Buttons für das Produkt aus. Blende die Symbole für Produktartikel aus, indem du Sharing-Buttons anzeigen deaktivierst.
  • Verwende Sharing-Symbole in Blog: Artikel , um auszuwählen, ob die Sharing-Buttons über oder unter dem Inhalt einzelner Blogeinträge angezeigt werden.
  • Der Sharing-Button für Pinterest wird nur auf Seiten mit Vorschaubildern angezeigt.
  • Album- und Events-Seiten enthalten einen Sharing-Link mit Pop-up-Sharing-Buttons. Diese Buttons folgen keinen angepassten Stilen.

Layout und Hintergrund

Lege das Padding deiner Website im Abschnitt Website fest:

  • Lege den Abstand zwischen dem Website-Inhalt und dem oberen Rand des Browsers mit Website: Abstände fest.
  • Lege den Abstand zwischen dem Website-Inhalt und den Seiten des Browsers mit Website: Äußeres Padding fest.
  • Wenn Kopfzeile in voller Breite deaktiviert ist, folgt die Kopfzeile der Website: Ausrichtung und der Website: Max. Breite.
  • Lege die Hintergrundfarbe für die gesamte Website mit Website-Hintergrund fest.

Schriftarten

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

Du kannst bestimmte Texte je nach Browserbreite nach oben oder unten skalieren. So würdest du dies für „Überschrift 1“-Text tun:

  1. Aktiviere im Abschnitt Website: Typografie die Option Überschrift 1 skalieren.
  2. Lege die maximale Schriftgröße mit Überschrift 1 fest.
  3. Lege die minimale Schriftgröße mit Überschrift 1: Min. fest.

Wir empfehlen, die Mindestschriftgröße jeder Kopfzeile größer als die Schriftgröße deines Textkörpers einzustellen. Mehr dazu erfährst du unter Schriftarten skalieren.

Seitenleiste

York-Templates unterstützen auf keiner Seite eine Seitenleiste. Eine Liste aller Templates mit Seitenleisten findest du unter Seitenleisten bearbeiten.

Social-Media-Symbole

York-Templates unterstützen keine integrierten Social-Media-Symbole. Füge stattdessen einen Social-Link-Block zum Footer oder zu deinem Seiteninhalt hinzu.

Mobilgerät

Mit dem integrierten Responsive Design von Squarespace passt sich deine Website so an, dass sie auf jedem Gerät hervorragend aussieht. Auf Mobilgeräten und schmalen Browsern ordnen sich Inhalte vertikal an.

Gestalte das Erscheinungsbild deiner Website auf Mobilgeräten in den Mobil-Abschnitten:

  • Wähle aus, ob die mobile Leiste mit der Seite nach oben scrollt oder oben oder unten mit der mobilen Leistenposition fixiert bleibt. Die Mobilgeräte-Leiste enthält deinen Website-Titel oder das Logo, das Navigationssymbol, den Slogan und den Warenkorb.
  • Lege mit Branding-Position fest, wo das Website-Branding und das Menüsymbol angezeigt werden.
  • Der Seitentitel, der Slogan, die Navigationslinks und der Warenkorb können alle unterschiedliche Stile für Mobilgeräte haben. Um deine Markenführung auf allen Geräten einheitlich zu halten, verwende dieselben Stile wie im Abschnitt Website.
  • Lege ein Ersatzbild für Mobilgeräte fest, das angezeigt wird, wenn das Video-Banner auf Mobilgeräten nicht geladen werden kann.
  • Das ☰ wird auf Mobilgeräten immer angezeigt, auch wenn die Primär- und Sekundärnavigationen leer sind.

Denken Sie daran:

smartphong-and-tablet-view.png

Sprachoptionen

York unterstützt zwei Sprachoptionen:

War dieser Beitrag hilfreich?
46 von 101 fanden dies hilfreich
Template-Gruppe York