[UPDATE] Füge einen beliebigen Smash-Balloon-Feed als nativen Gutenberg-Block oder Elementor-Widget hinzu

Du erstellst gerade eine neue Seite im WordPress-Block-Editor. Du fügst deinen Instagram-Feed ein. Du möchtest ihn dir auf der Seite ansehen, bevor du sie veröffentlichst.

Mit WordPress 7 hat sich dies geändert. Durch die Verlagerung des Editors in einen iframe hat sich die Darstellung der Vorschau geändert, sodass die Blöcke entsprechend angepasst werden mussten.

Ihre Feeds werden darin korrekt dargestellt – und zwar in allen sechs Smash Balloon-Plugins. Was Sie auf der Arbeitsfläche erstellen, sehen Ihre Besucher auch.

Jedes Smash Balloon-Feed-Plugin wird nun als nativer Gutenberg-Block oder Elementor-Widget in eine Seite eingefügt und funktioniert unter WordPress 7 einwandfrei. Fügen Sie ein Feed genauso ein wie eine Überschrift, ein Bild oder eine Schaltfläche.

Suchen Sie danach, fügen Sie es ein und wählen Sie Ihren Feed aus dem Dropdown-Menü aus. Das funktioniert bei allen Plugins, die Sie verwenden, auf die gleiche Weise.

In Gutenberg befindet es sich im Einfüge-Tool zusammen mit Ihren Absatz-, Bild- und Galeriebausteinen. In Elementor finden Sie es im Widget-Bereich zusammen mit allen anderen Elementen, mit denen Sie Ihre Seiten gestalten.

Folgendes können Sie tun:

• Suche deinen Feed im Inserter nach dem Namen und ziehe ihn auf die Seite.
• Ziehen Sie ein „Smash Balloon“-Widget in einen beliebigen Elementor-Abschnitt oder eine beliebige Elementor-Spalte.
• Wählen Sie über ein Dropdown-Menü innerhalb des Blocks oder Widgets aus, welcher gespeicherte Feed angezeigt werden soll.
• Überprüfen Sie, ob Ihr Feed auf der Arbeitsfläche korrekt dargestellt wird, bevor Sie ihn veröffentlichen
• Erstellen Sie einen neuen Feed oder bearbeiten Sie den aktuell angezeigten Feed über das Elementor-Bedienfeld.

Fügen Sie Ihren Feed genauso hinzu wie alles andere auch

Jedes Smash-Balloon-Feed-Plugin bot bereits die Möglichkeit, einen Feed zu einer Seite hinzuzufügen – entweder über den klassischen Einbettungsblock oder über einen Shortcode. Daran hat sich nichts geändert, und alles, was Sie zuvor erstellt haben, funktioniert weiterhin einwandfrei.

Für den Instagram-Feed, benutzerdefinierte Twitter-Feeds, TikTok-Feeds und den Bewertungs-Feed gibt es in dieser Version einen neuen nativen Block und ein neues Widget. Der benutzerdefinierte Facebook-Feed und der YouTube-Feed Pro verfügten bereits über einen solchen Block bzw. ein solches Widget, und dieses Update stellt sicher, dass beide unter WordPress 7 weiterhin einwandfrei funktionieren.

Dein Feed wird nun als Block oder Widget auf der Seite eingebunden und ist dort bereits während der Erstellung sichtbar. Du wählst aus einem Dropdown-Menü aus, welcher Feed angezeigt werden soll, und er wird an der von dir festgelegten Stelle auf der Seite eingeblendet.

Egal, welche der sechs Varianten Sie nutzen und ob Sie die kostenlose oder die Pro-Version verwenden – das Hinzufügen eines Feeds funktioniert nun auf die gleiche Weise.

Fügen Sie beliebige Feeds direkt aus dem Block-Editor hinzu

Öffnen Sie den Einfüge-Assistenten, geben Sie den Namen des von Ihnen verwendeten Plugins ein, und schon erscheint Ihr Feed-Block neben Ihren Absatz-, Bild- und Galerie-Blöcken.

Fügen Sie ihn ein und wählen Sie Ihren Feed aus dem Dropdown-Menü „Feed auswählen“ aus. Ihre Beiträge, Videos oder Bewertungen füllen den Block direkt auf der Seite aus.

Von dort aus sehen Sie das eigentliche Element an seinem tatsächlichen Platz, in der Breite, die es haben wird, mit Ihrer Überschrift darüber und Ihrer Schaltfläche darunter. Sie können sehen, wie viel Platz es auf der Seite einnimmt, noch bevor ein Besucher es überhaupt lädt.

Und so läuft das ab:

• Eine Floristin fügt ihren Instagram-Feed auf einer Hochzeitsseite ein, sieht, wie viel Platz dieser oberhalb des Buchungsformulars einnimmt, und veröffentlicht den Beitrag in dem Wissen, dass das Formular weiterhin sichtbar bleibt
• Ein Fitnessstudio platziert die Bewertungen seiner Mitglieder über dem Kursplan und überprüft, ob der Kursplan noch auf dem Bildschirm zu sehen ist, bevor die Seite online geht.
• Eine Bäckerei platziert ihren TikTok-Feed oberhalb des Bestellbuttons und stellt sicher, dass der Button weiterhin gut erreichbar ist

