Support » Allgemeine Fragen » Mehrere Überschriften auf Hintergrundbild unabhängig voneinander platzieren

  • Gelöst lectorros

    (@lectorros)


    Hallo WP-Team,

    ich möchte mehrere Überschriften (bis 3) auf einem Hintergrundbild platzieren (siehe Link). Leider gelingt mir das nur im hohen Minusbereich bei Padding und Margin, sodass ich in der Folge Probleme bei „responsive“ bekomme. Auf dem Bild ist nur eine Spalte darstellbar oder man benutzt einen inneren Abschnitt. Beide Möglichkeiten lassen aber aus meiner bisherigen Erfahrung nicht erkennen, wie es am Schluss auch „responsive“ vernünftig aussehen soll! Das Bild dahinter sollte nämlich auch möglichst voll zu sehen sein. Untereinander ist wesentlich einfacher, wie auf den andern Seiten zu sehen ist, aber nebeneinander ist für mich ein echtes Problem.
    Gibt es da event. noch eine andere Möglichkeit oder mache ich einfach etwas falsch?
    In welchem Bereich sollte ich am besten die Einstellungen vornehmen?
    Ich benutze Ocean WP.
    Gruß Marko

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Probier man den Schriftgrößen nicht mit solch hohen px Werten, sondern zb 2em.
    Das wäre das einfachste. Danach gibt es für die Platzierung, Abstand, Zeilen, … noch 999 Möglichkeiten, die aber allesamt etwas mehr CSS fordern.

    Thread-Starter lectorros

    (@lectorros)

    Dann werd‘ ich wohl noch CSS lernen müssen. Dabei könnte es so einfach sein, ein Textfenster zu positionieren! … spricht der Laie.

    CSS ist nicht so schwer, schwieriger ist vllt., dies in WP einzubauen. Dazu gibt es ein paar kleine Tricks. Man muss wegen ein paar Styles nicht programmieren lernen, auch nicht die Dateien bearbeiten oder so.

    Doch wenn man weder das Theme hat noch diesen Elementor kennt, kann man schwerer helfen. Nicht jeder Helfer hat diese Sachen und schon gar nicht in Pro Versionen gekauft.
    Vor allem Elementor ist nicht meins.

    Daher schau mal selber nach, wo die Einstellungen für den Header, die Typo, die Überschriften , … sind und versuche es mal so.
    Sollte das so nicht klappen, dann sollte es im Theme einen Abschnitt geben, wo man eigenes CSS eintippen kann und sofort die Wirkung des Codes sieht.
    Dann wäre da noch …

    Ja, alles (vllt. außer Elementor) kann auch einfach sein.
    Aber viele WP Themes sind für viele Anwendungsfälle gerüstet, die Mods hier haben da einen eigenen Fachausdruck für, der mir grade nicht einfällt.
    Doch da die Themes für alles möglich herhalten müssen, sind die auch mit relativ vielen Bereichen und Optionen gesegnet – da muss man erst mal durch.

    Schlusstipp: CSS lernen geht einfach bei https://wiki.selfhtml.org/wiki/CSS hier vllt. konkret zu Schrift: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie/Schriftformatierung#font-size

    Thread-Starter lectorros

    (@lectorros)

    Danke, kurapika! Ein Grundkurs CSS kann sicher nicht schaden. Mal sehen, ob das Einfügen über den Customizer dann klappt.
    Gruß Marko

    Ja, fang mal klein an, per Customizer > Zusätzliches CSS.
    Und da mal eben nur mit anderen Maßeinheiten bei der Schriftgröße experimentieren.

    Evtl. bringt schon
    .elementor-heading-title .elementor-size-medium {font-size: 2em;} was?

    Thread-Starter lectorros

    (@lectorros)

    Ja, ok! Danke!

    Hallo,
    wenn das nicht über Elementor (ich verwende Elementor ebenfalls nicht) zu realisieren ist (was ich mir eigentlich nicht vorstellen kann), dann schaue dir mal die CSS-Funktion clamp an. Dabei wird die Schriftgröße innerhalb eines definierten Bereichs dem viewport (Größe des Fensters beim Gerät) angepasst.

    Das sollte mit der folgenden CSS-Regel unter Design > Customizer > Individuelles CSS geändert werden können:

    h2.elementor-heading-title.elementor-size-medium {
        font-size: clamp(3rem, 3.5vw, 8rem)!important;
    } 

    An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
    Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

    Viele Grüße
    Hans-Gerd

    Thread-Starter lectorros

    (@lectorros)

    Danke, Hans-Gerd! Das CSS werde ich ausprobieren, zuvor muss ich aber noch rauskriegen, was die Bezeichnungen rem, vw usw. überhaupt bedeuten und bewirken. Da habe ich einiges vor mir.
    Auf CSS war ich übrigens mit der Fragestellung im Traum nicht aus.

    Nachtrag: Das CSS hat den Nachteil, dass so nicht beachtet wird, dass der Titel größer wie der Untertitel sein soll. Der Untertitel ist jetzt sogar größer!

    Gruß Marko

    • Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von lectorros.
    • Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von lectorros.

    Hallo,

    Nachtrag: Das CSS hat den Nachteil, dass so nicht beachtet wird, dass der Titel größer wie der Untertitel sein soll. Der Untertitel ist jetzt sogar größer!

    Auch das kann man dann mit Hilfe von einer entsprechenden CSS-Regel und clamp lösen, z. B. so:

    h2.elementor-heading-title.elementor-size-default {
        font-size: clamp(2rem,3.5vw,6rem)!important;
    }

    Das ist aber jetzt schon fast off topic und nicht mehr Thema hier im Forum. Deswegen ist das auch sicher noch keine ausgefeilte Lösung, sondern soll nur ein Denkanstoß sein. Abgesehen davon stört mich immer der Zusatz !important, weil damit eine Änderung mit der Brechstange erreicht wird. Viel besser ist die Definition einer eigenen Klasse für diese spezifischen Überschriften (H2).

    Viele Grüße
    Hans-Gerd

    Thread-Starter lectorros

    (@lectorros)

    Ja, alles klar!

    Gruß Marko

    Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Das Thema „Mehrere Überschriften auf Hintergrundbild unabhängig voneinander platzieren“ ist für neue Antworten geschlossen.