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

Eine Headline automatisch an die Bildschirmgröße anpassen!?

Dieses Thema im Forum "Design" wurde erstellt von Lebenskompetenz11, 25. April 2021.

  1. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    Schönen guten Abend,

    ich bin neu im Forum und bitte um Verzeihung, falls das Thema hier falsch platziert ist.

    Fakten: Wordpress - Gutenberg - Theme Astra

    Mein Problem:
    Nach einigem Hin und Her habe ich es hinbekommen, dass sich das Headerbild auf meiner Startseite responsive verkleinert. Aber die Headline verkleinert sich sehr stark mit, sodass sie auf dem Smartphone viel zu klein ist.

    Auch die Anordnung der Headline ist auch nicht wie gewünscht. Ich habe sie über "Spacing - Padding" zwar auf der Desktop-Version schon verschoben, aber auf Tablet und Smartphone sitzt sie dann natürlich wieder an einer ganz anderen Stelle. Da das Header-Bild ein Gruppenfoto von Personen ist, möchte ich, dass auf Desktop, Tablet und Smartphone es jeweils so ist, dass die Headline unterhalb der Köpfe der Personen platziert ist, damit sie nicht verdeckt sind. Derzeit ist das nur auf der Desktop-Version der Fall, auch den anderen Ansichten ist der Text über den Gesichtern platziert.

    Hat jemand Ideen dazu oder Erfahrungen mit diesem Problem und kann mir Tipps geben, auch wenn ich leider keinen Link zur Homepage schicken kann? (sie ist noch nicht online, bzw. im Aufbaumodus).

    Vielen Dank vorab!

    LG, Nin
     
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Die responsive Ansicht, auf Tablet und Handy wird mit MediaQueries vollzogen. Da mußt du eben selbst suchen, was/wie zu optimieren du imstande bist. Ohne Link wird dir keiner konkret helfen können.
    Wenn du die Seite online stellst kannst du sie vor neugirigen Zugriffen mit einem Maintenance Plugin in eine Aufbau- bzw. Wartungsmodus setzen (und temporär für Hilfeleistung freischalten).
     
    Lebenskompetenz11 gefällt das.
  3. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    Vielen Dank für deine Antwort @SEpp55 ! Den Tipp mit dem Maintenance Mode habe ich gleich umgesetzt und ihn jetzt mal temporär aufgehoben. Also wenn mir jemand helfen mag - bitte, sehr gern! Hier der Link: https://www.lebenskompetenz-forum.com

    Das mit den MediaQueries habe ich mir schon mal angeschaut, aber es ist leider sehr schwer für mich, das zu durchblicken...
    Auf der Seite eingebaut sind schon diese:

    /**fixed Headerbild NICHT bei mobil und tablet
    **/
    @Media only screen and (max-width: 976px) {

    .wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image {

    background-attachment: scroll;
    }
    }


    /**Headerbild schrumpfen lassen
    **/
    @Media only screen and (max-width: 976px){
    .post-121 .wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image.uagb-section-mobile-optimization {
    margin-top: 40px;
    padding-bottom: 0px;
    }

    .wp-block-uagb-section.uagb-section__wrap.uagb-inner-section-mobile-optimization{
    padding-top:0px;
    padding-left:5px;
    }
    }


    Vielen Dank im Voraus, falls mir wer hilft. :)
     
  4. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Erst eimal für die Headline:

    Nachfolgenden Code im Dashboard unter Design / Customizer / Zusätzliche CSS einfügen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn dir der Textschatten nicht gefällt, einfach die beiden Zeilen nicht mitkopieren ;)


    PS.: Die Classes lassen auf Einstellungen mit dem Plugin Ultimate Addons for Gutenberg schliessen.
    Das von dir verwendete Plugin Gutenberg ist grundsätzlich nicht erforderlich, das ist eigentlich die Entwicklungversion des Blockeditors. Nicht alles was dort enthalten ist, läuft immer stabil und wird irgendwann in den Blockeditor übernommen.
     
    #4 SEpp55, 30. April 2021
    Zuletzt bearbeitet: 30. April 2021
    Lebenskompetenz11 gefällt das.
  5. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Die Schritt für Schritt Anleitung zum o.g. Plugin hast du ja hier - LINK!! ;)

    Schlecht ist, ein Plugin einzusetzen und die einzelnen Handgriffe erklären lassen!
     
  6. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    Dankeschön @SEpp55 ! Leider sehe ich beim CSS-Code nicht, dass sich etwas verändert. Was genau soll er denn bewirken?

    Ich habe das mit den Größen jetzt schon etwas besser hinbekommen. Aber leider die Platzierung der Headline immer noch nicht.
    Es sieht immer nur am Laptop gut aus, am Handy oder Tablet steht die Headline auf den Gesichtern...

    Danke für den Tipp mit Gutenberg! Kann ich das Gutenberg-Plugin also einfach deinstallieren und nur „Ultimate Addons for Gutenberg“ behalten? Ich habe das „Ultimate Addons for Gutenberg“ eigentlich hauptsächlich wegen der Container installiert, weil ich bei meinen Recherchen darauf gestoßen bin, dass man damit wohl Einiges lösen und besser strukturieren kann... Mit den anderen Funktionen habe ich mich noch nicht so beschäftigt, muss ich aber sicher noch tun, das ist mir bewusst.

    Oben links in der Ecke meiner Homepage steht ja „Skip to content“. Weißt du, warum das da steht, und wie ich das verhindern kann?
     
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Da ist offensichtlich mit deiner Änderung der Selektor umbenannt worden und dadurch reagiet die Anweisung nicht mehr!

    Die derzeitige ID mit der Textschattenregel wäre:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ich habe das Plugin (noch) nicht installiert und kann dir auch nicht sagen welch Möglichkeiten da noch vorhanden sind.

    Zum grundsätzlichen Anpassen, wie du schreibst Headline - Das Bild dahinter ist auf verschiedenen Seiten in verschiedener Höhe positioniert.
    Vergleiche Startseite und Teamseite z.B.bei einer Breite von 800px (= Hauptmenü 2-zeilig). Wenn du jetzt den Text über CSS hinbiegst und dann das Bild änderst beginnt das ganze wieder von Vorne!
     
    Lebenskompetenz11 gefällt das.
  8. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    Vielen Dank @SEpp55 ! Ich weiß nur leider nicht, wie ich den CSS-Code genau ändern muss. So?


    @Media (max-width: 767px) {
    #uagb-adv-heading-36ae7fba-5ac7-450a-9ce9-8adcaec794a4 {
    font-size: 28px !important;
    text-shadow: 2px 2px 5px #000, -2px -2px 5px #000;
    }
    #uagb-adv-heading-36ae7fba-5ac7-450a-9ce9-8adcaec794a4 {
    font-size: 18px !important;
    text-shadow: 2px 2px 5px #000, -2px -2px 5px #000;
    }
    }

    Was meinst du damit genau:
    Meinst du, wenn ich das Bild neu/anders hochlade? Oder auch schon, wenn ich die Abstände ändere?

    Ich habe die Verschiebung der Headline jetzt nämlich mittels "Margin"-Abständen grundsätzlich mal so hinbekommen, wie ich es wollte. :)
    Benötige ich deinen CSS-Code jetzt denn dann überhaupt noch, bzw. würdest du mir empfehlen, es dann eh auf allen Seiten über die Abstände zu machen (also über das "Ultimate Adons für Gutenberg"-Plugin), damit sich nichts verschiebt? Was genau bewirkt der Code?

    Danke auch für den Hinweis mit dem Foto bei der Teamseite. Dass ein Kopf oben weg ist, ist natürlich nicht so ideal. ;)
    Ich habe jetzt das selbe Bild eingefügt, wie auf der Titelseite und wollte auch hier über die Abstände die Headline je nach Bildschirmgröße anpassen. Aber leider wird mir hier nicht die Möglichkeit angezeigt, die Abstände je nach Bildschirmgröße unterschiedlich festzulegen!?

    Was ich auch noch nicht geschafft habe:
    - Bei der Tablet-Ansicht ist der türkise/blaue Button jetzt leider über den Subtitle verschoben, da finde ich nicht heraus, über welche Einstellungen/Abstände ich das ändern kann!?
    - "Skip to content“: Das wird mir glaube ich nur beim Internet Explorer angezeigt (zumindest bei Firefox sehe ich es nicht). Weißt du, wie ich das verhindern kann?

    Dankeschön vorab! :)
     
  9. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    Jetzt ist übrigens auf der Teamseite bei der Handyansicht das Bild wieder an den Seiten abgeschnitten und auch viel höher als gewünscht (bei der Tablet-Ansicht auch). - Achja, immer wenn man an der einen Stelle etwas ändern, ändert sich etwas anders auch. :(
     
  10. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    Das habe ich nun doch selber lösen können - mit einem Abstandshalter! :)
     
  11. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Da es ja weitere gute UAG Anleitungen im Paralleluniversum (siehe #5) gibt, klinke ich mich aus.
     
  12. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    @SEpp55 Ja, manchmal ist so ein "Paralleluniversum" nicht schlecht, weil unterschiedliche Leute verschieden helfen können. Geplant war das aber nicht so, ich habe hier im Forum geschrieben, dann geschrieben, weil ich dachte, dass mir hier vielleicht jemand helfen kann, OHNE dass ich die Homepage dafür online stellen muss. Dein Tipp, es nur vorübergehend zu veröffentlichen, war dann aber wirklich gut.

    Ich werde jetzt wohl einfach noch viel weiter daran herumbasteln und hoffen, dass ich die Homepage irgendwie so hinbekomme, wie ich es mir vorstelle. Deinen CSS-Code habe ich jetzt wieder rausgenommen, weil ich ja nicht wirklich weiß, ob er jetzt sinnvoll ist in meinem Fall.

    Vielen lieben Dank für deine Mühe und Hilfe! :)
     
  13. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    .... das wäre dann wen 99% fertig sind ggf noch zu betrachten.
    Vielleicht eines noch, das Hamburgermenü ist schlecht zu sehen, dagegen hilft:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    Lebenskompetenz11 gefällt das.
  14. Lebenskompetenz11

    Registriert seit:
    25. April 2021
    Beiträge:
    8
    Zustimmungen:
    0
    @SEpp55
    Ok, dann meld ich mich dann gffls. wieder, um den Code anzupassen. ;)
    Aber ich füchte, es wird eh noch seine Zeit dauern...

    Ganz lieben Dank auch für den Hinweis mit dem Hamburgermenü und den Code dafür! Hab ihn gleich eingefügt und schaut sehr gut jetzt aus! :)
     
  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.
    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.
    Information ausblenden