Auto-Layouts

Präsentiere dein Team oder verschiedene Projekte mit Bildern, Text und Buttons in einem anpassbaren Layout.

Zuletzt aktualisiert: 24. Dezember 2024

Verwende automatische Layouts, um Inhaltsgruppen in Spalten und Zeilen, Karussells oder Slideshows darzustellen. Wenn du neue Inhalte zu einem automatischen Layout hinzufügst, werden diese basierend auf deinen gewählten Einstellungen automatisch neu angeordnet. Automatische Layouts sind daher ideal für Inhalte, die du regelmäßig aktualisierst, wie z. B. vorgestellte Produkte, neueste Projekte, aktuelle Teammitglieder, Erfahrungsberichte oder ehemalige Kunden.

Im Mittelpunkt dieser Anleitung stehen die automatisierten Layouts, die eine Kombination aus Text und Bildern darstellen. Wenn du ein ähnliches Layout haben möchtest, in dem vor allem Bilder gezeigt werden, kannst du stattdessen einen Galeriebereich verwenden. Verwende einen Block-Abschnitt, um ähnliche Layouts manuell zu erstellen.

So erlangst du Zugriff auf diese Funktion

Diese Anleitung gilt für Version 7.1. Um einen ähnlichen Effekt in Version 7.0 zu erzielen, erstelle Spalten und Zeilen mit Blöcken.

Ein Video anschauen

Einen automatischen Layout-Abschnitt hinzufügen

So fügst du einen automatischen Layout-Abschnitt hinzu, der Text und Bilder enthält:

  1. Klicke auf der Seite auf Bearbeiten und dann auf Abschnitt hinzufügen.
  2. Klicke auf Personen, Services oder Erfahrungsberichte.
  3. Suche nach Layouts mit einem i-Symbol in der oberen rechten Ecke und klicke auf das gewünschte Layout.

Denk daran:

  • Um ein automatisches Layout hinzuzufügen, das Bilder zeigt, befolge stattdessen unsere Schritte für das Hinzufügen von Galerie-Abschnitten.
  • Wenn du rechts oben auf einen Abschnitt ohne i-Symbol klickst, fügst du einen Block-Abschnitt hinzu. Die restlichen Schritte in diesem Leitfaden gelten nicht für diesen Vorgang. Block-Abschnitte können ähnliche Layouts haben, müssen aber manuell angeordnet werden.
  • Auto-Layouts werden in anderen Kategorien angezeigt, aber Personen, Services und Erfahrungsberichte haben die meisten Optionen. Selbst wenn das Thema nicht dem entspricht, was du dir für deine Website wünschst, wirst du alle Demo-Inhalte durch deine eigenen ersetzen.

Festlegen, welche Elemente angezeigt werden

So wählst du aus, wie dein Abschnitt und deine Elemente angezeigt werden:

  1. Fahre mit der Maus über den Abschnitt und klicke auf Inhalt bearbeiten.
  2. Aktiviere oder deaktiviere im Tab „Elemente“ die Schalter für jede Option.

Verwende für den gesamten Abschnitt diese Schalter:

  • Titel – Zeigt oben im Abschnitt einen Texttitel an
  • Button – Zeigt unten im Abschnitt einen Button-Link an

Um die Anzeige von Elementen zu ändern, verwende diese Schalter:

  • Bild anzeigen – Zeigt ein Bild mit jedem Element an
  • Titel anzeigen – Zeigt den Titeltext mit jedem Element an
  • Textkörper anzeigen – Zeigt den Textkörper mit jedem Element an
  • Button anzeigen – Zeigt einen Button-Link mit jedem Element an

Denk daran:

  • Diese Optionen gelten für alle Elemente in diesem Abschnitt. Es ist nicht möglich, unterschiedliche Einstellungen für einzelne Elemente in einem Abschnitt vorzunehmen.
  • Wenn du einen Schalter deaktivierst, wird die entsprechende Option im Tab „Inhalt“ ausgeblendet. Wenn du beispielsweise den Schalter Titel anzeigen deaktivierst, wird das Feld Titel nicht im Element-Editor angezeigt.

Elemente hinzufügen oder bearbeiten

Jedes automatische Layout enthält Demo-Elemente. Du kannst den Inhalt dieser Elemente durch deine eigenen Inhalte ersetzen oder löschen und neue Elemente hinzufügen, um das Layout von Grund auf neu zu erstellen.

So fügst du Elemente hinzu oder bearbeitest sie:

  1. Fahre mit der Maus über den Abschnitt, klicke auf Inhalt bearbeiten und dann auf Inhalt.
  2. Klicke in der Liste Elemente auf ein Element, um dessen Inhalt zu bearbeiten, oder klicke auf Hinzufügen, um ein neues Element hinzuzufügen.
  3. Um ein Element neu anzuordnen, klicke auf das Symbol :: und ziehe es rechts neben den Titel des Elements.
  4. Um ein Element zu löschen, klicke auf das Papierkorb-Symbol rechts neben dem Element.

