Columns & Grid blocks – mobile layout problem

  • Gelöst md_quer

    (@mdquer)


    vor 1 Monat

    Hallo zusammen,

    ich nutze ein Custom WordPress Block-Theme und habe ein großes Problem mit dem Layout auf mobilen Geräten.

    Ich möchte folgendes Desktop-Layout:
    Bild | Text
    Text | Bild

    Auf dem Handy wird es aber so gestapelt:
    Bild
    Text
    Text
    Bild
    oder
    Text
    Bild
    Bild
    Text

    Ich habe es sowohl mit dem Columns Block als auch mit dem Grid (Group) Block ausprobiert – das gleiche Problem tritt bei beiden auf.

    Dieses Problem scheint in allen Block-Themes aufzutreten, z. B. TT5, Greyd, Ollie usw., egal welches Theme ich verwende. Momentan ist es praktisch unmöglich, mit dem Block-Editor im Jahr 2026 eine professionelle Website für mobile Geräte zu erstellen, weil Layouts wie dieses nicht zuverlässig funktionieren. Jeder Page Builder kann das viel besser lösen.

    Der einzige Block, der einigermaßen funktioniert, ist der alte Media & Text Block, aber er ist veraltet und die Abstände stimmen oft nicht, daher ist er keine echte Lösung.

    Gibt es eine Möglichkeit, alternierende Bild/Text-Layouts mobil korrekt anzuzeigen, oder ist das einfach eine Einschränkung des Block-Editors?

