Instagram-Feed in Elementor einbetten

Wenn Ihre Website Elementor als Page Builder verwendet, können Sie einen Smash Balloon Instagram-Feed auf jede beliebige Seite ziehen, ohne den Code zu bearbeiten oder Shortcodes einzufügen. Instagram Feed Pro enthält ein spezielles Elementor-Widget, das im Widget-Bereich neben den übrigen Elementor-Elementen angezeigt wird. Sie ziehen es in einen Abschnitt, wählen aus einem Dropdown-Menü den anzuzeigenden Feed aus, und der Vorschaubereich füllt sich sofort mit Ihren echten Instagram-Beiträgen.

Diese Anleitung erklärt, wie Sie das Instagram-Feed-Widget zum ersten Mal zu einer Elementor-Seite hinzufügen.

Diese Funktion ist sowohl im kostenlosen Instagram-Feed-Plugin als auch in Instagram Feed Pro verfügbar. Das spezielle Instagram-Feed-Elementor-Widget ist ab Version 6.11.0 im kostenlosen Plugin enthalten, sodass Sie keine Pro-Version benötigen, um Ihren Feed in eine Elementor-Seite einzufügen. Mit der Pro-Version stehen Ihnen zusätzliche Feed-Typen (Hashtag, getaggte Beiträge) und Customizer-Optionen zur Verfügung, die das eingebettete Widget dann anzeigt.


Bevor Sie beginnen

Achten Sie auf Ihrer Website auf zwei Dinge:

  1. „Instagram Feed“ (kostenlos oder Pro) muss in der Version 6.11.0 oder höher installiert und aktiviert sein; ab dieser Version wurde das Elementor-Widget hinzugefügt. Die meisten Installationen erfüllen diese Voraussetzung bereits.
  2. Dein Instagram-Konto ist unter „Instagram-Feed“, „Einstellungen“ und „Quellen“als Quelle verbunden.
  3. Im Instagram-Feed „Alle Feeds“ist bereits mindestens ein Feed vorhanden. Das Elementor-Widget wählt aus den Feeds aus , die Sie bereits im Smash Balloon-Adminbereich erstellt haben; es erstellt keine neuen Feeds. Falls Sie noch keinen Feed erstellt haben, folgen Sie bitte zunächst der Anleitung zum Erstellen eines Feeds und kehren Sie dann hierher zurück.

Wenn beides vorhanden ist, wird das Instagram-Feed-Widget im Widget-Bereich von Elementor angezeigt, sobald Sie eine Seite zur Bearbeitung öffnen.


Schritt 1. Öffnen Sie Ihre Seite in Elementor

Gehen Sie in der WordPress-Admin-Seitenleiste zu „Seiten“, wählen Sie die Seite aus, auf der der Feed angezeigt werden soll, und klicken Sie auf „Mit Elementor bearbeiten“. Der Elementor-Editor öffnet sich mit dem Widget-Panel auf der linken Seite und einer Live-Vorschau Ihrer Seite auf der rechten Seite. Oben im Widget-Panel befindet sich ein Suchfeld mit der Bezeichnung „Widget suchen“, in dem Sie das Smash Balloon-Widget finden.

Einbinden von Instagram Feed Pro in Elementor – Schritt 1
Der Elementor-Editor mit dem Widget-Panel auf der linken Seite. Über das Suchfeld oben im Such-Widget lässt sich das Instagram-Feed-Widget am schnellsten finden.

Schritt 2. Suche nach dem Instagram-Feed-Widget

Klicken Sie auf das Feld „Such-Widget“ und geben Sie „instagram“ ein. Die Widget-Liste wird während der Eingabe gefiltert, und das Instagram-Feed -Widget (mit dem kleinen Instagram-Symbol) erscheint ganz oben in den Ergebnissen. Dies ist das spezielle Smash-Balloon-Widget, nicht die integrierte Elementor-Einbettungsfunktion „Instagram“.

Einbinden von Instagram Feed Pro in Elementor – Schritt 2
Das Widget-Panel ist auf Instagram gefiltert. Das Instagram-Feed-Widget ist das von Smash Balloon mit dem Kamerasymbol.

Ziehe das Instagram-Feed-Widget aus dem Bedienfeld auf den Bereich der Seite, in dem der Feed angezeigt werden soll. Elementor markiert die Ablagebereiche beim Ziehen, sodass du das Widget in einen bestehenden Container oder als neuen Abschnitt ablegen kannst. Das Einstellungsfenster des Widgets öffnet sich automatisch, sobald es platziert wurde.


