Support » Allgemeine Fragen » Wie platziere ich die headline responsive/ „mobil friendly“?

  • Gelöst lebenskompetenz11

    (@lebenskompetenz11)


    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 (Pro)

    1. Problem:
    Nach einigem Hin und Her sowie Hilfe vom Astra-Support habe ich es immer noch nur teilweise hinbekommen, dass sich das Headerbild auf meiner Startseite responsive verkleinert. Noch immer wird es auf Smartphone-Größe einfach an den Seiten beschnitten, anstatt zu „schrumpfen“. Der eingebaute CSS-Code lautet:

    @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;
    }
    }

    Kann mir jemand sagen, ob/wie ich den Code so umbauen kann, dass auch auf dem Smartphone, also bei kleiner Bildschirmgröße, das Bild vollständig zu sehen ist?

    2. Problem:
    Die Anordnung der Headline (auf dem Headerbild). 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 und könnte mir bitte helfen? Leider schreibt mir der Astra-Support, sie würden in solchen Fällen nicht beraten…

    Einen Link zur Homepage kann ich leider nicht schicken, da sie noch nicht online ist. Ich könnte höchstens jemandem einen Zugriff als Betrachter geben, wenn sich das jemand genauer anschauen mag. Aber vielleicht kann mir ja jemand auch so schon helfen, das wäre natürlich am besten.

    Vielen Dank vorab!
    LG, Nin

    PS: Ich kenne mich übrigens NICHT mit CSS aus, habe die Codes nur vom Support bekommen. Außerdem zur Info, falls das relevant ist: Ich habe zusätzlich noch folgenden CSS-Code eingebaut, der meines Wissens nach dafür sorgt, dass das Headerbild auf mobiler und Tablet-Ansicht nicht fixiert ist:

    @media only screen and (max-width: 976px) {
    
    .wp-block-uagb-section.uagb-section__wrap.uagb-section__background-image {
    
    background-attachment: scroll;
    }
    }