Ansicht von 9 Antworten – 1 bis 9 (von insgesamt 9)
  • Thread-Starter md_quer

    (@mdquer)

    vor 1 Monat

    Also, ich muss mich korrigieren, es wird ja korrekt angzeigt . Aber korrekt sieht eben schlecht aus. Es müsste reverse angezeigt werden. Mit CSS hab ich das probiert, aber das greift nicht.

    https://postimg.cc/QFWrTbMS

    DAs ist das Bild zeigt die Listenansicht

    bscu

    (@bscu)

    vor 1 Monat

    In dem angehefteten Beitrag wird beschrieben, welche Informationen wir benötigen, um dir bei einem Problem zu helfen. Dazu gehört ein Link zur Seite und der Website-Bericht, der uns mit wichtigen Eckdaten zu deiner Website versorgt. Du kannst den Website-Bericht ganz bequem per Button kopieren und hier in einer Antwort einfügen. Du findest den Button unter Werkzeuge → Website-Zustand im Tab „Bericht“. Warte bitte mit dem Klick auf den Button, bis die Zustandsanzeige abgeschlossen ist.
    Bevor du ein neues Thema/Thread erstellst

    • Diese Antwort wurde vor 1 Monat von bscu geändert.
    Thread-Starter md_quer

    (@mdquer)

    vor 1 Monat


    Das Problem ist ein allgemeines Problem, das alles gängige Block Themes, wie TT5 oder Ollie betrifft. Die Frage ist eben nur, ob man egal ob Columns Block oder Grid Block mobil die Reihenfolge so ändern kann, dass wenn am Desktop : links Bild- rechtes Text , darunter links Text, rechtes Bild ist, das das mobil dann so kommt, das nicht zwei Bilder dann untereinander sind, also das zuerst die Überschrift und der Text kommt und am Ende das Bild. So ein Aussehen ist unprofessionell. Ich finde aber keine Lösung dafür. In der Greyd Suite, die halt sehr teuer ist, die haben ein eigenes Grid , dort klappt es. Zum Beispiel schau dir an: https://www.ortho-neusiedl.at/ueber-uns/,

    genau so sollte es sein, Sie verwenden die Geyd Suite . In Greyd Free Block Theme, schaut das ganze dann aber genauso aus, wie von mir beschreiben.

    • Diese Antwort wurde vor 1 Monat von md_quer geändert.
    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Monat

    Hallo,
    das kann man grundsätzlich über CSS lösen.
    Hier der Ansatz:
    Wenn du zwei Columns-Blöcke in der beschriebenen Art hast, weist du dem jeweils zweiten Columns-Clock z. B. die CSS-Klasse spalten-reverse zu. Unter Design > Editor > Styles: zusätzliches CSS (drei-Punkte Menü oben) gibst du dann die folgende CSS-Regel ein:

    @media (max-width: 781px) {
  .spalten-reverse {
      flex-direction: column-reverse;
  }
}

    Im Grunde musst du das dann bei jedem zweiten Spalten-Block machen. max-width kannst du dann nach deinen Wünschen anpassen.

    So habe ich das gerade mal schnell getestet und das funktioniert bei TT5. Kann aber ähnlich auch bei Ollie oder Greyd erstellt werden.

    Viele Grüße
    Hans-Gerd

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Monat

    Nachtrag: Ich sehe gerade, dass ich vor einiger Zeit einen entsprechenden Beitrag dazu geschrieben habe. Das habe ich glatt übersehen.

    Moderator threadi

    (@threadi)

    vor 1 Monat

    Exakt die gleiche Frage wurde auch im englischen Forum von dir geschrieben: https://wordpress.org/support/topic/columns-grid-blocks-mobile-layout-problem/

    Meine Antwort von dort übersetzt:

    Leider bietet der Block-Editor hier nicht viele Optionen zur Steuerung der mobilen Ansicht. Wie bereits erwähnt, wird die Reihenfolge durch die verwendeten Stile bestimmt.

    Meiner Meinung nach hast du drei Möglichkeiten:

    • Ich verwende dieses Plugin für die Optimierung für Mobilgeräte: https://wordpress.org/plugins/tzm-responsive-block-controls/ – damit haben Sie die volle Kontrolle über die Reihenfolge.
    • Du kannst das Problem mit der Reihenfolge auch mit benutzerdefiniertem CSS lösen, wie oben beschrieben.
    • Wenden dich mit einer Anfrage nach Optimierungen oder zusätzlichen Konfigurationsoptionen an das Gutenberg-Team. Ich würde empfehlen, zunächst hier nachzuschauen, ob es bereits ein Ticket zu diesem Thema gibt, andernfalls erstelle selbst eines: https://github.com/WordPress/gutenberg/issues

    Ich verwende auch gerne „Media & Text”. Ich würde es keineswegs als „veraltet” bezeichnen. Es handelt sich um einen aktiv gepflegten Block im Gutenberg-Verzeichnis. Und ja, es kann etwas knifflig sein, aber es eignet sich dennoch gut für viele Anwendungsfälle.

    Moderatorhinweis: Bitte künftig nicht an mehreren Stellen die gleiche Frage stellen. Das erspart denjenigen die helfen wollen die möglicherweise doppelte Arbeit, da die Frage woanders bereits beantwortet sein könnte.

    Thread-Starter md_quer

    (@mdquer)

    vor 1 Monat

    Vielen Dank ! für die Vorschläge. Ich hab mich für @hage entschieden, es ist sehr einfach 😀 und funktioniert super ! Das andere wäre mir zu aufwändig. Und vielen Dank auch für deinen Beitrag ! Hat mir super geholfen ! Liebe Grüße Ursula

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Monat

    Hallo,
    super – freut uns. Danke für die Rückmeldung.

    Und vielen Dank auch für deinen Beitrag ! Hat mir super geholfen !

    Freut mich sehr. 😊

    Denkst du bitte beim nächsten Mal daran, das Thema dann auch als gelöst zu markieren, wenn das Thema für dich erledigt ist. Danke.
    Gelöst
    Die Option findest du rechts in der Sidebar. Das habe ich jetzt schon gemacht.

    Sonst schauen wir unnötigerweise immer wieder in ein bereits gelöstes Thema. 😉

    Viele Grüße
    Hans-Gerd

    Thread-Starter md_quer

    (@mdquer)

    vor 1 Monat

    Ok, danke , fürs nächste Mal weiß ich’s dann 😀

Ansicht von 9 Antworten – 1 bis 9 (von insgesamt 9)

Du musst angemeldet sein, um auf dieses Thema zu antworten.