Ein Social-Media-Grid zeigt Ihre neuesten Beiträge als gleichmäßige Kacheln in Zeilen und Spalten auf Ihrer Website. Diese kostenlose Vorlage stellt Bild- und Videobeiträge von Instagram in einem sauberen, bildorientierten Layout dar. Sie aktualisiert sich von selbst, ganz ohne Programmierung.
Was das Social-Media-Grid zeigt und wo Sie es platzieren
Ein Social-Media-Grid ist ein Layout, das Social-Beiträge als gleich große Kacheln in Zeilen und Spalten anordnet. Auf einer Website funktioniert es als Galerie-Bereich, der sich aktualisiert, sobald Sie posten.
Es ist nicht dasselbe wie Ihr Instagram-Profil-Grid. Das Profil-Grid befindet sich in der App und hat immer drei Spalten, während ein Website-Grid auf Ihren eigenen Seiten liegt.
Auf Ihrer Website bestimmen Sie Spalten, Abstände und die angezeigten Beiträge. Ein Instagram-Feed-Grid ist die häufigste Variante, und mit einem Social-Media-Aggregator können Sie weitere Netzwerke hinzumischen.
- Startseite: zeigen Sie den Lifestyle Ihrer Marke in einem visuellen Bereich unter dem Hero.
- Produktseiten: fügen Sie echte Kunden- und Produktfotos nahe am Kaufen-Button hinzu.
- Landingpages: unterstützen Sie eine Kampagne mit frischen Beiträgen, die zu ihrem Thema passen.
- Über-uns- oder Portfolio-Seiten: zeigen Sie Ihre Arbeit und Ihre Community in einem gut überblickbaren Block.
Layouts für das Social-Media-Grid
- 3x3-Grid: neun Kacheln in drei Reihen, der klassische Instagram-Look. Es passt in einen kompakten Block auf der Startseite.
- Hochformat-Kacheln 3:4: höhere Kacheln, die dem aktuellen Zuschnitt der Instagram-Profilvorschauen entsprechen. Sie eignen sich für Reels und Fotos im Hochformat.
- Grid mit 4 Spalten: mehr Beiträge pro Reihe mit kleineren Kacheln. Es funktioniert gut in breiten Bereichen über die volle Breite.
In EmbedSocial können Sie die Anzahl der Spalten und Zeilen anpassen. Karten lassen sich auf Hochformat, Querformat oder quadratisch einstellen.
So fügen Sie Ihrer Website ein Social-Media-Grid hinzu
- Wählen Sie das Free Social Media Grid Widget
- Verbinden Sie Ihr Social-Media-Konto
- Passen Sie Abstände, Layout und Styling an
- Kopieren Sie den Einbettungscode und fügen Sie ihn in Ihre Website ein
WordPress
Fügen Sie im WordPress-Editor dort, wo das Grid erscheinen soll, einen Custom-HTML-Block hinzu. Fügen Sie den Einbettungscode ein und klicken Sie auf Update. Anleitung: WordPress-Integration
Shopify
Gehen Sie zu Online Store, dann zu Themes, und klicken Sie auf Customize. Fügen Sie einen Custom-Liquid-Abschnitt hinzu, fügen Sie den Einbettungscode ein und speichern Sie. Anleitung: Shopify-Integration
Wix
Klicken Sie im Wix-Editor auf Add Elements, dann auf Embed Code und wählen Sie Embed HTML. Fügen Sie den Code ein, passen Sie die Rahmengröße an und veröffentlichen Sie. Anleitung: Wix-Integration
Squarespace
Bearbeiten Sie die Seite, klicken Sie auf Add block, wählen Sie Embed und dann Code snippet. Fügen Sie den Code ein, speichern Sie und passen Sie bei Bedarf die Blockgröße an. Anleitung: Squarespace-Integration
Grid im Vergleich zu anderen Layouts
| Layout | Am besten für | Zeigt | Vorlage |
|---|---|---|---|
| Grid | Saubere, einheitliche Galerie-Bereiche | Quadratische Bild- und Videokacheln in Reihen | Kostenloses Social-Media-Grid |
| Masonry | Fotos in gemischten Größen | Kacheln, die sich der Höhe jedes Beitrags anpassen | Masonry Gallery |
| Social-Wand | Mehrere Netzwerke kombinieren | Beiträge mehrerer Plattformen in einem Grid- oder Masonry-Feed | Social-Wand-Widget |
