1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 6.x Webseite sieht auf verschiedenen PC anders aus

Dieses Thema im Forum "Design" wurde erstellt von Flixiflux, 25. Juni 2024.

  1. Flixiflux

    Flixiflux Member

    Registriert seit:
    25. Juni 2024
    Beiträge:
    20
    Zustimmungen:
    3
    Hallo liebe Community!

    Letztes Jahr habe ich für einen Freund eine Wordpress Webseite erstellt für seinen Mobilen Pflegedienst. Das hat wunderbar geklappt. Ich habe mir anhand verschiedener Tutorials (YT / Udemy) mein knowhow selber beigebracht.

    Jetzt habe ich mir eine eigene Domain / eigenes Webhosting zugelegt um zu üben, da mir Webdesign mit Wordpress / Elementor riesigen Spaß macht.

    Aber da geht gerade irgendwie alles schief... die Webseite sieht auf jeden PC unterschiedlich aus, also die Widgets sind verschoben, haben eine andere Größe oder tauchen erst gar nicht auf...

    Mir fehlt das Wissen um zu verstehen, was ich falsch gemacht habe / wo das Problem liegt.

    Ich wäre für eure Hilfe sehr dankbar!

    Webseite: www.flixiflux.de (Bitte nicht den Inhalt bewerten, es ist wie gesagt eine Webseite zum üben :) )

    Vielleicht einige Daten die für euch wichtig sind:

    Theme: OceanWP Version 3.5.7
    WP Version 6.5.5
    Builder: Elementor 3.22.2

    Vielen Dank vorab!
     
    #1 Flixiflux, 25. Juni 2024
  2. uha

    uha Well-Known Member

    Registriert seit:
    14. Juli 2017
    Beiträge:
    279
    Zustimmungen:
    43
    Bei mir sieht die Seite soweit korrekt aus. Was heißt denn "unterschiedlich"? Ohne genauere Problembeschreibung wird man dir kaum helfen können.
     
    #2 uha, 25. Juni 2024
    Flixiflux gefällt das.
  3. Flixiflux

    Flixiflux Member

    Registriert seit:
    25. Juni 2024
    Beiträge:
    20
    Zustimmungen:
    3
    Dank uha, das habe ich total vergessen, mit Bildern sollte mein Problem besser zu erkennen sein.

    Noch eine Info vorweg: Die Webseite für meinen Kumpel habe ich auf einem Laptop gemacht. Meine "Übungsseite" habe ich teils auf dem Laptop, teils am PC gemacht, aber das sollte eigentlich nicht zu solchen Problemen führen oder?

    Hier die Bilder, also so sieht die Seite auf meinem PC aus und so ist alles korrekt:

    https://ibb.co/Sm5QjjK
    https://ibb.co/wBHw3dR
    https://ibb.co/sy0YWRk
    [​IMG]
    [​IMG]
    [​IMG]

    Und so sieht die Seite zum Beispiel aus, wenn ich sie mit meinem Laptop besuche:

    https://ibb.co/QXy8c5Z
    https://ibb.co/tb5FWRS
    https://ibb.co/hsbb36q
    [​IMG]
    [​IMG]
    [​IMG]

    Heute habe ich die Webseite am PC von der Arbeit aus besucht, nur um zu gucken wie sie von dort aussieht und auch da waren die Widgets verschoben usw., da habe ich jetzt nur keine Screenshots von, könnte ich aber nachliefern.

    Ich würde mich über jede Hilfe wirklich sehr freuen!
     
    #3 Flixiflux, 25. Juni 2024
  4. DummyGirl

    DummyGirl Well-Known Member

    Registriert seit:
    4. März 2021
    Beiträge:
    458
    Zustimmungen:
    151
    im webdesign sind idr die objekte relativ zueinander angeordnet und positionieren sich je nach bildschirmgröße und -format neu. das ist das grundkonzept vom rwd "responisve webdesign". wenn bestimmte objekte sich nicht zueinander verschieben sollen, müssen sie in divs/containers zusammengeführt und ihr verhältnis zueinander definiert werden.

    aber das alles über einen forumsbeitrag zu erklären, sprengt mmn die möglichkeitenen eines forums. am besten du steigst noch einmal intensiver in deine yt/udemy videos ein? ;)
     
    #4 DummyGirl, 26. Juni 2024
    Flixiflux gefällt das.
  5. Flixiflux

    Flixiflux Member

    Registriert seit:
    25. Juni 2024
    Beiträge:
    20
    Zustimmungen:
    3
    Tatsächlich habe ich an der Arbeit nochmal geschaut und das Problem hat sich tatsächlich gelöst nachdem ich mit Strg + Mausrad die Ansicht verkleinert habe :D

    Ich war nur so verwundert, als ich für meinen Freund letztes Jahr die Webseite gemacht habe (RWD PC / Tablet / Smartphone) war die Seite immer gleich aufgebaut, egal an welchem PC usw. ich mir die Webseite angeschaut habe.

    Was meinst du mit Divs? Also ich habe wirklich sehr sehr viele Tutorials geschaut und bin eigentlich der Meinung, ich weiß wofür Container da sind, Sections usw. usw.

    Aber man lernt ja nie aus :) kennst du speziell zu diesem Thema ein Tutorial oder Ähnliches, was ich mir dazu angucken kann?

    Auf jeden Fall Danke für eure bisherige Hilfe!

    Eine Sache fällt mir gerade noch ein zum Thema RWD. Man kann ja zB für das RWD "laptop" noch hinzufügen. Ist das notwendig? Damals bei der Webseite von meinem Freund hatte ich das nicht gemacht und die Seite wurde trotzdem auf dem Laptop wie erstellt angezeigt
     

    Anhänge:

    • clear.png
      clear.png
      Dateigröße:
      137 Bytes
      Aufrufe:
      1
    #5 Flixiflux, 27. Juni 2024
    Zuletzt bearbeitet: 27. Juni 2024
  6. DummyGirl

    DummyGirl Well-Known Member

    Registriert seit:
    4. März 2021
    Beiträge:
    458
    Zustimmungen:
    151
    naja, das ist ja keine lösung.
    auf einem 16" macbook sieht das ganze so aus und ich denke, dass ist nicht, wie du es geplant hast:
    upload_2024-6-27_23-2-41.png

    auf dem smartphone sieht die seite völlig unbrauchbar aus.
     
    #6 DummyGirl, 27. Juni 2024
    Flixiflux gefällt das.
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.176
    Zustimmungen:
    601
    Also meine Meinung, räume alles ab!
    die Kriese beginnt mit dem riesigen Hintergrundbild, auf das du mit diversen margins Texte verschiebst die dann bei der "richtigen" Browserfenstergröße schon mal ein temporär richtiges Ganzes anzeigt. Wenn du nun aber das Browserfenster veränderst zerfällt die ganze Konsrtuktion.

    Dazu 2 Bilder:
    Im ersten das gelbe Overlay zeigt das blau unterlegte Elementor Element mit margin-top: -902px; - Katastrophe!!!
    upload_2024-6-28_8-18-48.png

    Das zweite Bild bei verkleiinertem Browserfenster - unmöglich!!!
    upload_2024-6-28_8-19-14.png

    .... und alles mit Browser (hier Firefox) mit der Taste F12 erkennbar.
     
    #7 SEpp55, 28. Juni 2024
    Flixiflux und KuSin gefällt das.
  8. Flixiflux

    Flixiflux Member

    Registriert seit:
    25. Juni 2024
    Beiträge:
    20
    Zustimmungen:
    3
    RWD (Tablet / Smartphone) habe ich noch nicht bearbeitet, ich war bisher nur bei der PC Version. Jetzt mal ganz doof gefragt, kann es sein das die Laptop Version erst "gescheit" aussieht, wenn beim RWD die Tablet Version bearbeitet wurde?

    Wie gesagt, da war ich beim RWD noch nicht. Ich habe mit der PC Version angefangen und dann ist mir eben, wie oben beschrieben, aufgefallen, dass die PC Version auf verschiedenen Computern unterschiedlich dargestellt wird, das war oder ist ja mein Urspungsproblem.

    Tatsächlich fange ich nochmal von ganz vorne an, ist glaube ich am Besten :D

    Zu deiner Antwort hätte ich dennoch eine Frage: Wie bereits beschrieben, habe ich letztes Jahr diese Webseite für den Freund erstellt, da habe ich die Texte auch mit Margin/Padding an die richtige Stelle verschoben. Aber da hat alles funktioniert... und da habe ich von sehr vielen Stellen die Rückmeldung das die Seite sehr gelungen ist :cool:

    Aber wenn die Margin/Padding Werte das Problem sind, dass bei verschiedenen Browserfenstergrößen das Ganze "zerfällt", dann muss ich mich doch nochmla ganz dringend mit dem Thema beschäftigen und das werde ich auch tun, weil ich da voll bock drauf hab :cool:

    Danke für eure Rückmeldungen!
     
    #8 Flixiflux, 28. Juni 2024
  9. DummyGirl

    DummyGirl Well-Known Member

    Registriert seit:
    4. März 2021
    Beiträge:
    458
    Zustimmungen:
    151
    können wir nichts zu sagen, weil wir diese website nicht kennen. aber: wie schon von @SEpp55 und mir aufgeführt, versucht du, objekte über andere objekte oder hintergrundbilder "passgenau" zu schieben. da diese werte aber abhängig von der grösse des browserfensters sind funktioniert das nicht.
     
    #9 DummyGirl, 28. Juni 2024
    SEpp55 und Flixiflux gefällt das.
  10. Flixiflux

    Flixiflux Member

    Registriert seit:
    25. Juni 2024
    Beiträge:
    20
    Zustimmungen:
    3
    Ahhh jetzt hat's Klick gemacht, viiielen lieben Dank, hab jetzt verstanden was ich falsch gemacht habe.

    Das gute ist, aus Fehlern lernt man :D

    Ich mache dann mal alles von vorne :D
     
    #10 Flixiflux, 28. Juni 2024
    DummyGirl gefällt das.
  11. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.176
    Zustimmungen:
    601
    Grundsätzlich verwende ich auch die Margin und Padding als gestalterische Option, wenn das gewählt Theme in manchen Bereichen nicht meinen Vorstellungen entspricht, aber eher sparsam!
    Du hast aber bei dem deinem Beispiel sehr viel übereinander gelegt und dann mir margin-top versucht dort hin zu schieben wo es passt.
    Fehler ist einmal das fehlende Grundkonzept.
    1. Klasse Homepagebau: Für die Gestaltung hat sich durchgesetzt von oben nach unten - Header, Content und Footer Hier werden dann wieder Container zur Unterteilung eingesetzt. Z.B Im Header für Logo, Menü, SocialMedia, Suchfeld oder was auch immer man meint dort haben zu wollen. Das Theme gibt meist sehr brauchbare Vorschläge vor.
    Gleich dazu passend, dein verwendetes Theme OceanWP ist ein sehr mächtiges Theme und die meisten Amateur User können bei weitem die Möglichkeiten dieses Themes nicht ausschöpfen und sind von den vielen Einstell- und Gestaltungsmöglichkeiten meist sehr schnell überfordert und wissen nicht, wenn durch wildes klicken etwas aus dem Ruder läuft, wie sie das wieder zurückstellen.
    Dazu der nächste Tip - immer wieder backups fahren um gute Zwischenstände wieder eispielen zu können. Btw nicht nur ein Backup haben ist gut, sondern man sollte auch üben, eine Wiederherstellung machen zu können, denn ein Backup ist sinnlos wenn man im Bedarfsfall damit nichts anfangen kann.
    Nochmals konkret zu deiner oben verlinkten Seite. Bei 2100px Browserbreite passt es, würde ich sagen, doch bei weniger Breite wird es immer schlimmer. Das schon angesprochene riesige Hintergrundbild aht erstend zu viele Inhalte. Den Rahmen für das Logo, das Feld für die Beschreibung gehören dort nicht hinein! Weiters wird das Bild dynamisch der Browserbreite angepasst (verkleinert), heißt schälerer Browser - kleineres Bild aber noch immer -902px oberer Rand und das setzt sich bei den Zahnrädern mit den Inhalten dort fort.

    Das ist meine bescheidene Meinung und bin mir sicher, das meine Meinung weder für andere richtig sein muß und schon gar nicht vollständig sein kann. Also viel Glück bei deinen Versuchen. Noch eine alte Weisheit - eine Homepage ist NIE fertig, man findet immer etwas zum ändern, ob es dadurch besser wird ist Ansichtssache :rolleyes:
     
    #11 SEpp55, 28. Juni 2024
    Flixiflux gefällt das.
  12. Flixiflux

    Flixiflux Member

    Registriert seit:
    25. Juni 2024
    Beiträge:
    20
    Zustimmungen:
    3
    Vielen Dank für deine ausführliche Antwort!

    Ich habe den Fehler verstanden (und denke gerade, ohje, da hätteste auch selber drauf kommen :D ) und ich werde eure Tipps, die ihr alle mir hier gegeben habt, annehmen.

    Ich kann nur sagen: Tolles Forum, Tolle Member, danke dafür!
     
    #12 Flixiflux, 29. Juni 2024
    DummyGirl gefällt das.
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden