Zum Inhalt springen

Blogbeitrag

Stellen Sie einen Artikel flexibel in einer Beitragskarte mit benutzerdefiniertem Styling und Sichtbarkeitssteuerung dar.

Verwenden Sie diesen Block, um einen einzelnen Artikel als Karte mit Bild, Titel, Auszug und Link zum Weiterlesen hervorzuheben. Er ist eine praktische Wahl, wenn Sie einen Beitrag in einem Raster, einer Seitenleiste, auf einer Landingpage oder in einem redaktionellen Layout hervorheben möchten.

Wählen Sie den Artikel aus, den der Block anzeigen soll. Der Block verwendet den vorhandenen Inhalt des Artikels, daher erzielen Sie meist die besten Ergebnisse mit Beiträgen, die ein starkes Beitragsbild und einen klaren Auszug haben.

Diese Einstellungen steuern das Erscheinungsbild der Artikelkarte und ermöglichen es Ihnen, die gemeinsamen Standardwerte für Karten nur für diesen Block zu überschreiben. Sie können Kartenstil, Bild-Seitenverhältnis, Schaltflächenstil, sichtbaren Text, Textausrichtung und Beschriftungsdetails anpassen, damit sie zum verfügbaren Platz passen, in dem der Artikel erscheint.

Verwenden Sie einfachere Kartenstile, wenn der Block in einem dichten Layout steht, und verwenden Sie Banner, wenn der Artikel präsenter wirken soll. Karten nur mit Titel eignen sich gut für enge Bereiche, während Titel und Auszug den Lesern vor dem Klick mehr Kontext geben. Das gemeinsame Kartenverhalten wird außerdem in den Karten-Einstellungen behandelt.

Das mobile Bildverhältnis sollten Sie separat prüfen, wenn der Ausschnitt auf dem Desktop gut aussieht, auf kleineren Bildschirmen aber unpassend wird. Das ist besonders wichtig bei Beitragsbildern mit Gesichtern, Text oder wichtigen Randdetails.

Die mittige vertikale Textausrichtung gilt nur, wenn der Kartenstil auf Banner gesetzt ist.

Beschriftungseinstellungen helfen Ihnen dabei zu entscheiden, wie viele Metadaten des Artikels angezeigt werden sollen. Autor und Datum können redaktionellen Inhalten zusätzlichen Kontext geben, sollten aber besser verborgen werden, wenn die Karte optisch kompakt bleiben soll.

Diese Einstellungen überschreiben nur die gemeinsamen Kartenfarben für diesen Block. Verwenden Sie sie, wenn ein hervorgehobener Artikel stärkere Kontraste, einen anderen Schwerpunkt oder eine stärker angepasste Darstellung als Ihre Standardkarten benötigt.

Banner-Overlay-Farben gelten nur, wenn der Kartenstil auf Banner gesetzt ist. Ein einfarbiges Overlay oder ein Verlauf kann die Lesbarkeit des Textes auf unruhigen Bildern verbessern, und die Deckkraft-Einstellung hilft Ihnen, Lesbarkeit und Sichtbarkeit des Bildes auszubalancieren. Das gemeinsame Farbverhalten wird außerdem in den Karten-Einstellungen behandelt.

Verwenden Sie die Sichtbarkeitssteuerung, um diesen Block auf allen Geräten anzuzeigen oder auf dem Desktop beziehungsweise auf dem Mobilgerät auszublenden. Das ist nützlich, wenn Sie je nach Gerät unterschiedliche Artikelplatzierungen, Zuschnitte oder ergänzende Inhalte wünschen. Mehr erfahren Sie in den Sichtbarkeitseinstellungen. Weitere Hinweise zum Theme-Editor finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten

Editor-Einstellungen helfen Ihnen, komplexe Layouts übersichtlich zu halten. Geben Sie dem Block einen klaren Editor-Titel, damit Sie schnell erkennen können, welche Artikelkarte Sie gerade bearbeiten.

  1. Wählen Sie einen starken Artikel aus. Wählen Sie einen Beitrag mit einem klaren Beitragsbild und einem nützlichen Auszug, damit die Karte mit minimalen Anpassungen vollständig wirkt.
  2. Passen Sie den Stil an die Platzierung an. Verwenden Sie eine Banner-Darstellung für hervorgehobene redaktionelle Momente und einfachere Kartenstile für unterstützende Inhalte.
  3. Prüfen Sie mobile Zuschnitte. Kontrollieren Sie das mobile Bildverhältnis nach der Einrichtung, um unpassende Zuschnitte auf kleineren Bildschirmen zu vermeiden.
  4. Sichern Sie die Lesbarkeit. Wenn Text über einem Bild liegt, passen Sie Overlay- und Textfarben an, bis Titel und Auszug leicht erfassbar sind.
  5. Verwenden Sie Sichtbarkeit mit Absicht. Blenden Sie den Block nur auf einem Gerät aus, wenn ein alternatives Layout das Leseerlebnis klarer macht.
  6. Prüfen Sie beide Zustände. Der Theme-Editor kann den Block anzeigen, bevor Live-Inhalte verfügbar sind. Prüfen Sie daher die Artikelkarte in der Vorschau und im Storefront, um das endgültige Erscheinungsbild zu bestätigen.
  7. Prüfen Sie beide Ansichten. Desktop- und Mobilsteuerungen können unterschiedliche Ausrichtung, Sichtbarkeit und Medienverhalten erzeugen. Bestätigen Sie den Block daher vor der Veröffentlichung auf beiden Bildschirmgrößen.
  8. Behalten Sie Standardwerte bei, wenn Sie Fallback-Design möchten. Lassen Sie Farb- und Medien-Überschreibungen ungesetzt, wenn der Block das umgebende Karten-Design übernehmen soll; verwenden Sie explizite Überschreibungen nur dann, wenn der Artikel ein eigenständigeres Erscheinungsbild benötigt.