Soziale Wand 
Feed-Analytik 
In deinem Feed wurden deine Beiträge gestern einwandfrei angezeigt. Heute sieht es irgendwie komisch aus.
Vielleicht sind die Spalten zu einer einzigen zusammengefallen. Vielleicht sehen Ihre Bilder gequetscht oder gestreckt aus. Vielleicht ist der Abstand verschwunden, oder das Ganze blinkt für einen Moment ohne Formatierung, bevor es an die richtige Stelle rückt. Der Inhalt wird weiterhin angezeigt. Es sieht nur falsch aus, besonders auf Mobilgeräten.
Falls dir das passiert ist, mach dir keine Sorgen. Es handelt sich so gut wie nie um einen echten Fehler. Es ist ein Problem mit den Einstellungen, und du kannst es beheben, ohne auch nur eine einzige Zeile Code anzurühren – selbst wenn du kein Entwickler bist.
Sobald Sie wissen, welche Ursache zu Ihrem Symptom passt, lässt sich das Problem oft mit einem einzigen Klick beheben.
Lassen Sie uns also das, was Sie sehen, der entsprechenden Einstellung zuordnen, mit der sich das Problem beheben lässt. Wir werden Spalten, Abstände und die Darstellung auf Mobilgeräten in dieser Reihenfolge durchgehen, damit Sie zuerst die entsprechende Einstellung anpassen und das CSS überspringen können, das Sie wahrscheinlich nicht benötigen.
- Warum sieht mein Feed fehlerhaft oder unformatiert aus? (Kurze Antwort)
- Ordnen Sie Ihr Symptom der Ursache zu (Hier beginnen)
- Spaltenanzahl und -abstand festlegen
- Behebung von layoutbezogenen Problemen auf Mobilgeräten
- Wenn Ihr Theme das Styling des Feeds überschreibt
- Beheben Sie das Problem mit der AJAX-Theme-Ladefehler-Korrektur
- Sichere benutzerdefinierte CSS-Überschreibungen, die Ihr Theme nicht beeinträchtigen
- Ein Feed, der wirklich zu Ihrer Website passt
Warum sieht mein Feed fehlerhaft oder unformatiert aus? (Kurze Antwort)
Dein Feed funktioniert einwandfrei. Es handelt sich fast immer um eines von drei Einstellungsproblemen.
- Dein Layout wurde nie an den verfügbaren Platz angepasst. Die Anzahl der Spalten und der Abstand entsprechen nach wie vor den Standardeinstellungen, sodass die Beiträge entweder zu dicht beieinander stehen oder zu klein dargestellt werden.
- Ihr Theme überschreibt die Stile des Feeds. Das CSS Ihres Themes hat Vorrang, wodurch der Feed nicht mehr wie vorgesehen dargestellt wird.
- Ein Konflikt beim Laden des Themes verhindert, dass die Stile beim Laden angewendet werden. Das ist das Symptom, bei dem die Seite zunächst ohne Stile angezeigt wird und dann plötzlich an die richtige Darstellung angepasst wird.
Das ist das Beruhigende daran: Man nimmt diese Anpassungen direkt in den Einstellungen des Feeds vor, und die meisten Nutzer müssen sich nie mit einem Stylesheet beschäftigen. Es ist keine Programmierung erforderlich.
Ordnen Sie Ihr Symptom der Ursache zu (Hier beginnen)
Bevor du irgendetwas änderst, benenne das, was du siehst.
Jedes Layout-Problem hat eine wahrscheinlichste Ursache. Ordnen Sie Ihr Symptom dieser Ursache zu, und Sie gelangen direkt zu der einen Lösung, die wirklich zählt.
Hier sind die häufigsten Ursachen, geordnet nach der Reihenfolge, in der sie überprüft werden sollten.
| Was Sie sehen | Wahrscheinlichste Ursache | Wohin soll es gehen? |
|---|---|---|
| Zu viele oder zu wenige Spalten, zu wenig Platz | Layout-Einstellungen wurden nicht angepasst | Spaltenanzahl und -abstand festlegen |
| Auf dem Desktop sieht es gut aus, auf dem Handy jedoch nicht | Einstellung für separate mobile Spalte bleibt unverändert | Behebung von layoutbezogenen Problemen auf Mobilgeräten |
| Die Feed-Stile scheinen überschrieben zu sein oder nicht zum Markenimage zu passen | Konflikt bei der Spezifität von Theme-CSS | Wenn Ihr Theme das Styling des Feeds überschreibt |
| Blinkt zunächst ohne Formatierung, rastet dann ein | Theme-Ladefehler oder JavaScript-Konflikt | Beheben Sie das Problem mit der AJAX-Theme-Ladefehler-Korrektur |
Nun zur Bestellung.
Überprüfen Sie zunächst die Einstellungen. Das sind die beiden obersten Zeilen. Sowohl die Spaltenanordnung auf dem Desktop als auch die Darstellung auf Mobilgeräten werden in den Einstellungen festgelegt. Als Nächstes kommt ein Theme-Konflikt. Dann ein Lade-Konflikt. Benutzerdefiniertes CSS kommt, wenn überhaupt, erst an letzter Stelle.
Diese Reihenfolge ist nicht zufällig. Sie reicht von der Lösung, die die meisten Fälle löst, bis hin zu der, die die wenigsten Fälle löst.
Das ist der Fehler, den die meisten Leute machen. Sie sehen einen fehlerhaften Feed und greifen sofort auf benutzerdefinierten Code zurück. Sie fangen an, CSS zu schreiben, um das Layout zu erzwingen.
Mach das noch nicht. In den meisten Fällen lässt sich das Problem durch eine integrierte Einstellung oder das Aktivieren eines einzigen Kontrollkästchens beheben. Wenn du in dieser Reihenfolge vorgehst, ersparst du dir das Schreiben von unnötigem CSS.
Suchen Sie also Ihr Symptom in der Tabelle. Gehen Sie zu dem entsprechenden Abschnitt. Beheben Sie das Problem dort.
Spaltenanzahl und -abstand festlegen
Zu viele Spalten? Zu wenige? Beiträge, die dicht gedrängt stehen und keinen Freiraum lassen?
Meistens sind es die Spaltenanzahl und der Abstand, die auf ihren Standardwerten belassen wurden, und das lässt sich ganz einfach über den Live-Customizer beheben, der in jedem Smash-Balloon-Plugin enthalten ist.
Sie legen die Zeilen und Spalten fest, sehen in einer Live-Vorschau, wie sich der Feed aktualisiert, und speichern Ihre Änderungen.
So legen Sie die Spalten und Abstände fest.
- Öffnen Sie in Ihrem WordPress-Dashboard Ihren Feed und klicken Sie auf „Anpassen“.
- Klicken Sie auf die Registerkarte „Layout “.
- Suchen Sie die Steuerung für die Spaltenanzahl. Legen Sie die Spaltenanzahl für Desktop, Tablet und Smartphone fest. Für jede Bildschirmgröße gibt es eine eigene Einstellung.
- Für Instagram-Feeds kannst du den Wert für „Padding“ anpassen, um den Abstand zwischen den Beiträgen zu ändern.
- Klicken Sie auf „Speichern“.
Möchten Sie auf dem Desktop ein übersichtliches Raster mit drei Spalten? Stellen Sie die Anzahl der Spalten auf dem Desktop auf 3 ein. Das ist schon die ganze Lösung.
Auf der Registerkarte „Layout“ lässt sich auch die Bildform festlegen. Sie können für Ihre Beiträge ein Seitenverhältnis von 1:1 (quadratisch), 4:5 (Hochformat) oder 3:4 einstellen. Das ist praktisch, wenn Ihre Bilder gequetscht oder gestreckt aussehen, da ein passendes Seitenverhältnis sie sauber zuschneidet.
Behebung von layoutbezogenen Problemen auf Mobilgeräten
Dein Feed kann auf dem Desktop perfekt aussehen. Auf deinem Handy sieht er vielleicht chaotisch aus.
Und zwar aus folgendem Grund: Die Spalteneinstellung für Mobilgeräte ist unabhängig von der für Desktop-Geräte. Eine Änderung der Spalten auf dem Desktop hat keinerlei Auswirkungen auf Mobilgeräte.
Ein Feed, der auf dem Desktop auf vier Spalten eingestellt ist, versucht also, alle vier Spalten auf den schmalen Bildschirm eines Smartphones zu quetschen. Jetzt ist jedes Bild nur noch ein winziger Streifen. Das Ganze wirkt beengt und zusammengedrängt.
Die Lösung besteht darin, die Spalten für Mobilgeräte separat festzulegen. Wechseln Sie dazu auf dieselbe Registerkarte „Layout“, die Sie zuvor verwendet haben.
- Öffnen Sie Ihren Feed, klicken Sie auf „Anpassen“ und dann auf die Registerkarte „Layout “.
- Suchen Sie die Steuerelemente für Tablets und Mobilgeräte. Sie befinden sich direkt neben dem Steuerelement für Desktop-Computer.
- Stellen Sie diese Werte niedriger als bei Desktop ein und klicken Sie dann auf „Speichern“.
Ein Handybildschirm ist schmal, daher sieht eine geringere Spaltenanzahl fast immer besser aus. Wenn die Desktop-Version vier Spalten hat, sollten Sie die Anzahl der Spalten auf dem Handy auf eine oder zwei reduzieren, nicht auf vier.
Diese eine Änderung behebt die meisten Probleme mit dem Layout auf Mobilgeräten sofort.
Wenn Ihr Theme das Styling des Feeds überschreibt
Manchmal hat man die Spalten festgelegt und die Abstände angepasst, und trotzdem entspricht das Ergebnis nicht dem, was man in der Vorschau des Customizers sieht.
Die Sache ist folgende: Dein Theme verfügt über ein eigenes CSS – also den Code, der das Erscheinungsbild bestimmt. Das Gleiche gilt für deinen Feed. Wenn beide versuchen, dasselbe Element zu gestalten, muss sich eines davon durchsetzen.
Und wenn das CSS Ihres Themes diesen Konflikt gewinnt, verliert Ihr Feed sein Erscheinungsbild.
Hier sind die Anzeichen dafür, dass Ihr Theme die Ursache ist.
- Die Vorschau im Customizer sieht richtig aus, aber die Live-Anzeige sieht falsch aus.
- Schriftarten, Farben oder Rahmen entsprechen nicht Ihren Einstellungen.
- Das Problem besteht weiterhin, auch nachdem Sie die Einstellungen angepasst und gespeichert haben.
Wenn das auf dich zutrifft, fange noch nicht gleich mit dem Programmieren an. Benutzerdefiniertes CSS ist der letzte Schritt, nicht der erste.
Probieren Sie zunächst Ihre Einstellungen aus und wenden Sie dann die im nächsten Abschnitt beschriebene Lösung zum Laden des AJAX-Themes an. Die meisten Theme-Konflikte lassen sich damit beheben. Erst wenn beides nicht funktioniert, benötigen Sie benutzerdefiniertes CSS.
Und wenn du es brauchst, füge es an der richtigen Stelle ein. Füge es unter „Darstellung“ » „Anpassen“ » „Zusätzliches CSS“ ein, nicht in deinen Theme-Dateien.
Wenn Sie ein Block-Theme verwenden, gehen Sie zu „Darstellung“ » „Editor“ » „Stile“, klicken Sie auf das Drei-Punkte-Menü (⋮) und wählen Sie „Zusätzliches CSS“, um Ihren Code einzufügen.
Dadurch bleibt Ihre Korrektur erhalten, sodass sie bei einem Theme-Update nicht gelöscht wird.
Weiter unten werde ich ein paar sichere Übersteuerungsmöglichkeiten vorstellen. Behalte CSS vorerst noch im Hinterkopf. Es dient zur Feinabstimmung, sobald die einfacheren Korrekturen vorgenommen wurden.
Beheben Sie das Problem mit der AJAX-Theme-Ladefehler-Korrektur
Der Feed wird für den Bruchteil einer Sekunde ohne Formatierung angezeigt und passt sich dann plötzlich an?
Das ist ein Konflikt beim Laden von Themes. Und es gibt eine Ein-Klick-Funktion, mit der sich das beheben lässt. Ganz ohne Programmiercode.
Das ist der Sachverhalt: Sowohl Ihr Theme als auch Ihr Feed laden ihre Stile beim Öffnen der Seite. Manchmal kommt es vor, dass der Ladevorgang des Themes den Feed behindert. Daher wird der Feed zunächst für einen Moment im Rohzustand angezeigt, bevor die Stile nachgeladen werden.
Sie haben zwei Möglichkeiten, damit umzugehen.
Die manuelle Methode besteht darin, die Skripte Ihres Themes durchzugehen. Sie müssten den Code, der den Konflikt verursacht, ausfindig machen und die Art und Weise, wie er geladen wird, überarbeiten. Das erfordert Zeit, Geduld und Kenntnisse im Umgang mit Code, über die die meisten Menschen nicht verfügen.
Der einfachste Weg ist eine integrierte Einstellung namens „AJAX-Theme-Loading-Fix“. Sie lädt den Feed so, dass Konflikte beim Theme-Wechsel umgangen werden, sodass die Stile bereits beim ersten Rendern korrekt angewendet werden. Ein einziges Kontrollkästchen reicht dafür aus.
Hier finden Sie es.
- Öffne den Instagram-Feed » Einstellungen » Erweitert (oder den Facebook-Feed » Einstellungen » Erweitert).
- Aktivieren Sie die Korrektur für das Laden des AJAX-Themes.
- Klicken Sie auf „Änderungen speichern“.
Damit ist die Sache für die meisten Leute schon geklärt.
Hast du auch seltsame oder falsche Bildgrößen? Es gibt eine ausführlichere Version dieser Lösung.
Aktivieren Sie auf demselben Bildschirm „Einstellungen“ » „Erweitert“ drei Einstellungen gleichzeitig.
- Korrektur beim Laden des AJAX-Themes
- JavaScript im Head-Bereich in die Warteschlange einreihen
- Bildladen mit JavaScript
Klicken Sie auf „Änderungen speichern“. Löschen Sie anschließend den Plugin-Cache auf der Registerkarte „Feeds“ mit der Option „Alle Caches löschen“.
Dadurch werden die Bilder im Feed mit den neuen Einstellungen ordnungsgemäß neu geladen.
Ein Hinweis zum Lazy Loading: Falls ein Konflikt beim Lazy Loading dazu führt, dass Ihre Bilder nicht angezeigt werden, liegt die Lösung in der umgekehrten Vorgehensweise. Gehen Sie zu „Einstellungen“ » „Erweitert“ und deaktivieren Sie dort stattdessen das Laden von Bildern per JavaScript.
Diese beiden Optionen wirken also gegensätzlich. Das Aktivieren des JavaScript-Bildladens behebt einige Probleme. Das Deaktivieren behebt andere. Testen Sie die Optionen nacheinander und überprüfen Sie Ihren Feed nach jeder Änderung, um festzustellen, welche Einstellung für Ihre Website erforderlich ist.
Sichere benutzerdefinierte CSS-Überschreibungen, die Ihr Theme nicht beeinträchtigen
Nach all dem immer noch nicht richtig? Dann wird es Zeit für ein bisschen CSS.
Zunächst einmal die gute Nachricht: So weit kommt man selten. Bei den meisten Nutzern lässt sich das Problem durch eine Einstellung oder die AJAX-Korrektur beheben. Wenn Sie dies lesen, gehören Sie zur Ausnahme und nicht zur Regel.
Und diese Snippets stehen nicht im Widerspruch zu Ihrem Theme. Sie sind klein, zielgerichtet und sicher.
Dies ist die manuelle Vorgehensweise, daher erfordert sie etwas mehr Aufwand. Man fügt Code ein, anstatt einen Wert zu ändern. Aber jedes der folgenden Code-Schnipsel erfüllt eine einfache Aufgabe, und man kann sie direkt einfügen.
Hier sind vier risikoarme Alternativen, die Sie ausprobieren können.
- Den Abstand zwischen den Pfosten verringern. Verwendung
#sb_instagram .sbi_photo { padding: 4px; }um den Abstand zu verringern. Verringern Sie den Wert für einen engeren Abstand, erhöhen Sie ihn für mehr Platz. - Eine einheitliche Bildhöhe erzwingen. Verwendung
#sb_instagram .sbi_photo { height: 200px; }damit alle Pfosten aufeinanderstimmen. Dadurch werden Reihen korrigiert, die unregelmäßig oder ungleichmäßig aussehen. - Die Form des Bildes sollte einheitlich bleiben. hinzufügen
#sb_instagram .sbi_photo { background-size: cover; }damit die Fotos sauber zugeschnitten werden, anstatt gestreckt zu werden. - Passen Sie den Spaltenabstand auf Mobilgeräten an. Schließe deine Abstandsregel in
@media (max-width: 480px) { ... }um nur die Handyansicht zu ändern, nicht die Desktop-Ansicht.
Öffnen Sie einfach „Darstellung“ » „Anpassen“ » „Zusätzliches CSS“, geben Sie das gewünschte CSS ein und testen Sie, wie Ihr Feed nun funktioniert.
Wenn Sie ein Block-Theme verwenden, können Sie stattdessen „Darstellung“ » „Editor“ » „Stile“ öffnen, auf das Drei-Punkte-Menü (⋮) klicken und dann auf „Zusätzliches CSS“ klicken.
Ein letzter Schritt. Nachdem Sie gespeichert haben, leeren Sie den Plugin-Cache auf der Registerkarte „Feeds“ mit der Option „Alle Caches leeren“. Dadurch werden Ihre neuen Stile sofort angezeigt.
Das war’s schon. Passen Sie einen Ausschnitt an, speichern Sie ihn, überprüfen Sie Ihren Feed und wiederholen Sie den Vorgang nur, wenn es nötig ist.
Häufig gestellte Fragen
Warum wird in meinem Feed auf dem Handy eine falsche Spaltenanzahl angezeigt?
Die Spalteneinstellung für Mobilgeräte ist unabhängig von der für den Desktop. Gehen Sie zu „Anpassen“ » „Layout“ und legen Sie die Spalten für den Breakpoint für Mobilgeräte separat fest. Setzen Sie den Wert für einen schmalen Handybildschirm auf 1 oder 2.
Kann ich das Design meines Feeds mit CSS vollständig anpassen?
Ja, das geht, aber in der Regel ist es nicht nötig. Der integrierte Live-Editor von Smash Balloon deckt die meisten Fälle ab. Heben Sie sich das CSS für letzte Feinabstimmungen auf, falls der Live-Editor nicht die gewünschte Option bietet.
Warum sieht mein Feed beim Laden der Seite für einen Moment so aus, als wäre er nicht formatiert?
Dieser Bildschirmflackern ist ein Konflikt beim Laden des Themes, kein Fehler. Aktiviere die Korrektur für das AJAX-Theme-Laden unter „Einstellungen“ » „Erweitert“ und klicke anschließend auf „Änderungen speichern“. Bei den meisten Nutzern wird das Bildschirmflackern dadurch behoben.
Werden meine Einstellungen für das Feed-Layout zurückgesetzt, wenn ich mein Design ändere?
Nein, Ihre Feed-Einstellungen bleiben beim Wechsel des Themes erhalten. Das CSS des neuen Themes kann jedoch das Erscheinungsbild des Feeds überschreiben. Überprüfen Sie erneut, ob Spezifitätskonflikte vorliegen, und wenden Sie gegebenenfalls erneut die Korrektur für das Laden des Themes per AJAX an.
Brauche ich Programmierkenntnisse, um ein Layoutproblem zu beheben?
Nein, das musst du nicht. Fast alle Layout-Einstellungen lassen sich über Schaltflächen oder Schieberegler im Feed-Konfigurator vornehmen. Du musst keinen Code schreiben, auch wenn du kein Technik-Experte bist.
Ein Feed, der wirklich zu Ihrer Website passt
Ein Feed, der fehlerhaft aussieht, ist in den meisten Fällen gar nicht defekt. Es handelt sich fast immer um eine Einstellung.
Ordnen Sie Ihr Symptom zunächst der Ursache zu. Korrigieren Sie die Einstellung, bevor Sie das Stylesheet bearbeiten. Und für die meisten Nutzer ist die Lösung mit einem Klick erledigt – ganz ohne eine einzige Zeile Code.
Es gibt integrierte Layout-Steuerelemente für Spalten und Abstände. Es gibt separate mobile Einstellungen für Smartphone-Bildschirme. Und es gibt die AJAX-Korrektur für das Laden von Themes, um das kurzzeitige Aufblitzen zu vermeiden. Benutzerdefiniertes CSS ist ebenfalls vorhanden, allerdings nur für die seltenen Feinabstimmungen in der Endphase.
Möchten Sie, dass Ihre Einbettungen auch an allen anderen Stellen Ihrer Website genauso gut aussehen? Diese Anleitungen führen Sie Schritt für Schritt durch den Vorgang:
- Eine responsive Instagram-Einbettung zu WordPress hinzufügen
- Ein responsives Facebook-Video einbetten
- Eine responsive Twitter-Einbettung hinzufügen
Beginnen Sie jetzt damit, das Layout Ihres Feeds zu optimieren
Holen Sie sich „Instagram Feed Pro“ oder „Facebook Feed Pro“ und erhalten Sie Feeds, die auf jedem Bildschirm perfekt zu Ihrer Website passen.