Jedes Element kann ein Bild, einen Titel, eine Beschreibung und einen Button haben. Wenn eine dieser Optionen nicht angezeigt wird, wenn du auf das Element klickst, vergewissere dich, dass sie im Tab „Elemente“ aktiviert sind.

Wenn du einem Element keinen Titel gibst, wird im Editor ein Standardtitel basierend auf seiner Reihenfolge im Auto-Layout angezeigt, z. B. „Element 1“ oder „Element 2“. Standardtitel sind für deine Besucher nicht sichtbar. Um dem Element einen Titel zu geben, klicke auf das Element und gib einen Titel in das Feld Titel ein.

Tipp

Du fügst alle Inhalte und deren Elemente manuell zu einem automatischen Layout hinzu. Wenn du Sammlungsinhalte aus einer vorhandenen Sammlung auf deiner Website anzeigen möchtest, verwende stattdessen Übersichts-Blöcke.

Den Abschnittstitel und Button bearbeiten

Im Tab „Inhalt“ kannst du auch den Titel und Button für den gesamten Abschnitt bearbeiten. Der Titel wird oben im Abschnitt angezeigt, während der Button unten angezeigt wird. So fügst du sie hinzu und bearbeitest sie:

  1. Stelle im Tab „Element“ sicher, dass die Schalter Titel und Button aktiviert sind.
  2. Klicke im Tab „Inhalt“ auf Titel, um Text hinzuzufügen und die Ausrichtung zu ändern.
  3. Klicke auf Button, um den Button-Text zu bearbeiten, einen Link einzurichten und die Größe und Ausrichtung des Buttons zu ändern.

Um eines dieser Elemente auszublenden, deaktiviere es im Tab „Elemente“.

Das Design des automatischen Layouts ändern

So änderst du das Layout des Abschnitts:

  1. Fahre mit der Maus über den Abschnitt, klicke auf Inhalt bearbeiten und dann auf Design.
  2. Klicke oben auf das Drop-down-Menü, um das Layout zu ändern.

Du kannst aus drei Layouts wählen:

  • Einfache Liste – Zeigt Inhalte und deren Elemente in einer Reihe von links nach rechts an. Abhängig von deinen Einstellungen und der Anzahl der Elemente kann das Layout weitere Zeilen unter der ersten Zeile erstellen.
  • Banner-Slideshow – Zeigt jeweils einen Inhalt mit Elementen an, die das Bild überlappen, das als Hintergrund für den Abschnitt dient. Besucher klicken auf Steuerelemente, um durch die Elemente zu blättern.
  • Karussell – Zeigt Inhalte und deren Elemente in einer Reihe von links nach rechts in einem sich drehenden Karussell an. Besucher klicken auf Steuerelemente, um durch weitere Elemente zu blättern.

Jedes Layout hat seine eigenen Design-Einstellungen, um weitere Anpassungen vornehmen zu können. Bei einfachen Listen- und Karussell-Layouts kannst du beispielsweise die Bilder als Kreise zuschneiden. Klicke auf Stil, um weitere Einstellungen aufzurufen, z. B. das Ändern der Textgröße oder das Hinzufügen eines Kartenhintergrunds für jedes Element. Klicke auf Größe und Abstand, um Padding- und Abstandseinstellungen vorzunehmen, z. B. die Breite des Inhalts festzulegen, den Abstand zwischen Elementen zu ändern oder die Bildplatzierung anzupassen. Deine Optionen auf den Tabs Stil und Größe und Abstand hängen vom Layout ab.

Wenn du Layouts änderst, speichert der Abschnitt deine Einstellungen für das zuvor ausgewählte Layout, sodass du jederzeit dorthin zurückkehren kannst, wenn du möchtest.

Hinweis

Es ist nicht möglich, von diesen Optionen zu einem Galerie-Layout zu wechseln. Erstelle stattdessen einen Galerie-Abschnitt.

Textgröße

Nachdem du dein Listen-Abschnitt-Layout ausgewählt hast, scrolle im Tab „Design“ nach unten und klicke auf Stil, um eine Schriftgröße auszuwählen. Du kannst aus voreingestellten Größen auswählen, Titel und Button-Text ändern, oder auf klicken, um benutzerdefinierte Größen für Artikeltitel und Beschreibungen separat festzulegen. Abhängig von deinem Layout und den aktuellen Einstellungen werden möglicherweise andere Optionen angezeigt.

Abschnittshöhe

Die Abschnittshöhe eines Auto-Layouts wird durch das Element mit dem meisten Text festgelegt. Dies bedeutet, dass der Abschnitt möglicherweise mehr Padding über oder unter Elementen mit weniger Text in Slideshow-Banner- und Karussell-Layouts enthält. Im einfachen Listen-Layout passiert möglicherweise dasselbe mit der Zeilenhöhe.

Wir empfehlen, Elemente mit einer ähnlichen Menge an Text zu erstellen, damit du eine möglichst hohe Kontrolle über die Abschnittshöhe und das Padding hast.

Abschnitts-Trennstrich

