Logoliste

Erstellen Sie ein responsives Logo-Raster für Vertrauenssignale, Partnermarken oder visuelle Navigation.

Ausgewählte Links

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Zeigen Sie ein sauberes Raster aus Logos, Badges oder verlinkten Bild-Kacheln an. Dieser Abschnitt eignet sich besonders für Partnermarken, Vertrauenssignale, Händler, Zertifizierungen oder einfache bildbasierte Navigation, wenn textlastige Layouts zu unübersichtlich wirken. Einen umfassenderen Überblick darüber, wie dies in ein Theme passt, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Die zentralen Layout-Steuerelemente bestimmen, wie dicht oder großzügig sich das Logo-Raster anfühlt. Verwenden Sie die horizontale Ausrichtung, um das Raster im Inhaltsbereich zu positionieren, und passen Sie dann die Spaltenanzahl für Desktop, Tablet und Mobile an, damit Logos auf jeder Bildschirmgröße gut erkennbar bleiben.

Tablet kann die Desktop-Spaltenanzahl übernehmen, wenn Sie kein separates Zwischenlayout benötigen. Das vereinfacht die Einrichtung und funktioniert meist gut, wenn die meisten Logos ähnliche Proportionen haben.

Wenn Logos zu klein wirken, verringern Sie zuerst die Spaltenanzahl, bevor Sie die Breite einzelner Logos erhöhen. Ein klareres Raster erzielt in der Regel bessere Ergebnisse als ein dichteres.

Abschnittsspezifische Einstellungsgruppen

Farbeinstellungen

Diese Überschreibungen gestalten den Überschriftenbereich des Abschnitts, einschließlich des Symbols, der Überschrift und der Unterüberschrift. Verwenden Sie sie, wenn dieses Logo-Raster eine eigene visuelle Behandlung benötigt, ohne den Rest der Seite zu verändern.

Wenn die Logos selbst farbig sind, halten Sie die Farben der Überschrift einfach, damit der Abschnitt nicht überladen wirkt. Wenn Sie einen benutzerdefinierten Hintergrund verwenden, prüfen Sie den Kontrast sorgfältig.

Unterstützte Blocktypen

Button
Logo item
Rich text

Schaltfläche

Der Button-Block fügt innerhalb des Abschnitts eine separate Handlungsaufforderung hinzu. Das funktioniert gut, wenn die Logos auf ein größeres Ziel verweisen, etwa eine vollständige Partnerseite, Medientseite oder Seite mit Großhandelsinformationen.

Mehr erfahren über den Schaltfläche.

Verwenden Sie einen Button-Block, wenn der Abschnitt neben den einzelnen Logo-Links einen klaren nächsten Schritt benötigt.
Halten Sie den Zweck der Schaltfläche klar getrennt, wenn die Logos ebenfalls anklickbar sind.
Die mobile Darstellung über die gesamte Breite kann die Aktion am Ende einer Seite leichter antippbar machen.

Logo-Element

Der Logo item-Block ist der zentrale Inhaltsblock für diesen Abschnitt. Jedes Element kann ein Bild, eine optionale Beschriftung oder einen optionalen Text sowie einen optionalen Link enthalten, sodass es entweder als einfache Logo-Wand oder als visueller Navigationspunkt dienen kann.

Mehr erfahren über den Logo-Element.

Verwenden Sie Quellbilder mit ähnlicher Größe für ein insgesamt saubereres Raster.
Passen Sie die maximale Bildbreite pro Block an, um Logos zu korrigieren, die visuell zu groß oder zu klein wirken.
Fügen Sie Beschriftungen nur hinzu, wenn sie nützlichen Kontext liefern, etwa zum Partnertyp oder zum Ziel.

Rich text

Der Rich text-Block fügt kurze unterstützende Texte innerhalb des Abschnitts hinzu. Verwenden Sie ihn für knappen Kontext, zum Beispiel dazu, warum diese Logos wichtig sind oder was Besucher erwarten können, wenn die Logos als Navigation verwendet werden.

Mehr erfahren über den Rich text-Block.