Fügen Sie einen Feed in einen beliebigen Elementor-Abschnitt ein

Wenn Sie mit Elementor arbeiten, finden Sie Ihr Smash-Balloon-Feed-Widget direkt im Widget-Bereich.

Suchen Sie im Widget-Bereich nach Ihrem Plugin und ziehen Sie das Widget anschließend in einen beliebigen Abschnitt oder eine Spalte, an der Sie gerade arbeiten.

Wählen Sie Ihren Feed aus dem Dropdown-Menü aus, und er wird in der Vorschau neben Ihnen in der Spalte angezeigt, in der Sie ihn platziert haben.

Breite und Abstand werden über die Elementor-eigenen Steuerelemente festgelegt – dieselben, die Sie auch für Überschriften oder Schaltflächen verwenden –, sodass der Feed mit dem Rest des Abschnitts ausgerichtet ist und nicht davon abweicht.

Wenn Sie den Feed selbst ändern möchten, finden Sie im Bedienfeld Links, über die Sie einen neuen Feed erstellen oder den aktuell angezeigten bearbeiten können. Beide Links öffnen sich in einem neuen Tab, sodass die Seite, die Sie gerade gestalten, unverändert bleibt.

• Ein Yoga-Studio platziert seinen Instagram-Feed neben dem Kursplan, damit neue Teilnehmer einen Eindruck vom Raum und den Menschen bekommen, bevor sie sich für einen Kurs entscheiden
• Ein Restaurant zeigt seine Google-Bewertungen unter der Speisekarte in passender Breite an, sodass die Gäste genau in dem Moment auf die Bewertungen stoßen, in dem sie entscheiden, wo sie essen möchten.
• Eine Boutique stellt ihre TikTok-Videos auf derselben Ebene wie die Produktfotos dar, sodass die Käufer das Produkt in Gebrauch sehen können, ohne am Kaufbutton vorbeizuscrollen

Ihre Feeds werden in WordPress 7 korrekt angezeigt

In WordPress 7 wurde der Block-Editor in einen Iframe verschoben, wodurch sich die Darstellung der Blöcke während der Bearbeitung geändert hat. Alle Smash-Balloon-Plugins wurden entsprechend aktualisiert, sodass alle sechs nun vollständig kompatibel sind.

Ihr Feed wird im Editor genauso dargestellt wie auf der Live-Seite. Das gilt unabhängig davon, ob Sie den neuen Block, den alten Block oder ein älteres Elementor-Widget verwenden – Seiten, die Sie zuvor erstellt haben, bleiben also genau so, wie sie sind.

Wenn man während der Arbeit den aktuellen Feed sieht, kann man eine Seite in einem Durchgang fertigstellen:

• Fügen Sie unter der Preisliste eines Salons einen Bewertungs-Feed ein und zeigen Sie beides auf dem Bildschirm an, damit die Liste auch nach der Veröffentlichung gut lesbar bleibt
• Passen Sie beim Erstellen die Größe des Instagram-Feeds über dem Buchungsformular der Pension so an, dass das Formular weiterhin sichtbar bleibt, wenn jemand auf der Seite landet.
• Beobachten Sie, wie ein TikTok-Feed auf der Veranstaltungsseite einer Brauerei in seiner tatsächlichen Breite angezeigt wird, damit die darunter liegenden Konzerttermine nicht aus dem Blickfeld geraten

Jeder Feed, den Sie bereits erstellt haben, funktioniert weiterhin

Nichts hier verlangt von Ihnen, alte Seiten noch einmal durchzugehen. Ein Feed, der mit dem Legacy-Block oder dem Legacy-Elementor-Widget platziert wurde, läuft weiterhin genau so weiter wie bisher.

Auch diese älteren Beiträge werden im WordPress-7-Editor korrekt dargestellt, sodass eine Seite, die Sie vor einem Jahr erstellt haben, sich wie erwartet öffnet und in der Vorschau angezeigt wird. Dies geschieht durch ein einfaches Update – es sind keinerlei Einstellungen erforderlich.

Auch die Shortcodes bleiben unverändert. Wenn Sie Ihre Feeds auf diese Weise einfügen, machen Sie einfach so weiter.

Der neue Block und das neue Widget stehen für den nächsten Feed, den Sie einfügen, sowie für jeden älteren Feed, den Sie verschieben möchten, zur Verfügung.

Das gleiche Upgrade, egal welche Plattform Sie nutzen

Jedes Smash Balloon-Plugin fügt einer Seite auf dieselbe Weise einen Feed hinzu – wie ein Block in Gutenberg oder ein Widget in Elementor. Suchen Sie nach dem Namen des Plugins, fügen Sie es ein und wählen Sie Ihren Feed aus der Dropdown-Liste aus.