Um einen visuellen Indikator zwischen dem unteren Rand des Auto-Layouts und dem nächsten Abschnitt hinzuzufügen, aktiviere einen Abschnitts-Trennstrich:

  1. Bewege den Mauszeiger über das Auto-Layout und klicke auf Abschnitt bearbeiten.
  2. Aktiviere unter Format den Schalter Teiler.
  3. Lege Trennstrich-Einstellungen wie Form, Strich, Farbe und Dicke fest.

Mehr über Abschnitts-Trennstriche erfährst du unter Seitenabschnitte.

Design von automatischen Layouts auf Mobilgeräten

Bestimmte Design-Optionen können auf Computer und Mobilgeräten variieren. Banner-Slideshow- und Karussell-Layouts können beispielsweise Navigationspfeile anzeigen, damit Besucher durch Elemente klicken können. Wenn du die Navigationspfeile deaktivierst, können Besucher auf einem Computer klicken und ziehen, um durch Elemente zu scrollen. Die Pfeile werden jedoch immer auf Mobilgeräten angezeigt, um sicherzustellen, dass Besucher alle Elemente sehen können.

Die Farben des Auto-Layouts ändern

Um die Farben des Auto-Layout-Abschnitts zu ändern, öffne Website-Stile und klicke dann auf Farben. Wähle das Farbschema des Abschnitts aus und verwende dann die Anpassungen unter dem entsprechenden Listen-Abschnittstyp: Einfach, Karussell oder Banner.

Schriftart und Buttons in Auto-Layouts gestalten

Auto-Layouts folgen den globalen Einstellungen für Schriftarten- und Button-Stile unter Website-Stile.

Schriftart

Auto-Layout-Text folgt den globalen Schriftart-Einstellungen deiner Website im Menü „Schriftarten“ der Website-Stile. Die Titel der Elemente folgen den Überschriften und der Textkörper der Elemente folgt den Absätzen. Wenn du einen Abschnittstitel für dein Auto-Layout verwendest, kannst du diesen unabhängig von anderen Schriftart-Einstellungen formatieren, indem du auf Stile zuweisen und dann unter Listen-Abschnitt auf Titel klickst.

Die Textgröße wird in den Auto-Layout-Einstellungen festgelegt.

Schaltflächen

Gestalte die Schriftart, Größe und Form von Buttons im Buttons-Menü der Website-Stile. Sowohl die Element-Buttons als auch die Abschnitts-Buttons folgen den primären Stil-Einstellungen. Beachte, dass diese Einstellungen für die meisten Buttons auf deiner Website gelten, um ein einheitliches Erscheinungsbild zu gewährleisten.

So legst du die Größe der Auto-Layout-Buttons fest:

  1. Fahre mit der Maus über den Abschnitt und klicke auf Inhalt bearbeiten
  2. Wähle unter Design die Option Stil.
  3. Klicke unter Textgröße auf 
  4. Verwende den Schieberegler Element-Button, um die Größe zu ändern.

Auto-Layouts und Galerie-Abschnitte im Vergleich

Auto-Layouts und Galerie-Abschnitte organisieren deine Inhalte automatisch in anpassbaren Layouts, doch die Funktionen zwischen ihnen variieren. Es ist nicht möglich, ein Auto-Layout in einen Galerie-Abschnitt zu ändern oder umgekehrt. Hier sind die grundlegenden Unterschiede:

  • Auto-Layouts können verschiedene Kombinationen von Bildern, größere Textmengen und Button-Links anzeigen. Sie sind ideal, um Teammitglieder, frühere Kunden oder aktuelle Projekte zu präsentieren.
  • Galerie-Abschnitte heben nur Bilder hervor und eignen sich daher besser für Künstlerportfolios oder Foto-Websites. Du kannst Text zu Bildern des Galerie-Abschnitts hinzufügen, jedoch nur kurze Bildbeschriftungen.

Um mehr über die Unterschiede zwischen den beiden Abschnitten zu erfahren und zu entscheiden, welche für deine Anforderungen am besten geeignet ist, sieh dir die folgende Tabelle an.

Funktion Auto-Layouts Galerie-Abschnitte
Bilder automatisch zuschneiden
  • Einfaches Listen-Layout
  • Karussell-Layout
  • Nein
Slideshow automatisch abspielen
  • Nein
  • Slideshow: einfaches Layout
  • Slideshow: volles Layout
Schaltflächen
  • Ja
  • Nein
Nur Text anzeigen
  • Ja
  • Nein
Bild-Hyperlinks
  • Nein
  • Ja
Layouts
  • Einfache Liste
  • Banner-Slideshow
  • Karussell
  • Raster: Einfach, Streifen, Mauerwerk
  • Slideshow: Einfach, Voll, Rolle
Lightbox
  • Nein
  • Raster-Layouts
Overlay-Text auf Bildern
  • Banner-Slideshow-Layout
  • Nein
Abschnittstitel
  • Ja
  • Nein
Videos
  • Nein
  • Nein
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.