Text über das Bild legen

In GemPages v7 können Sie Text über ein Bild legen, indem Sie ein Heldenbanner Element oder ein Reihe Element.

Methode 1: Verwenden des Hero-Banner-Elements

Das Hero-Banner-Element dient unter anderem dazu, wirkungsvolle Hero-Banner oder Sammlungsbanner zu erstellen, die auf Sammlungsseiten verlinken.

Standardmäßig bietet es Voreinstellungen, mit denen Sie einen Hintergrund festlegen und Text auf dem Hintergrundbild bearbeiten können. Dies macht es zu einer idealen Lösung für Situationen, in denen Text über ein Bild gelegt werden muss.

Schritt 1: Rufen Sie den GemPages-Editor auf

Navigieren Sie vom GemPages Dashboard zum Seiten, und klicken Sie auf die Zielseite, um die Herausgeber.

Suchen Sie in der linken Seitenleiste nach Heldenbanner Element unter dem Medien Abschnitt und ziehen Sie ihn dann per Drag & Drop an eine beliebige Position auf Ihrer Seite.

Schritt 2: Laden Sie Ihr Bild hoch und ändern Sie es

• Klicken Sie auf das Element, um die Einstellungen Scrollen Sie nach unten zum Hintergrund Abschnitt und klicken Sie auf die Bild Feld.

• Unter dem Quelle, bewegen Sie den Mauszeiger über das Beispielbild und klicken Sie auf Bild hochladen um Ihr Bild hochzuladen. Wenn Sie es in Shopify's Files hochgeladen haben, wählen Sie Bibliothek durchsuchen.

• Ändern Sie die Bildeinstellungen nach Ihren Wünschen. Siehe Dieser Artikel Weitere Informationen zum Konfigurieren Ihres Bildhintergrunds im Hero Banner.

Um die Lesbarkeit zu verbessern, können Sie ein Overlay anwenden:

• Klicken Sie im Abschnitt „Hintergrund“ auf Mehr anzeigen !!!, und suchen Sie die Auflage .
• Wählen Sie eine dunkle Farbe (z. B. Schwarz oder Dunkelgrau).
• Passen Sie den Deckkraftregler an, bis sich der Text deutlich vom Hintergrund abhebt.

Dadurch wird eine subtile dunkle Schicht über dem Bild erzeugt, die die Lesbarkeit des Textes verbessert und gleichzeitig den Hintergrund optisch ansprechend hält.

Schritt 3: Den Textblock anpassen

Klicken Sie auf das Textblock-Element, um dessen Konfiguration anzuzeigen. Passen Sie anschließend Schriftart, Größe und Farbe des Textes direkt im Einstellungsfenster an, um sicherzustellen, dass er sich vom Bild abhebt.

Eine vollständige Anleitung zu den Hero-Banner-Einstellungen finden Sie unter Dieser Artikel.

Methode 2: Verwenden des Zeilenelements

Schritt 1:: Ziehen Sie im Editor per Drag & Drop ein Reihe Element aus der linken Seitenleiste auf Ihre Seite.

Um das Zeilenelement besser zu verstehen, schauen Sie sich Dieser Artikel.

Schritt 2:: Scrollen Sie im Einstellungsbereich nach unten zum Hintergrund Abschnitt und klicken Sie auf die Bild Feld.

Schritt 3: Legen Sie ein Bild als Hintergrund für die gesamte Zeile fest. Sie können aus den Shopify-Dateien (Bibliothek durchsuchenoder laden ein neuer.

Passen Sie dann die Treppe und Position, wählen Sie das Bild Wiederholungstyp und Anhaftungund aktivieren/deaktivieren Sie die Vorspannung Funktion zur Optimierung von LCP.

Schritt 3:: Ziehen Sie ein Textblock Element in dieser Zeile, um den Text über Ihrem Bild zu platzieren.

Schritt 4: Ändern Sie den Text nach Ihren Wünschen.

Heldenbanner gegen Reihe

Beide Optionen können Ihre Anforderungen effektiv erfüllen, aber die Verwendung des Hero Banner-Elements ist im Allgemeinen schneller und einfacher. Mit dem Reihe Element bietet mehr Flexibilität für bestimmte Anwendungsfälle.

Praxisbeispiele

• Kontrast beibehalten: Achten Sie immer darauf, dass die Textfarbe einen starken Kontrast zum Hintergrundbild bildet.
• Overlays verwenden: Wenden Sie dunkle Überlagerungen auf hellen Bildern an, um die Lesbarkeit des Textes zu verbessern.
• Mobiler Test: Zeigen Sie eine Vorschau Ihres Designs auf kleineren Bildschirmen an, um sicherzustellen, dass der Text klar bleibt.
• Halten Sie den Text kurz: Begrenzen Sie die Textmenge über Bildern, um die Lesbarkeit zu verbessern.