Ansicht von 11 Antworten - 16 bis 26 (von insgesamt 26)
  • Da sind wir wieder bei dem Punkt:

    Und so wie es aussieht, scheinen das ja auch keine WordPress-, sondern CSS-Probleme zu sein, und dafür ist dieses Forum eigentlich nicht gedacht.

    Stimmt das, oder habe ich etwas übersehen?

    Nein, stimmt nicht. Mit CSS Media Queries kann man auch je nach Auflösung solche Dinge regeln.

    Gibt es da eine Möglichkeit?

    Ja, auch mit CSS.

    Ich finde aber keine Einstellungsmöglichkeit, um den Abstand dieses Buttons zu ändern

    Auch das geht mit CSS

    Thread-Ersteller lebenskompetenz11

    (@lebenskompetenz11)

    @bscu Wenn möglich, würde ich es ohnehin gern ohne CSS lösen…

    Das ist aber ohne CSS nicht möglich.

    Thread-Ersteller lebenskompetenz11

    (@lebenskompetenz11)

    Und jetzt ist durch die Verschiedung das Problem aufgetreten, dass der türkise Button bei Tablet-Ansicht zu nah am Subtitle ist. Ich finde aber keine Einstellungsmöglichkeit, um den Abstand dieses Buttons zu ändern und auch über die Einstellungen des Subtitles kann ich es nicht lösen…

    Das habe ich nun doch selber lösen können – mit einem Abstandshalter!

    Was ist ein Abstandshalter?

    Moderator Bego Mario Garde

    (@pixolin)

    @bscu Es gibt im Block-Editor einen Block „Abstandshalter“, der einen leeren Abschnitt mit Margin entsprechend den gewählten Block-Einstellungen einfügt.

    Thread-Ersteller lebenskompetenz11

    (@lebenskompetenz11)

    Ein Block vom Plugin „Ultimate Adons for Gutenberg“. Oder vom normalen Gutenberg!?…

    Moderator Bego Mario Garde

    (@pixolin)

    @lebenskompetenz11 Wenn du mit UAG arbeitest, kannst du für den Block Abschnitt die Innen- und Außenabstände individuell einstellen und brauchst keinen zusätzlichen Abstandshalter. Der Block Abstandshalter des WordPress-Core ist ein Hilfsmittel, wenn du Blöcke verwendest, die nicht so detaillierte Einstellungsmöglichkeiten bieten.

    Viele Einstellungsoptionen zu haben, kann Fluch oder Segen sein. Was dem einen viel zu kompliziert ist, gibt der anderen gerade so viel Optionen wie nötig.

    Meine Antwort bezog sich aber auf die Frage von @bscu, der (soviel ich weiß und so, wie ich ihn einschätze) schneller mal zu eigenen CSS-Regeln greift … weil er’s kann. Wer mit wenigen Zeilen Code Abstände selber definiert, braucht nicht nach Einstellungsmöglichkeiten suchen.

    Thread-Ersteller lebenskompetenz11

    (@lebenskompetenz11)

    @pixolin Ja, das habe ich mir gedacht, dass das an bscu gerichtet war, ich wollte ihm/ihr(?) auch antworten, aber du warst schneller und hast es natürlich besser erklärt. 🙂

    Ich habe nun den „Abstandshalter“ weggenommen und stattdessen einen „Abschnitt“ hinzugefügt und den Button (Block „Mehrfach-Buttons“ und darin Block „Button“) dort hineingezogen. Aber nun ist er auf der Laptop-Ansicht nach rechts eingerückt, obwohl ich bei Innenabstand links und rechts auf „0“ gegangen bin. Ein Außenabstand wird mir nicht angezeigt. Nur „Margin“, aber da verändert sich nichts in der Hinsicht…

    Was für einen Vorteil hat denn ein Abschnitt, im Vergleich zu einem Abstandshalter?

    Und, hast du eine Idee, warum bei Ansicht auf Kindle (Startseite) oben die Haare von der Person links angeschnitten, aber bei der IPad-Ansicht nicht? Und vor allem: an welcher „Stellschraube“ muss ich drehen, damit ich das beheben kann?
    Ich sehe, dass die Menüleiste anders aussieht, vermutlich liegt es daran. Aber warum ist das so? Das zweizeilige Menü sieht natürlich nicht sehr schön aus…

    Ganz lieben Dank für deine Mühe und einen schönen Abend noch!

    Moderator Bego Mario Garde

    (@pixolin)

    Wenn du den im Block-Editor enthaltenen Cover-Block verwendest, kannst du ein Hintergrundbild verwenden, das als Parallax-Hintergrund angezeigt wird (Text gleitet beim Scrollen über feststehendes Bild) oder mit dem Text mitscrollt. Du kannst dann im Cover-Block eine Überschrift, Text und Buttons einfügen und farblich anpassen. Viel mehr Möglichkeiten hast du nicht (was durchaus auch seinen Charme haben kann, weil es deutlich schneller geht, als dutzende Einstellungen durchzugehen). Möchtest du zum Beispiel nach einem Cover-Block einen größeren Abstand haben, verwendest du dafür den genannten Abstandshalter-Block.

    Wenn du as Plugin Ultimate AddOn for Gutenberg installierst, bekommst du Blöcke mit deutlich mehr Einstellungsmöglichkeiten. So kannst du zum Beispiel den Abstand nach einem „Abschnitt“ in den Block-Einstellungen festlegen und brauchst nicht einen weiteren Block als Krücke. Du kannst hier auch angeben, wie der Abstand innerhalb des Abschnitts sein soll und hast dann für die Blöcke, die du im Abschnitt platzierst wieder dutzende Einstellungsoptionen.

    Webdesign ist kein Printdesign. Im Printdesign habe ich ein Blatt Papier mit festen Abmessungen, die sich nie ändern. Hier kann ich Millimetergenau festlegen, wo Bilder stehen sollen, wie Text umbricht usw. Beim Webdesign musst du von zig verschiedenen Bildschirmgrößen ausgehen, weil sich Benutzer:innen Webseiten auf dem Smartphone, dem Kindle, dem Tablet oder dem 27″-Desktop-Monitor (und dort auch noch die Fenstergröße des Browsers nach Belieben ändern). Der Anspruch, dass ein Bild an einer bestimmten Stelle stehen soll, pixelgenau in allen verschiedenen Browsern bitte, ist sehr schwer umzusetzen und ich denke auch, dass es nicht das Ziel der Gutenberg-Entwickler war, mit dem Cover-Block so etwas umzusetzen.
    Wir haben hier öfters Rückfragen von Teilnehmenden, die ein Foto im Bildbearbeitungsprogramm mit einem Schriftzug oder einen Bild-Wort-Marke versehen haben und nun erwarten, dass dieses Bild auf allen Endgeräten ohne Verzerrung so dargestellt wird, wie sie sich das bei der Arbeit im Bildbearbeitungsprogramm vorgestellt haben. Das Problem ist, dass sich durch eine proportionale Darstellung beim Verkleinern der Bildschirmbreite auch die Bildhöhe ändert, worauf dann wieder die in einem Cover-Block darüber platzierte Schrift und Buttons nicht so passen. All das versucht das Plugin Ultimate AddOns in den Griff zu bekommen, indem es dir dir Einbindung des Hintergrundbildes mit verschiedenen Methoden ermöglicht und für jedes Designelement Einstellungsmöglichkeiten für Desktop, Tablet und Mobile anbietet.

    Leider fehlt mir die Zeit, um mit dir jede Einstellung im Einzelnen durchzugehen. Aber das wäre auch nicht das Ziel unseres Supportforums.

    Schau dir übrigens mal dieses Video-Tutorial zu GeneratePress an, in dem es darum geht, einen „Page Hero“ anzulegen – ich denke, da dürften für dich interessante Ideen dabei sein.

    Thread-Ersteller lebenskompetenz11

    (@lebenskompetenz11)

    @pixolin Vielen Dank für die ausführlichen Erklärungen bzw. die Unterscheidung zwischen Cover-Block und UAG und den Hinweis bezüglich Print vs. Webdesign. – Das macht es mir klarer.
    Auch das Video ist nicht schlecht und ich werde mich auch nochmal näher mit GeneratePress befassen, das ist sicher praktisch.

    Das mit dem Button, der nach rechts verrückt war, habe ich im dazugehörigen „Abschnitt“-Block über „Width“ ändern können.

    Ich bin mir zwar noch nicht im Klaren darüber, welche Blöcke ich nun für was verwenden soll, weil da ja anscheinend viele Wege nach Rom führen, aber ich probiere dann wohl weiter herum…

    Vielen lieben Dank für deine Hilfe und deine Zeit!

Ansicht von 11 Antworten - 16 bis 26 (von insgesamt 26)