2023: Elemente vor Hintergrundbild immer vertikal mittig?

Hallo,
entscheidend ist dabei der Abstandhalter unter dem Navigations-Block im Cover-Block.

nachfolgend ein kleines Video zur Veranschaulichung (bei Klick auf das Video, wird das Video vergrößert dargestellt):

Viele Grüße
Hans-Gerd

Danke für die aufürhliche Antwort mit dem GIF.

Damit kann ich schon mal mein Menü nach oben schieben. Nur ist mir noch nicht ganz klar, wie ich die Höhe korrekt setze. Das Hintergrundbild ist auf bildschirmfüllend eingestellt. So sollen auch die Elemente davor sein, da unter dem Menü bereits die zweite Seite als onepager beginnt wie bei deiner anderen (übrigens sehr guten) Anleitung geschrieben: Als Unterschied hab ich den Anker auf die gesamte Gruppe/Seite statt auf einen Abstandshalter gesetzt (werde mal probieren, ob das genauso gut geht).

Also Wenn ich den Abstandshalter z.B. auf 70% Höhe setzen möchte, müsste ich die Gruppe, in der die Navigation sitzt, auf 30% Höhe setzen. Nur kann ich weder bei der Gruppe, noch bei der Zeile innerhalb der Gruppe die Einstellung „Höhe“ und „%“ finden. Auch beim Abstandshalter lässt sich „%“ nicht auswählen. Gibt es da eine Möglichkeit?

• Diese Antwort wurde geändert vor 12 Stunden, 7 Minuten von wpzugang.
• Diese Antwort wurde geändert vor 12 Stunden, 4 Minuten von wpzugang.

Hallo,

Als Unterschied hab ich den Anker auf die gesamte Gruppe/Seite statt auf einen Abstandshalter gesetzt (werde mal probieren, ob das genauso gut geht).

Warum wolltest du das so setzen?
Ohne Link zur Website von dir, wo man sich das ansehen kann, wird das vermutlich kaum nachvollziehbar sein, was du vorhast. 🤷‍♂️

Freut mich übrigens, dass mein Beitrag, den du oben verlinkt hast, hilfreich für dich ist. 😉

Viele Grüße
Hans-Gerd

Warum wolltest du das so setzen?

Weil ich dachte, dass ich mir so den Abstandshalter spare, da jede Seite ja bei mir eh in eine Gruppe soll. Aber das kann ich dann ja testen und wenn es nicht wie gewünscht funktioniert, habe ich ja noch deine Anleitung mit dem Abstandshalter als Anker.

Habe herausgefunden, woran es lag. Sowohl das Plugin „Background AWB“ als auch der Cover-Block habe eine Einstellung für die Position des Inhalts. So geht es auch ohne Abstandshalter:
https://www.aeropano.net/wordpress-img/background_vertical_top.JPG
https://www.aeropano.net/wordpress-img/cover_top.JPG

Trotzdem hätte ich für die Abstandshalter gerne noch eine Prozentangabe zur Auswahl.
https://www.aeropano.net/wordpress-img/hight_spacer.JPG

Die Seite ist noch nicht online aber ich denke, die Screenshots reichen.

• Diese Antwort wurde geändert vor 10 Stunden, 15 Minuten von wpzugang.

Hallo,
wenn du den Navigations-Block oben im Cover-Block positionieren willst, dann wirst du das m. E. nicht ohne einen Abstandhalter hinbekommen.
Dafür würde ich persönlich auch kein zusätzliches Plugin verwenden.

Mir ist allerdings immer noch nicht klar, warum du unbedingt darauf bestehst, die Höhe des Abstandhalters über eine Prozentangabe anzugeben.

Laut theme.json sind zwar die units px, em, rem, %, vw, und vh möglich, aber ich vermute, dass das bei dem Abstandhalter nicht unterstützt wird, siehe hier (ab Zeile 99 in der theme.json):

			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]

Aber wie gesagt, welchen Vorteil du bei Verwendung von % siehst, ist mir unklar. Siehe auch z. B. hier.

Viele Grüße
Hans-Gerd

Wenn es über vh oder vw geht, muss es natürlich nicht % sein. Mit meinem begrenzten HTML und CSS-Wissen schien mir % am logischsten. Soll halt nur so bildschirmfüllend wie der Hintergrund sein und oben und unten bündig abschließen. Weiß nicht, welche Einheit der Hintergrund-Block für die bildschirmfüllende Anordnung verwendet.

