Unterschiedliche Ansicht mobil und desktop

Es wäre vor allem nützlich, wenn es zu mehr Angaben käme (s.a. Forenregeln)

 

Das Verhalten, von dem du sprichst, nennt sich RWD – responsive webdesign und legt fest, wie Objekte auf unterschiedlichen Ausgabegeräten dargestellt werden. Trotz Hinweis von @Kurt Singer auf die Forenregeln, hast du keine Angaben zum System gemacht, (Theme, Pagebuilder) weshalb man dir auch keine konkreten Tipps geben kann.

Grundsätzlich: die Inhalte sind falsch aufgebaut, weshalb bspw. beim Umbruch auf ein anderes Ausgabegerät Überschrift und Bild "auseinandergerissen" werden. Durch einen korrekten Aufbau der Inhalte könnten diese Probleme behoben werden.

 

Nein, tut es nicht. Man muss sich eben einlesen, einarbeiten, lernen, wie bei vielen Dingen.

 

Glücksache. Wenn du nicht weißt, was du da tust, hätte es auch andersherum laufen können. Du kannst zwar heutzutage eine Website (weitestgehend) ohne Programmierung erstellen, aber nicht ohne technisches Wissen. Wenn du nicht einmal die Fragen nach Theme und Pagebuilder beantworten kannst, sehe ich keinen Anknüpfungspunkt (für mich), dir zu helfen.

Aber wenn du anscheinend schon ein System gefunden hast, was für dich funktioniert, warum nutzt du es dann nicht weiter?

is so.

 

Bei WordPress kannst du Responsive Webdesign verwenden. In der Datenbank gibt es 2023 nur noch Themes die Mobil first entwicklet wurden.

Empfehlen würde ich euch ein full-site-editing Theme
https://wordpress.org/themes/tags/full-site-editing/

hier kannst du mit Gutenberg wirklich alles selber gestalten.

ein besseres System ist mir nicht bekannt.

 

@Pipeband - du brauchst jetzt nich programmieren lernen much ein IT-Experte werden. Du mußt lediglich ein wenig anders denken um ein ansprechendes Ergebnis zu erhalten.

Soweit ich sehen kann ist da kein Page-Builder im Einsatz sondern wurde das mit WP-Bordmitteln mit dem Blockeditor gemacht....

Offensichtlich hast du Abschnitte erstelle und diese für den Desktop in 3 Spalten aufgeteilt.
Der Fehler dabei ist, das die Zusammengehörigkeit so nicht stimmig ist, denn jeder Abschnitt wird beim Umbruch auf responsives Design gesondert gestapelt.
Dein Aufbau, die Überschrift für den Pipemajor und den Drummajor sind in einem Abschnitt, die Bilder sind im nächsten Abschnitt und die Namen sind im dritten Abschnitt. Jetzt werden beim Stapeln für Handyansicht jeder Abschnitt für sich gestapelt - heißt die Funktionen untereinander, die Bilder untereinander und die Namen untereinander.

Das mußt du Umstrukturieren! Einen großen Block für die Headfunktionen darin 3 Blöcke. In jedem dieser Blöcke die Funktion (Pipemajor) das Bild und der Name in eigenen Blöcken untereinander.
Darunter wieder ein großer Block für die Piper mit dem selben Aufbau.

Damit werden beim Stapeln die einzelnen unterteilungen NICHT auseinander gerissen.

Ich hoffe ich konnte dir halbwegs übermitteln wie das gehen soll.

 

Ich gebe zu, ich mag den Blockeditor NICHT so sehr, ich meide ihn sogar!

Hier ein Bild, mit einen Versuch das so zu strukturieren, wie du das vielleicht angehen könntest.
Vielleicht findet sich noch jemand, der das mit dem Blockeditor besser zaubern kann.

Also ich habe einen 3-spaltigen Grundaufbau genommen. Eigentlich kannst du am Bild von meinen Schnellversuch den Aufbau sehen

 

Gerne, wenns gehoflen hat.

 

Also auf meien Handy (Samsung mit Android) ist das Bild zu sehen ...