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

Template-Gruppe Bedford

Die vielseitige Bedford-Template-Gruppe (Anya, Bedford, Bryant, Hayden) eignet sich für alle Arten von Websites, von gemeinnützigen Organisationen bis hin zu Immobilienangeboten. Spezielle anpassbare Banner und Buttons, Seitenleisten-Navigation und eine scrollende Indexseite stellen deine Produkte, deine Mission oder deine Event-Details in den Mittelpunkt. 

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

Tipp: Die Live-Vorschau-Seiten für Anya, Bedford, Bryant und Hayden zeigen echte Kunden-Websites an, die diese Templates verwenden.

Unterstützte Seiten-Typen

Bedford unterstützt diese Seiten-Typen:

Kopfzeile

Besucher verwenden die Kopfzeile am Seitenanfang, um durch deine Website zu navigieren. In Bedford beinhaltet die Kopfzeile Seitentitel oder Logo und die Hauptnavigation. Slogans werden nicht angezeigt. Die Kopfzeile ist auf Index-Seiten fixiert.

Gestalte den Seitentitel oder das Logo im Abschnitt Website-Kopfzeile.

  • Mit Transparent auf Banner-Bildern kannst du auswählen, ob die Markenführung und die Navigation als Overlay über Seiten-Bannern oder über der Kopfzeilen-Hintergrundfarbe angezeigt werden soll.
  • Ändere die Größe des Logos mit Logo-Container: Breite. Die maximale Höhe ist auf ca. 100 Pixel beschränkt. Darüber hinaus wird das Logo nicht weiter skaliert. 

Verwende Website-Navigation-Anpassungen, um die Anzeigeeinstellungen für die Primärnavigation zu ändern.  

  • Wenn Navigations-Button aktivieren aktiviert ist, wird die letzte Seite in der Primärnavigation als Button angezeigt. Mit den Anpassungen unter Navigations-Button kannst du anpassen, wie dieser aussieht. Ordner werden nicht zu Buttons. 
  • Wenn im Browser-Fenster nicht genug Platz für die Navigationslinks in der Kopfzeile vorhanden ist, wird stattdessen ein ☰ angezeigt. 

Bedford-Kopfzeile

Banner

Füge randlose Banner-Bilder und -Videos am oberen Rand deiner Seiten hinzu und überlagere diese dann mit anpassbaren Überschriften, Texten und Buttons. Hier kannst du Banner-Bilder und Videos hinzufügen:

  • Layout-Seiten
  • Albumseiten
  • Blogseiten und -einträge
  • Veranstaltungsseiten und einzelne Veranstaltungen
  • Produktseiten

Denken Sie daran:

  • Du kannst Transparent auf Banner-Bildern in Website-Kopfzeile aktivieren, um den Kopfzeilen-Inhalt über dem Banner anzuzeigen.
  • Du kannst Slideshow-Banner zu Layout- und Blog-Seiten hinzufügen.
  • Du kannst mehrere Banner vertikal in Index-Seiten anordnen.
  • Verwende bei allen Bannern die Anpassungen unter Banner-Abschnitt, um die Schriftarten, Farben und Stile für die Buttons und Text-Overlays anzupassen.

Seiten Banner

Erstelle ein Banner-Bild oder -Video am oberen Rand von Layout-, Album-, Blog-, Event- oder Produkt-Seiten, indem du Vorschaubilder oder Video-URLs in den Seiteneinstellungen hinzufügst.

Füge ein Text-Overlay im Feld Seiten-Beschreibung des Tabs Allgemein hinzu. Du kannst den Text als Kopfzeilen und Buttons formatieren. Seitentitel-Text wird nicht angezeigt.

Slideshow-Banner