wenn du den Navigations-Block oben im Cover-Block positionieren willst, dann wirst du das m. E. nicht ohne einen Abstandhalter hinbekommen.

So wie bei meinem Screenshot geht es doch aber nun. Habe hier keinen Abstandshalter mehr drin:
https://www.aeropano.net/wordpress-img/background_vertical_top.JPG
https://www.aeropano.net/wordpress-img/cover_top.JPG

Das Plugin „Background AWB“ habe ich nur wegen der Möglichkeit genommen, im Hintergrund Videos abspielen zu können. Sowohl selbst-gehostete als auch Links aus Vimeo oder Youtube. Wenn es dazu eine pluginfreie-Alternative gibt, bin ich natürlich auch dafür offen.

Hallo,

So wie bei meinem Screenshot geht es doch aber nun. Habe hier keinen Abstandshalter mehr drin

stimmt, aber mir persönlich gefällt die Lösung über den Abstandshalter besser – ist aber Geschmacksache.

Dann ist doch offenbar das grundsätzliche Problem gelöst. Bezüglich Einbindung von Videos über das genannte Plugin werden wir dir hier mangels URL wohl nicht helfen können. Dazu kannst du ja gerne einen neuen Thread eröffnen, wenn die Website online ist, damit eine bessere Vorstellung davon hat, was du vorhast.

Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:

Die Option findest du rechts in der Sidebar. Danke.

Viele Grüße
Hans-Gerd

Jap grundsätzlich ist das Problem gelöst 🙂

Mich würde aber trotzdem noch interessieren, wie du die Höhe der Navigationsbar und des Abstandshalters einstellst, damit beides in der Höhe immer korrekt bildschirmfüllend dargestellt wird. In deinem Gif hattest du ja nur eine Pixelhöhe angegeben, die nicht responsive ist.

Also Hintergrundbild – Höhe bildschirmfüllend
davor:
-Navigationsbar mit Höhe ???
-Abstandshalter mit Höhe ???

Edit (oh kann gar nicht mehr editieren) Problem ist doch noch nicht gelöst. Die Navigation ist immer noch nicht ganz oben.

Habe ich einen großen weißen Bereich zu Beginn der Seite. Habe im Firefox mal geschaut, welche Regel das macht und es ist folgender Befehl gesetzt
--wp--style--root--padding-top: var(--wp--preset--spacing--40);
Sobald ich den im Firefox Inspektor deaktivere, verschwindet der weiße Bereich oben in der Kopfzeile. Nur wie kriege ich das in WordPress in CSS weg?
https://www.aeropano.net/wordpress-img/padding-top.JPG

Noch ein kleiner Zusatz zu deiner Anleitung, falls irgendjemand das selbe Problem hat, denn mich hat es jetzt einige Zeit gekostet, das herauszufinden.
https://haurand.com/navigation-mit-zeile-am-oberen-rand-in-wordpress-full-site-editing/
Volle Fensterbreite mittels Gruppenblock funktioniert nur, wenn Inhaltsbreite aktiviert und Außenabstand 0 eingestellt wird:
https://www.aeropano.net/wordpress-img/Gruppenblock_volle_Breite.jpg

Hallo,

Mich würde aber trotzdem noch interessieren, wie du die Höhe der Navigationsbar und des Abstandshalters einstellst,

Die Höhe des Abstandshalters habe ich auf 600px eingestellt. Das ist durchaus responsive. Testweise habe ich das gerade auch mal auf 42rem eingestellt. Auch da kein Problem.

Den Zeilen-Block mit der Navigation habe ich lediglich mit einem Innenabstand von 1 Einheit eingestellt.

Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

Ich muss allerdings dazu erwähnen, dass ich in dem Fall Gutenberg Version 14.9 aktiviert habe. Das Plugin Gutenberg enthält bereits einige Features von WordPress 6.2 und sollte auf Produktivseiten nicht aktiviert werden.

Aufgrund deiner Frage habe ich einen Beitrag erstellt, den ich voraussichtlich heute veröffentliche.

Danke für den Hinweis bezüglich des verlinkten Beitrags.

Viele Grüße
Hans-Gerd