Halten Sie den Text kurz, damit der Abschnitt weiterhin hauptsächlich als Logo-Raster wahrgenommen wird.
Verwenden Sie separate Ausrichtung für Desktop und Mobile, wenn der Text auf kleineren Bildschirmen eine andere Position benötigt.
Die Hintergrundfarbe des Blocks kann unterstützenden Text hervorheben, sollte aber sparsam eingesetzt werden.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen ermöglichen es Ihnen, oberhalb des Logo-Rasters eine Beschriftung, Überschrift, Unterüberschrift, ein Symbol und optional eine Schaltfläche auf Abschnittsebene hinzuzufügen. Das ist nützlich, wenn die Logos Kontext benötigen, etwa für vorgestellte Marken, Zertifizierungen oder Medienerwähnungen.

Eine kurze Überschrift verbessert oft die Klarheit und die schnelle Erfassbarkeit. Wenn Sie zusätzlich Button-Blöcke hinzufügen, stellen Sie sicher, dass jede Aktion einem anderen Zweck dient.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnitts. Erhöhen Sie den Innenabstand, wenn die Logoliste präsenter wirken soll, oder reduzieren Sie ihn, wenn sie zwischen mehreren kompakten Inhaltsabschnitten liegt.

Der Abstand auf Mobilgeräten erfordert oft eine separate Anpassung, da gestapelte Reihen den Abschnitt höher wirken lassen können als erwartet.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, dem Abschnitt eine Farbe, einen Verlauf, ein Bild oder ein Video als Hintergrund hinzuzufügen. Das kann einen stärkeren Markenmoment schaffen, aber unruhige Hintergründe können mit den Logos konkurrieren.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oberhalb oder unterhalb des Abschnitts eine Linie hinzu. Sie sind besonders nützlich, wenn die Logoliste einen klareren visuellen Abstand zu umliegenden Inhalten benötigt.

Für die meisten Logo-Abschnitte wirken dezente Trennlinien besser als dekorative.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf Desktop, Mobile oder auf beiden angezeigt wird. Das ist hilfreich, wenn Sie eine einfachere mobile Darstellung oder einen anderen Abschnitt für kleinere Bildschirme an anderer Stelle wünschen.

Sichtbarkeitssteuerungen auf Blockebene können auch dabei helfen, unterstützende Inhalte zu reduzieren, ohne den gesamten Abschnitt auszublenden.

Breiten-Einstellungen

Breiten-Einstellungen steuern die Inhaltsbreite und die äußere Abschnittsbreite. Größere Layouts können ausgewogenere mehrspaltige Logo-Raster unterstützen, während schmalere Layouts eine kleinere Auswahl an Logos bewusster wirken lassen können.

Der Editor bildet Breitenänderungen möglicherweise nicht vollständig ab. Prüfen Sie daher die Live-Seitenvorschau, wenn Sie das Layout fein abstimmen.

Nutzungshinweise

Priorisieren Sie die Wiedererkennung. Wählen Sie Spaltenanzahlen, die Logos auf einen Blick gut identifizierbar halten.
Normalisieren Sie die visuelle Größe. Verwenden Sie logo-spezifische Breitenanpassungen, um Zeichen mit sehr unterschiedlichen Proportionen auszugleichen.
Verlinken Sie mit Absicht. Wenn Logos als Navigation dienen, stellen Sie sicher, dass jedes Ziel klar und nützlich ist.
Fügen Sie bei Bedarf Kontext hinzu. Verwenden Sie den Header oder einen kurzen Rich text-Block, um zu erklären, warum diese Logos zusammen gruppiert sind.
Prüfen Sie auf verschiedenen Geräten. Kontrollieren Sie Desktop-, Tablet- und Mobile-Layouts vor der Veröffentlichung, besonders wenn Sie Logos mit Text oder Schaltflächen kombinieren.
Prüfen Sie Mobilgeräte separat. Desktop- und Mobile-Steuerelemente können Ausrichtung, Sichtbarkeit und Bildverhalten verändern. Bestätigen Sie daher beide Ansichten vor dem Veröffentlichen.
Halten Sie starke Bilder lesbar. Transparente Dateien, benutzerdefinierte Hintergründe oder separate Medien für Desktop und Mobile können Kontrast und Zuschnitt verändern. Testen Sie daher die endgültige Kombination auf Klarheit.
Verwenden Sie eine einfache Gestaltung für gemeinsam genutzte Bereiche. Belassen Sie Farben und Hintergründe im Standardstil, wenn sich das Raster unauffällig einfügen soll; verwenden Sie explizite Überschreibungen nur dann, wenn sich dieser Abschnitt abheben soll.

Align v2.0