Schritt 3. Wählen Sie Ihren Feed aus

Das Einstellungsfenster des Widgets ist in zwei Registerkarten unterteilt: „Inhalt“ und „Erweitert“. Auf der Registerkarte „Inhalt“ findest du die Gruppe „Instagram-Feed-Einstellungen“ mit einer einzigen Option ganz oben: „Feed auswählen“. Klicke auf das Dropdown-Menü und wähle den Feed aus, den du anzeigen möchtest. Jeder Feed , den du in „Instagram Feed“ erstellt hast , wird hier unter „Alle Feeds “ namentlich aufgelistet.

Einbinden von Instagram Feed Pro in Elementor – Schritt 3
Einstellungen für das Instagram-Feed-Widget: Wählen Sie im Dropdown-Menü „Feed auswählen“ aus, welche Ihrer gespeicherten Feeds eingebettet werden sollen

Sobald du einen Feed auswählst, wird der Vorschaubereich auf der rechten Seite aktualisiert und zeigt die tatsächlichen Instagram-Beiträge an, die von diesem Feed abgerufen wurden. Das Design, das Layout, die Kopfzeile und alle Anpassungen, die du im Smash Balloon Customizer vorgenommen hast, bleiben erhalten; Elementor stellt den Feed genau so dar, wie er auf einer Seite ohne Elementor erscheinen würde.

Klicken Sie unten links im Elementor-Bedienfeld auf „Veröffentlichen“ (oder „Aktualisieren“, wenn Sie eine bestehende Seite bearbeiten), um die Seite zu speichern. Der Instagram-Feed ist nun überall dort live, wo die Seite für Besucher sichtbar ist.


Kann ich das Widget in eine Spalte innerhalb eines Abschnitts ziehen?

Ja. Mit Elementor kannst du das Widget in jede beliebige Spalte, jeden Container oder jeden Abschnitt in voller Breite ziehen. Der Feed passt sich an die Breite der übergeordneten Spalte an.

Bleibt der von mir ausgewählte Feed synchronisiert, wenn ich später Einstellungen im Smash Balloon Customizer ändere?

Ja. Das Widget zeigt den von Ihnen ausgewählten Feed an, wobei das gesamte Design den Anpassungsoptionen dieses Feeds entspricht. Wenn Sie später das Layout, die Kopfzeile oder die Anzahl der Beiträge des Feeds in „Instagram-Feed“ oder „Alle Feeds“ aktualisieren, wird die in Elementor eingebettete Version automatisch aktualisiert.

Kann ich mehrere Instagram-Feeds auf einer Elementor-Seite einbinden?

Ja. Zieh das Widget mehrmals in verschiedene Abschnitte und wähle für jeden einen anderen Feed aus. Das ist nützlich, wenn du oben auf der Seite ein Hero-Profil und weiter unten einen Hashtag-Feed haben möchtest.

Warum wird das Instagram-Feed-Widget im Bedienfeld nicht angezeigt?

Die häufigste Ursache ist eine veraltete Version des Instagram-Feed-Plugins. Das Elementor-Widget wurde in Version 6.2.9 hinzugefügt, sodass es in älteren Installationen nicht vorhanden ist. Das Problem lässt sich beheben, indem man Instagram Feed (Free oder Pro) auf die neueste Version aktualisiert. Das Plugin muss natürlich auch aktiviert sein.

Funktioniert dieses Widget mit Elementor Free oder nur mit Elementor Pro?

Das Instagram-Feed-Widget funktioniert in beiden Versionen. Du benötigst Elementor Pro nicht, um es zu nutzen.

Kann ich das Design des Feeds direkt in Elementor konfigurieren, anstatt den Smash Balloon Customizer zu verwenden?

Nein. Die Gestaltung des Feeds (Kopfzeile, Layout, Farben, Anzahl der Beiträge) wird für jeden gespeicherten Feed über den Smash Balloon Customizer gesteuert. Elementor ist lediglich für die Platzierung zuständig: also dafür, an welcher Stelle auf der Seite der Feed angezeigt wird.

Unterstützung

Konnten Sie die Antwort nicht in den Dokumenten finden?

Kontakt zum Support

War dieser Artikel hilfreich?