Selbst wenn man drei davon nutzt, gibt es immer noch nur eine Möglichkeit, einen Beitrag zu veröffentlichen. Was man auf seinem Instagram-Feed lernt, weiß man bereits, wenn man sechs Monate später Bewertungen zu einer Seite hinzufügt.

Bei Elementor ist es genauso, und zwar sowohl bei der kostenlosen als auch bei der Pro-Version. Das bedeutet, dass eine Website, auf der das kostenlose Plugin läuft, und eine Website, auf der die Pro-Version läuft, auf dieselbe Weise platziert werden.

Nehmen wir einmal an, Sie betreiben eine Marketingagentur mit einem Instagram-Feed auf der Website eines Kunden und einem Facebook-Feed auf der Website eines anderen Kunden. Auf beiden Websites gehen Sie dabei nach dem gleichen Prinzip vor, wodurch Sie Zeit und Kosten für die Erstellung neuer Anleitungen sparen.

So fügen Sie Ihren Instagram-Feed in wenigen Minuten auf einer beliebigen Seite ein

Dies funktioniert sowohl bei Instagram Feed Free als auch bei Instagram Feed Pro. Alle anderen Plugins hier funktionieren auf die gleiche Weise. Wenn Sie also „Custom Twitter Feeds“, „Custom Facebook Feed“, „YouTube Feed Pro“, „TikTok Feeds“ oder „Reviews Feed“ nutzen, gelten die folgenden Schritte eins zu eins.

Verwendung des Gutenberg-Blocks

Öffnen Sie die Seite oder den Beitrag, zu dem Sie einen Feed hinzufügen möchten, und klicken Sie auf das Plus-Symbol, um den Block-Einfüger zu öffnen. Suchen Sie nach „Instagram-Feed“ und wählen Sie den Instagram-Feed-Block aus.

Wählen Sie den gewünschten Feed aus dem Dropdown-Menü „Feed auswählen “ aus, und er wird direkt auf dieser Seite angezeigt.

Anschließend können Sie eine Vorschau der Seite anzeigen, um zu überprüfen, ob sie Ihren Vorstellungen entspricht, und sie dann wie gewohnt veröffentlichen.

Verwendung des Elementor-Widgets

Öffnen Sie Ihre Seite in Elementor und suchen Sie im Widget-Bereich auf der linken Seite nach „Instagram-Feed“. Ziehen Sie das Widget in einen beliebigen Abschnitt oder eine beliebige Spalte auf Ihrer Seite.

Wählen Sie in den Widget-Einstellungen den gewünschten Feed aus der Dropdown-Liste aus.

Sie haben noch keinen erstellt? Klicken Sie auf „Neuen Feed erstellen“ und richten Sie ihn genauso ein wie über das Dashboard des Plugins, indem Sie Ihre Quelle, Ihr Layout und Ihren Stil auswählen.

Wenn Sie den angezeigten Feed ändern möchten, gelangen Sie durch Klicken auf „Diesen Feed bearbeiten“ direkt in einem neuen Tab zum Customizer, während Elementor geöffnet bleibt.

Passen Sie die Spaltenbreite und den Abstand genauso an wie bei jedem anderen Elementor-Widget und aktualisieren Sie anschließend die Seite.

Nachdem Sie den Beitrag veröffentlicht haben, rufen Sie die Seite im Frontend auf, um zu überprüfen, ob Ihr Feed geladen wird und genauso aussieht wie im Editor.

Wenn Sie einen älteren Block oder ein älteres Widget auf einer anderen Seite verwenden, müssen Sie dort nichts ändern. Es funktioniert weiterhin genau wie bisher.

Ihre Feeds können in jede beliebige Seite eingebunden werden

Wusstest du, dass du jetzt in weniger als einer Minute einen Feed zu einer brandneuen Seite hinzufügen kannst – entweder über den Block oder das Widget?

Die Shortcode-Option steht weiterhin zur Verfügung, falls Sie diese bevorzugen, aber für die meisten neuen Seiten ist der native Block oder das Widget der schnellere Weg, um das gewünschte Ergebnis zu erzielen.

• Für neue Feeds gibt es keinen Shortcode zum Kopieren
• Keine separaten Schritte zwischen Gutenberg und Elementor
• Man kann nicht abschätzen, wie ein Feed aussehen wird, bevor man ihn veröffentlicht

Wenn Sie bereits ein Smash-Balloon-Plugin verwenden, aktualisieren Sie es auf die neueste Version und probieren Sie den neuen Block oder das neue Widget auf Ihrer nächsten Seite aus. Falls Sie noch kein Plugin nutzen, legen Sie mit Smash Balloon los und erstellen Sie Ihren ersten Feed von Anfang an mit dem nativen Block.

Abschließend möchten wir uns ganz herzlich bei unserer Community bedanken. Euer Feedback prägt unsere Entwicklungen, und die Darstellung der Feeds auf einer Seite ist ein Thema, das oft angesprochen wird.

Welche Plattform fügst du als Erstes hinzu: Instagram, Facebook oder etwas anderes? Schreib uns unten einen Kommentar und lass es uns wissen.