Erstelle ein Slideshow-Banner oben auf einer Layout-Seite, indem du einen Slideshow-Galerie-Block als ersten Block auf der Seite hinzufügst. 

  • Der Galerie-Block wird nicht auf der Seite angezeigt. 
  • Slideshow-Banner haben Vorrang vor Seiten-Bannern. 
  • Videos, die dem Galerie-Block hinzugefügt wurden, erscheinen im Banner, werden aber nicht automatisch abgespielt. Sie beinhalten Ton und zeigen Banner-Text an.
  • Aktiviere für optimale Ergebnisse Bilder automatisch abschneiden im Tab Design des Block-Editors. 
  • Wenn dein Banner ein Text-Overlay hat, aktiviere die Option Titel und Beschreibung anzeigen im Tab Design. Der Titel wird nicht angezeigt.
  • Slideshow banners have a fixed height:
    • Desktop – 600 Pixel. Wenn die Kopfzeile auf Banner-Bildern transparent ist, beträgt die feste Bildhöhe 700 Pixel. 
    • Mobil – 300 Pixel. Geräte mit einer Anzeige über 640 Pixel zeigen die Desktop-Banner-Höhe an.
  • Blog-Seiten erstellen außerdem Slideshow-Banner aus ausgewählten Beiträgen. 

Um Overlay-Text hinzuzufügen, klicke auf ein Bild und füge Text in das Feld Beschreibung ein. Wenn du auf eine bestehende Galerie verlinkt hast, aktualisiere die Beschreibungen auf der Galerie-Seite. 

  • Du kannst den Text als Kopfzeilen und Buttons formatieren. 
  • Wenn der Text auf einem Slideshow-Banner zu lang für die feste Höhe ist, wird der nicht fette Beschreibungstext nicht angezeigt. Der fette Beschreibungstext wird abgeschnitten.

Slideshow-Banner

Für Seiten- und Slideshow-Banner:

  • Bold text formats as a header.
  • Normaler Text wird als Textkörper formatiert.
  • Links in der letzten Zeile werden als Buttons formatiert. Der Link darf keinen fettgedruckten Text oder andere Zeilen unterhalb des Links enthalten.
  • Mache das Seiten-Banner höher, indem du Leerzeichen hinzufügst

Text-Overlay in Seiteneinstellungen

banner text and buttons.jpg

Blogeintrag und Event-Banner

Vorschaubilder für Sammlungsinhalte werden oben in Blogeinträgen und einzelnen Events angezeigt. Diese Banner haben eine feste Höhe.

  • Events – Kein Text wird im Banner angezeigt.
  • Blogeinträge – Der Titel des Blogeintrags und ein Metadaten-Element (Auswahl mit der Anpassung Meta-Priorität) werden über dem Banner-Bild angezeigt. 

Einen Farbfilter hinzufügen

Füge einen Farbfilter zu allen Banner-Bildern oder -Videos mit Banner-Overlay: Farbe im Banner-Abschnitt hinzu. 

  • Die Farbe wird im Banner-Bereich angezeigt, während das Banner-Bild geladen wird, auch wenn die Anpassung transparent ist.
  • Die Farbe erscheint auf Mobilgeräten, wenn das Video-Banner nicht geladen werden kann und du kein Ersatzbild für Mobilgeräte festgelegt hast.

Weitere Hilfe mit Bannern

Fußzeilen

Bedford enthält Inhaltsbereiche für den Footer und die Vor-Fußzeile, die du mit Blöcken anpassen kannst. 

  • Der Footer und die Vor-Fußzeile können automatisch Inhalte enthalten, wie z. B. einen Social-Link-Block oder einen Text-Block. Lösche oder bearbeite diese Blöcke, um sie mit deinen eigenen Inhalten zu ersetzen.
  • Text-Links im Footer und Pre-Footer sind unterstrichen.
  • Änderungen, die du am Footer vornimmst, erscheinen auf deiner gesamten Website. 

Verwende Footer-Anpassungen, um die Footer-Inhalte zu gestalten:

  • Gestalte die Footer-Navigation mit den Anpassungen zu Footer-Navigation.
  • Benutze die Anpassung Mittig in der Navigation / Info, um die Footer-Navigation und die Kontaktinformationen auszurichten.
  • Verwende die Website-Info-Anpassungen, um die Telefonnummer, E-Mail und den physischen Standort über deine Geschäftsinformationen-Einstellungen zu gestalten. 
  • Aktiviere Website-Info ausblenden, um alle Kontaktinformationen zu entfernen.

Seitenleisten-Navigation

