Mit dem Hero-Banner-Element eine Überlagerung zu einem Bild hinzufügen

Informationen zum Überlagerungseffekt bei Bildern

Der Überlagerungseffekt fügt eine halbtransparente Ebene über ein Bild. Er ist besonders nützlich, um den Kontrast zwischen dem Hintergrundbild und darüber platziertem Text oder Elementen zu verbessern. 

In GemPages können Sie Ihrem Bild eine Überlagerung hinzufügen, um ein elegantes und professionelles Design zu erzielen, das die Aufmerksamkeit auf die wichtigsten Inhalte Ihrer Seite lenkt.

Mit dem Hero-Banner-Element eine Überlagerung zu einem Bild hinzufügen

Um Ihrem Bild eine Überlagerung hinzuzufügen, verwenden Sie Heldenbanner -Element in GemPages, befolgen Sie diese Schritte:

Schritt 1: Fügen Sie Ihrer Seite ein Hero-Banner hinzu

• Besuchen Sie das GemPages Dashboard > Seiten, suchen Sie Ihre Zielseite, um den Editor zu öffnen.
• Geben Sie in der linken Seitenleiste Folgendes ein: Heldenbanner in der Suchleiste. Ziehen Sie dann ein Hero-Banner-Element per Drag & Drop an die gewünschte Position.

Schritt 2: Fügen Sie dem Hero-Banner ein Bild hinzu

• Klicken Sie auf das Element, um seine Einstellungen zu öffnen. 
• Suchen Sie in der linken Seitenleiste nach Hintergrund Abschnitt unter dem Einstellungen und klicken Sie auf das Kästchen neben dem Bild .

• Von hier aus können Sie ein Bild aus Ihrer Galerie auswählen oder ein neues hochladen, um es als Hintergrund für das Element zu verwenden. 
• Passen Sie den Maßstab, die Position, die Wiederholung und den Anhang des Bildes an. Außerdem können Sie Folgendes festlegen: Vorspannung zu Ja zur Optimierung von LCP.

Schritt 3: Aktivieren Sie das Overlay für das Bild

Wenn Sie die Konfiguration Ihres Bildes abgeschlossen haben, klicken Sie auf Mehr anzeigen !!! um alle anzuzeigen Hintergrund zu üben.

Klicken Sie auf das Kästchen neben dem Auflage Option zum Öffnen des Einstellungsfensters.

Von hier aus können Sie die Überlagerungsfarbe auswählen und die Deckkraft anpassen.

• Farbe: Wählen Sie eine Volltonfarbe für Ihr Bild. Sie können einen Hex-Farbcode (z. B. #121212) eingeben oder die Farbauswahl verwenden, um visuell einen Farbcode auszuwählen.

• Opazität: Passen Sie den Deckkraftregler an oder geben Sie eine genaue Zahl ein, um zu steuern, wie sichtbar die Überlagerung ist. 0 bedeutet, dass die Überlagerung vollständig transparent (unsichtbar) ist, während 100 bedeutet, dass es das Hintergrundbild vollständig abdeckt.

Zum Beispiel, Opazität = 20 wendet eine subtile, halbtransparente Überlagerung an.

Häufig gestellte Fragen

1. Warum sollte ich ein Overlay auf meinem Hintergrundbild verwenden?

Overlays verbessern die Lesbarkeit des Textes, indem sie den Kontrast zwischen Hintergrundbild und Text erhöhen. Außerdem sorgen sie für einen professionelleren und einheitlicheren visuellen Stil, insbesondere bei Hero-Bannern oder Werbeabschnitten.

2. Welche Overlay-Farbe eignet sich am besten?

Dies hängt von Ihrem Hintergrundbild und der Textfarbe ab:

• Verwenden Sie dunkle Overlays (z. B. #000000 or #121212), wenn Ihr Text hell ist (weiß, cremefarben usw.).
• Verwenden Sie leichte Overlays (z. B. #FFFFFF mit geringer Deckkraft), wenn Ihr Text dunkel ist.

3. Welche Deckkraftstufe sollte ich für beste Ergebnisse einstellen?

Wir empfehlen:

• 15–30 % Deckkraft für einen subtilen Effekt
• 30–50 % Deckkraft, wenn das Hintergrundbild unruhig oder bunt ist

Passen Sie den Schieberegler während der Vorschau an, um zu sehen, was für Ihren Inhalt am besten funktioniert.

4. Kann ich Farbverlaufsüberlagerungen verwenden?

Derzeit unterstützt GemPages V7 nur eine Volltonfarben-Overlay auf Bildhintergründen. Um Farbverlaufseffekte zu erzielen, sollten Sie Ihr Bild vor dem Hochladen in einem Designtool (z. B. Figma, Canva) bearbeiten.

5. Warum wird das Overlay nicht auf meinem Heldenbanner angezeigt?

Wenn der Überlagerungseffekt auf Ihrem Bild nicht angezeigt wird, überprüfen Sie Folgendes:

• Stellen Sie sicher, dass ein Bild hinzugefügt wurde unter Hintergrund > Bild.
• Stellen Sie sicher, dass die Overlay-Farbe und die Deckkraft nicht auf vollständig transparent eingestellt sind (z. B.#000000 mit 0 Deckkraft).

6. Gilt die Überlagerung für Videohintergründe?

Ja. In GemPages v7 funktioniert der Overlay-Effekt sowohl für Bild- als auch für Videohintergründe im Hero-Banner-Element.

Die Einstellungen sind die gleichen:

• Sie können eine Überlagerungsfarbe auswählen.
• Passen Sie die Deckkraft an, um zu steuern, wie viel vom Video durchscheint.