Bildelement

Informationen zum Bildelement

Die Bild Mit dem Element in GemPages können Sie einzelne Bilder auf Ihrer Seite anzeigen, was ideal für die Präsentation von Produkten, Bannern, Markenbildern, Werbeaktionen oder Vertrauensabzeichen ist.

Egal, ob Sie ein Produkthighlight hervorheben, die Ästhetik Ihrer Marke veranschaulichen oder eine visuelle Trennung zwischen Abschnitten erstellen möchten, mit dem Bildelement haben Sie die volle Kontrolle darüber, wie Bilder auf verschiedenen Geräten angezeigt werden.

Sie können ganz einfach neue Bilder hochladen, vorhandene aus Ihren Shopify-Dateien wiederverwenden und Größe, Position, Ränder und Animationen ohne Codierung anpassen.

Wie fügen Sie Ihrer Seite ein Bildelement hinzu?

Schritt 1: Einloggen, um Shopify-Administrator > GemPages Dashboard > Seiten.

Schritt 2: Hier können Sie alle Ihre mit GemPages erstellten Seiten sehen. Klicken Sie auf die Zielseite um den Editor zu öffnen.

Wenn Sie lieber eine neue Seite erstellen möchten, klicken Sie auf Neue Seite erstellen um mit dem Erstellen Ihrer Seite von Grund auf zu beginnen oder aus vorgefertigten Vorlagen auszuwählen.

Schritt 3: Geben Sie in der linken Seitenleiste Folgendes ein: Bild in die Suchleiste ein und ziehen Sie das Bildelement dann per Drag & Drop an die gewünschte Position.

Konfigurieren der Registerkarte „Einstellungen“

Das Bildelement bietet flexible Bildeinstellungen So können Sie Größe, Form und Reaktionsfähigkeit mühelos steuern.

Design

Wählen Sie, wie Ihr Bild visuell gestaltet werden soll:

• Rechteck: Standardmäßige rechteckige Form
• Kreis: Schneidet das Bild automatisch in einen perfekten Kreis zu

Quelle

Laden Sie die Bilddatei hoch oder wählen Sie sie aus. Sie haben folgende Möglichkeiten:

• Klicken Sie auf Bild hochladen, fügen Sie die Bild-URL ein oder klicken Sie auf Galerie durchsuchen um aus Ihren Medien auszuwählen.
• Nach dem Hochladen wird die Bild-URL unten zur Referenz oder Bearbeitung angezeigt

Größe

Steuern Sie die Anzeige des Bildes hinsichtlich Layout und Reaktionsfähigkeit:

Rahmen: Wählen Sie ein vordefiniertes Seitenverhältnis oder verwenden Sie ein benutzerdefiniertes:

• Quadratisch
• Vertikale
• Horizontale
• Original (behält die nativen Abmessungen des Bildes bei)
• Maßgeschneidert (Breite und Höhe manuell einstellen)

Breite Höhe:

• in Pixel (px) oder Prozentsatz (%)
• Toggle die Schloss-Symbol das Seitenverhältnis beizubehalten oder zu brechen

Shape

Gestalten Sie den Bildcontainer mit visuellen Verbesserungen, damit er besser zu Ihrem Design passt:

Grenze: Fügen Sie einen Rahmen um das Bild hinzu. Anpassen:

• Farbe,: Wählen Sie eine beliebige HEX-Farbe
• Materialstärke: Pixelwert festlegen
• Strichstil: Durchgezogen, gestrichelt oder gepunktet

CORNER: Runden Sie die Bildecken ab, indem Sie den Randradius anpassen. Sie haben folgende Möglichkeiten:

• Wenden Sie den gleichen Radius auf alle Ecken an
• Schalten Sie die Werte frei, um jede Ecke individuell zu gestalten

Shadow: Fügen Sie einen Schatteneffekt hinzu, um Tiefe zu erzeugen oder sich vom Hintergrund abzuheben. Konfigurieren Sie:

• Typ: Außen, innen oder zentriert
• Anleitung : Steuern Sie den Schattenwinkel
• Farbe,
• Entfernung, Blurund Größe

verbindung

Machen Sie das Bild anklickbar, indem Sie es auf EIN stellen. Wählen Sie dann die Aktion aus, die Sie nach dem Anklicken des Bildes hinzufügen möchten, darunter:

SEO

Verbessern Sie die Bildzugänglichkeit und die Suchmaschinenleistung:

• Alternativtext: Beschreiben Sie das Bild (wird von Bildschirmleseprogrammen und Suchmaschinen verwendet)
• Bildtitel: Optionaler Titel, der als Tooltip-Text angezeigt werden kann

LCP optimieren

Hilft beim Optimieren des Ladens für bessere Leistungswerte:

Qualität: Komprimierungsstufe auswählen:

• Feinste (höchste Qualität)
• Hoch (Standard, ausgeglichen)
• Medium (für leistungsintensive Seiten)
• Maßgeschneidert (erweiterte Komprimierungseinstellungen)

Vorspannung: Aktivieren, wenn das Bild über dem Falz liegt und zum Largest Contentful Paint (LCP) beiträgt

Ausrichten

Richten Sie das Bild innerhalb seines Containers aus: Links, Mitte oder Rechts.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zu Erweitert und folgen Sie den Anweisungen in Dieser Artikel.

Fehlerbehebung: Bild wird auf der Seite nicht angezeigt