Bedford erstellt Navigations-Seitenleisten auf Seiten in Ordnern und Indizes sowie Kategorie-Navigations-Seitenleisten auf Produkt-Seiten.

  • Mit den Seitenleisten-Anpassungen kannst du Schriftarten und Farben anpassen, die Titel von Seitenleisten ausblenden oder die Seitenleisten-Navigation komplett verbergen.
  • Die Seitenleisten-Navigation unterstützt keine Blöcke.
  • Jede Seite, die zu einem Ordner hinzugefügt wird, erscheint als Link in der Seitenleisten-Navigation. Die Seitenleiste wird auf einer beliebigen Layout-Seite im Ordner angezeigt.
  • Seiten in einem Index zeigen die Seitenleisten-Navigation nur dann an, wenn die direkte URL für die einzelne Seite aufgerufen wird. 
  • Auf Produkt-Seiten werden in der Seitenleisten-Navigation Links zu verschiedenen Produktkategorien angezeigt. Wenn du auf einen Link klickst, werden alle Produkte außer denen in der jeweiligen Kategorie herausgefiltert.

Products Page sidebar navigation.jpg

Hintergrund und Schriftarten

Verwende die Hauptinhalt-Anpassungen, um deinen Hauptinhaltsbereich zu gestalten.

  • Lege die Hintergrundfarbe mit Seitenhintergrund fest.
  • Passe den Textstil, die Größe und die Farbe mit den Funktionen Seitentext und Überschrift an. 

Die Website-Kopfzeile, die Seitenleisten-Navigationen und die Seiten-Banner haben ihre eigenen Schriftart- und Farboptionen.

Index-Seiten

Die Index-Seiten von Bedford wandeln den Inhalt mehrerer Seiten in gestapelte Abschnitte um, sodass du verschiedene Bilder und Informationen an einem einzigen Ort hervorheben kannst. Inhaltsabschnitte werden mit Layout-Seiten erstellt und sind eine gute Option zum Hinzufügen von Text, Buttons und sonstigen Blöcken

  • FügeSeiten-Vorschaubilder hinzu, um Banner-Bilder oder -Videos oder eine Banner-Slideshow zu erstellen.
  • Staple mehrere Banner, indem du Abschnitte mit Bannerbildern erstellst, jedoch ohne Seiteninhalt. Lösche für neue Seiten den Standard-Textblock. Du wirst immer noch Platzhalter-Leerraum sehen, während du bei deiner Website angemeldet bist.
  • Gestalte die Farben und Schriftarten der Index-Seite mit den gleichen Anpassungen wie andere Seiten. Es gibt keine Anpassungen speziell für die Index-Seite.
  • Der Seitentitel und die Primärnavigation bleiben an einer festen Position, nachdem du über die erste Seite hinaus gescrollt hast. Mit der Anpassung Kopfzeilen-Hintergrundfarbe kannst du die Hintergrundfarbe der festen Kopfzeile anpassen.
  • Index-Seiten unterstützen Index-Anker-Links. Wenn Besucher auf diese Links klicken, springen sie zu einem bestimmten Abschnitt deiner Index-Seite. Um dies in Aktion zu sehen, klicke auf den Button „Unsere Arbeit“ in den Demo-Inhalten von Hayden.
  • Wenn du die direkte URL für eine Seite aufrufst, die Teil eines Index ist, werden alle Seiten in diesem Index in einer Seitenleisten-Navigation angezeigt. 

Index-Seiten-Abschnitte mit fester Navigation

Blogseiten

Bedford-Blog-Seiten werden als Liste vertikal angeordneter Beiträge angezeigt:

  • Auszüge können nur Text enthalten. Der Text und der Pfeil für „Mehr lesen“ folgen den Anpassungen Seitentext-Schriftart und Seitenlink: Farbe.
  • Wenn du einen einzelnen Blogeintrag unter seiner direkten URL aufrufst, wird dessen Beitrags-Vorschaubild als Banner angezeigt.
  • Einzelne Beiträge zeigen immer Tags, Quell-URLs, Kommentare, Shares und Likes an. Die Navigation zu vorherigen und nächsten Beiträgen wird unter den Kommentaren angezeigt.

