Instagram Feed in Wix Studio einbinden: Die ultimative Schritt-für-Schritt-Anleitung
Hier ist ein ausführliches Schritt-für-Schritt-Tutorial, wie du einen Instagram-Feed in Wix Studio einbindest.
Ein Instagram-Feed ist die ideale Möglichkeit, deine Website dynamisch zu halten und Social Proof direkt auf deiner Seite zu zeigen. In Wix Studio ist der Prozess dank spezieller Widgets sehr einfach.
Schritt 1: Den Wix Studio Editor öffnen
Logge dich in dein Wix-Konto ein und öffne das entsprechende Projekt im Wix Studio Editor.
Schritt 2: Den App Market aufrufen
- Gehe in der linken Sidebar auf das Symbol für das Plus-Icon (+) (Hinzufügen).
- Klicke auf den Reiter App Market.
- Gib in die Suchzeile „Instagram Feed“ ein.
- Wähle die App „Wix Instagram Feed“ (sie ist kostenlos und wird direkt von Wix entwickelt).
- Klicke auf „Zu Website hinzufügen“.
Schritt 3: Das Widget auf der Seite platzieren
Sobald die App geladen ist, erscheint ein Platzhalter-Feed auf deiner Seite.
- Ziehe das Element an die gewünschte Stelle (z. B. in den Footer oder einen speziellen „Social“-Bereich).
- Nutze die Wix Studio Responsive-Tools, um die Größe für Desktop, Tablet und Mobile anzupassen.
Schritt 4: Instagram-Konto verbinden
Jetzt musst du deine echten Inhalte verknüpfen:
- Klicke auf das Instagram-Element und wähle den Button „Einstellungen“.
- Klicke im Menü auf „Instagram verbinden“.
- Wähle aus, ob du ein persönliches Konto oder ein Business-Konto verbinden möchtest.
- Hinweis: Ein Business-Konto bietet mehr Funktionen (wie z. B. das Anzeigen von Hashtag-Feeds).
- Melde dich in dem aufpoppenden Fenster bei deinem Instagram/Facebook-Account an und autorisiere die App.
Schritt 5: Layout und Design anpassen
Wix Studio bietet dir volle Kontrolle über das Design:
- Layout: Wähle zwischen Grid (Raster), Slider, Collage oder Masonry.
- Anzeige: Bestimme, wie viele Fotos und Spalten auf den jeweiligen Breakpoints (Desktop vs. Mobile) angezeigt werden sollen.
- Design: Passe Abstände, Rahmen, Schriftarten für Bildunterschriften und die Hover-Effekte (was passiert, wenn man mit der Maus über ein Bild fährt) an.
Schritt 6: Responsivität optimieren (Wichtig für Wix Studio)
Da Wix Studio auf proportionalem Skalieren basiert, solltest du prüfen:
- Wechsel oben in der Toolbar zwischen den Breakpoints (Desktop, Tablet, Mobil).
- Stelle sicher, dass das Raster auf dem Handy z. B. nur 1 oder 2 Spalten hat, während es auf dem Desktop 4 oder 5 sind.
- Nutze die Funktion „In Inspektor bearbeiten“, um die Abmessungen (Width/Height) auf „100%“ oder „Max-Content“ zu stellen, damit der Feed sich flüssig anpasst.
Schritt 7: Veröffentlichen
Wenn du mit dem Look zufrieden bist:
- Klicke oben rechts auf Vorschau, um die Interaktion zu testen.
- Klicke auf Veröffentlichen, um den Feed live zu schalten.
Pro-Tipps für Wix Studio:
- Automatisches Update: Der Feed aktualisiert sich automatisch, sobald du etwas Neues auf Instagram postest. Es kann jedoch manchmal ein paar Minuten dauern, bis der Cache geleert ist.
- Bilder-Links: Du kannst in den Einstellungen festlegen, ob ein Klick auf ein Bild den Post direkt auf Instagram öffnet oder eine vergrößerte Ansicht (Popup) auf deiner Website zeigt.
- Ladezeit: Wenn du sehr viele hochauflösende Bilder hast, begrenze die Anzahl der angezeigten Posts pro Seite, um die Performance deiner Website hochzuhalten.
Fertig! Dein Instagram-Feed ist nun professionell in deine Wix Studio Website integriert.