Falls Ihr hochgeladenes Bild weder im Editor noch auf der Live-Seite angezeigt wird, versuchen Sie Folgendes:

Häufige Ursachen und Lösungen

Best Practices für Bildelemente

Text über ein Bild legen

Wenn Sie ein Banner mit Textüberlagerung auf einem Bild erstellen möchten, haben wir ein Video-Tutorial für Sie. Sehen Sie sich das Video unten an, um eine Schritt-für-Schritt-Anleitung zu erhalten.

Machen Sie Ihr Bild klickbar

Durch das Anklicken oder Interaktive von Bildern wird das Nutzererlebnis und die Interaktion gesteigert.

Mehr erfahren: Machen Sie einen Text oder ein Bild anklickbar

FAQs zu Image Element

1. Wie kann ich die automatische Skalierung meines Bildes verhindern?

Wenn Sie kein Bild skalieren möchten, gehen Sie zu Größe Abschnitt in den Bildeinstellungen. Legen Sie die Breite und Höhe in Pixeln (px) statt in Prozent (%) fest. Dadurch wird das Bild auf allen Geräten auf eine feste Größe festgelegt.

2. Wo finde ich die Bildeinstellungen in GemPages?

Klicken Sie einfach auf das Bild im Editor und die Registerkarte Einstellungen wird in der linken Seitenleiste angezeigt. Von dort aus können Sie alle Bildeinstellungen anpassen, einschließlich Größe, Rahmen, Rand, Schatten und Linkoptionen.

3. Kann ich ein Bild anklickbar machen?

Ja. Scrollen Sie auf der Registerkarte Einstellungen nach unten zum verbindung Abschnitt und schalten Sie es ein. Sie können das Bild mit einer Seite, einer externen URL, einem Abschnittsanker, einem Popup, einer E-Mail oder sogar einer Telefonnummer verknüpfen.

4. Wie füge ich einem Bild Alternativtext für SEO hinzu?

Im SEO Geben Sie im Abschnitt „Bildeinstellungen“ einen beschreibenden Alternativtext ein. Dies verbessert die Zugänglichkeit für Bildschirmleseprogramme und hilft Suchmaschinen, Ihr Bild zu verstehen.

5. Warum sieht mein Bild nach dem Hochladen verschwommen aus?

Wenn Ihr Bild unscharf aussieht, überprüfen Sie die Qualität Einstellung unter LCP optimieren. Umschalten auf Feinste Die Qualität behebt das Problem normalerweise, stellen Sie jedoch sicher, dass die von Ihnen hochgeladene Quelldatei eine hohe Auflösung hat.

6. Kann ich Text direkt auf ein Bild legen?

Das Bildelement selbst unterstützt keine direkte Textüberlagerung. Verwenden Sie hierfür das Hero-Banner-Element, mit dem Sie Text, Schaltflächen oder andere Elemente über einem Bild platzieren können.

7. Wie fügen Sie Ihrer Seite in GemPages Bilder hinzu?

Um Bilder zu einer Vorlage hinzuzufügen, ziehen Sie die Bildelement in Ihr Seitenlayout im Editor. Sie können eine neue Datei hochladen, eine aus Ihrer Shopify-Medienbibliothek auswählen oder eine Bild-URL einfügen. So können Sie jedes Produkt, jede Kollektion oder jede Landingpage-Vorlage optisch anpassen.

8. Wie aktualisiere ich Bilder nach der Veröffentlichung meiner Seite?

Klicken Sie einfach auf das Bild im Editor. Im Quelle Im Abschnitt können Sie ein neues Bild hochladen, es durch ein Bild aus Ihrer Medienbibliothek ersetzen oder die Einstellungen anpassen. Klicken Sie nach der Aktualisierung auf Gespeichert und Veröffentlichen um die Änderungen live in Ihrem Geschäft anzuwenden.

9. Was bedeutet „Link folgen“, wenn ich die Aktion „Nach Klick“ auf „Seite öffnen“ einstelle?

Die Einstellung „Link folgen: Ja/Nein“ steuert, ob Suchmaschinen dem Hyperlink in Ihrem Bild folgen dürfen.

• Ja: Suchmaschinen (wie Google) können diesem Link zur Zielseite folgen. Verwenden Sie diese Funktion, wenn der Link zu einer wichtigen Seite führt, die indexiert werden soll (z. B. eine Produkt- oder Kategorieseite).
• no: Fügt ein rel="nofollow" Fügen Sie dem Link ein Tag hinzu. Dies teilt Suchmaschinen mit, dass sie wissen, wie sie dies tun. kein Frontalunterricht. dem Link folgen oder die Linkautorisierung weitergeben.

10. Wie verlinke ich WhatsApp mithilfe des Bildelements?

Sie können jedes beliebige Bild (z. B. ein WhatsApp-Symbol) in eine Chat-Schaltfläche umwandeln. Fügen Sie einfach ein Bildelement hinzu, laden Sie Ihr WhatsApp-Logo hoch und aktivieren Sie die Funktion. verbindung .

Verwenden Sie dieses Format für Ihren WhatsApp-Link: https://wa.me/<your-number>. Zum Beispiel: https://wa.me/15551234567.

Wenn Kunden auf das Bild klicken, öffnet sich ein WhatsApp-Chat mit Ihrer Nummer.

11. Warum schlägt mein Bild-Upload in GemPages fehl?