Gestalte Blog-Seiten im Blog-Abschnitt:

  • Verwende Meta-Priorität, um das Datum, die Kategorien oder den Autorennamen über dem Beitragsinhalt festzulegen.
  • Deaktiviere das Kontrollkästchen Footer des Listeneintrags verbergen, um Tags, die Quell-URL, Kommentare, Shares und Likes unter dem Beitrag anzuzeigen.
  • Um Beitragstitel und Metadaten zu zentrieren, aktiviere Eintragstitel & Meta zentrieren.
  • Mit Beitragsautor ausblenden kannst du Blog-Autoren anzeigen oder ausblenden. Diese Anpassung wird nicht angezeigt, wenn Meta-Priorität: Autor ausgewählt ist. 

Blogeintrag

Seitenleiste

Jede Blog-Seite hat eine anpassbare Seitenleiste. Alle Blogeinträge in diesem Blog zeigen außerdem die Seitenleiste an.

Aktiviere Seitenleisten, indem du die Option Blog-Seitenleiste ausblenden im Abschnitt Seitenleiste deaktivierst und füge dann Inhalte mit Blöcken hinzu

Seitenleiste auf Blog-Seite

Slideshow-Banner

Die fünf aktuellsten ausgewählten Beiträge bilden ein Slideshow-Banner auf der Landing-Page.

  • Jede Folie zeigt den Titel des Blogeintrags, ein Metadaten-Element (Auswahl mit der Anpassung Meta-Priorität) und einen Beitrag anzeigen-Link an.
  • Das Vorschaubild wird hinter dem Text angezeigt. Wenn der Beitrag kein Vorschaubild hat, wird der Text über der Banner-Overlay-Farbe angezeigt.
  • Verwende die Anpassung Banner-Slideshow: Steuerung, um die Navigationselemente auf dem Slideshow-Banner deines Blogs zu regeln.
  • Wenn keiner deiner Beiträge als Ausgewählt markiert ist, wird stattdessen das Seiten-Banner auf der Blog-Seite angezeigt.

Mobilgeräte

Mit dem integrierten Responsiven Design von Squarespace passt sich Ihre Website an, damit sie auf jedem Gerät hervorragend aussieht.

  • Der Inhalt der Blog-Seitenleiste wird unter dem Hauptinhalt auf Blog-Seiten und Blogeinträgen angezeigt.
  • Navigations-Seitenleisten sind standardmäßig ausgeblendet. Tippe oben rechts auf +, um Navigationsseitenleisten von Produkt-Seiten, Seiten in einem Ordner und Index-Seitenabschnitten anzuzeigen, auf denen Besucher über einen direkten Link landen.
  • Slideshow-Banner haben eine festgelegte Höhe von 300 Pixeln. Wenn der Text auf einem Slideshow-Banner zu lang ist, um in die Ansicht zu passen, wird der Beschreibungstext versteckt.
  • Du kannst Stile für Mobilgeräte deaktivieren, wir raten jedoch davon ab. 

Ein Zurück zum Seitenanfang-Link wird unten auf der Seite angezeigt. 

  • Der Link folgt den Anpassungen Footer-Navigation: Schriftart und Footer-Navigationslink: Farbe im Abschnitt Footer. Wenn diese Anpassungen nicht angezeigt werden, füge vorübergehend Seiten zu deiner Footer-Navigation hinzu. 
  • Der Link wird nicht in in der Geräteansicht angezeigt.

Auf Smartphones:

  • Die Navigation wird unter einem ☰ oben rechts eingeklappt. Das ☰ wird auf Mobilgeräten immer angezeigt, auch wenn die Primärnavigation leer ist.
  • Die Hintergrundfarbe des Menü-Overlays ist die gleiche wie die der Kopfzeile.
  • Footer, die Geschäftsinformationen anzeigen, beinhalten einen E-Mail-Link anstelle der vollständigen E-Mail-Adresse. 

Smartphone- und Tablet-Ansicht

Sprachoptionen

Bedford unterstützt zwei Sprachoptionen: 

War dieser Beitrag hilfreich?
54 von 95 fanden dies hilfreich
Template-Gruppe Bedford