nicht angemeldet
Matthias Scharwies
Herzlichen Glückwunsch! Mit WordPress haben Sie das erfolgreichste CMS installiert, dass sich ohne viel Kenntnisse des Anwenders in nur 8 Minuten fast von selbst installiert.
Kann man das auch individuell mit CSS gestalten? - Ja, klar!
Ausgangspunkt war die Frage, ob, man ein „Textelement über Bild positionieren“ könne.[1]
Der schnelle Weg
Um WordPress individuell anzupassen, können sie direkt im Blockeditor ihr HTML mit Klassen versehen und für diese dann CSS-Festlegungen deklarieren.[2]
Design → Anpassen → Zusätzliches CSS:
Der bessere Weg
Es gibt in Wordpress eine Vielzahl von Stylesheets und daneben komplette Themes, die neben Speziellen Seiten-Templates wieder viele Stylesheets mitbringen.
Damit dort vorgenommene Änderungen bei einer automatischen Aktualisierung nicht überschrieben werden, empfiehlt es sich ein eigenes Child Theme zu definieren.
→ WordPress/Child Theme einrichten
Und wie überlagert man nun ein Bild mit einem halbtransparentem Text?
Wenn man Text über das Bild legen will, kann man nicht vom aktuellen Standpunkt am Monitor ausgehen.
Hier muss der Bild-Container mit position: relativezum Bezugspunkt werden, in dem dann Bild und Beschreibungstext absolut positioniert werden.
Dann kann die Bildunterschrift entsprechend oben oder unten „angeklebt werden“:
#gallery figure {
position: relative;
}
figure img {
width: 100%;
display: block;
}
#gallery > figure > figcaption {
position: absolute;
bottom: 0;
}
→ Bilder im Internet/Einbindung mit img
„Das große Foto wird ja von einem halbtransparenten Textfeld überlagert. So ähnlich soll es auch aussehen. Ich habe dazu das Element mit margin -685px versehen. Das ist aber keine ideale Lösung, weil der Effekt auf unterschiedlichen Bildschirmen auch unterschiedlich ist.“
SELF-Forum Textelement über Bild positionieren vom 23.02.2023 ↩︎Hinzufügen von individuellem CSS (wordpress.com) ↩︎