Vergleichsbildelement

Informationen zum Bildvergleichselement

Das Bildvergleich Mit diesem Element können Sie die Vorteile Ihres Produkts oder Ihrer Dienstleistung hervorheben, indem Sie Vorher- und Nachher-Bilder in einem einzigen Frame vergleichen. Dieses Element funktioniert ähnlich wie das Vorher-Nachher-Bild-Element in früheren Versionen.

Beispielhafte Anwendungsfälle:

Nutzen Sie den Bildvergleich, um die Wirkung Ihrer Produkte hervorzuheben und Vertrauen bei den Kunden aufzubauen:

• Produktdemos: Zeigen Sie Vorher-/Nachher-Verbesserungen (z. B. Hautpflege, Reinigungswirkung).
• Lifestyle-Bilder: Vergleichen Sie die Nutzung im realen Leben mit der Nichtnutzung.
• Design-Vitrinen: Neugestaltungen, Upgrades oder Transformationen anzeigen.

Wie fügen Sie Ihrer Seite ein Bildvergleichselement hinzu? 

Der Bildvergleich ist ein flexibles Element und kann an jeder beliebigen Stelle auf Ihrer Seite verwendet werden, indem Sie die folgenden Schritte ausführen:

Schritt 1: Besuchen Sie das GemPages Dashboard  > Seiten, und klicken Sie dann auf Ihre Zielseite, um den Editor zu finden.

Schritt 2: Suchen Sie in der linken Seitenleiste nach „Vergleich" und dann Ziehen Sie es per Drag & Drop in den gewünschten Abschnitt.

Schritt 3: Klicken Sie auf das Element, um das Einstellungsfenster zu öffnen und mit der Anpassung zu beginnen.

Konfigurieren der Registerkarte „Einstellungen“

Unter dem Registerkarte Einstellungenkönnen Sie die folgenden Optionen anpassen:

Layout

Wählen Sie, wie die beiden Bilder im Vergleichsrahmen angezeigt werden:

• Horizontal: Die Bilder werden von links nach rechts verglichen.

• Vertikal: Die Bilder werden von oben nach unten verglichen.

Bild

Laden Sie die Bilder hoch, die Sie vergleichen möchten, und passen Sie sie an.

1. Bild: Laden Sie das erste Bild hoch oder wählen Sie es aus.

2. Bild: Wählen Sie dann das 2. Bild zum Vergleich aus.

Maßstab:

• Bild füllen: Streckt das Bild, damit es in den Container passt. Das Seitenverhältnis kann verzerrt sein.
• Bild anpassen: Passt das Bild so an, dass es in den Container passt und dabei das Seitenverhältnis beibehält.
  

Slider

Entscheiden Sie, wie Ihre Besucher mit dem Vergleichsschieberegler interagieren.

Verhalten:

• Zum Verschieben ziehen: Besucher ziehen den Schieberegler manuell.

• Zum Bewegen den Mauszeiger bewegen: Der Schieberegler bewegt sich automatisch, wenn Sie mit der Maus darüber fahren.

Standardverhältnis: Legen Sie das anfängliche Aufteilungsverhältnis (in %) fest.

Abzeichen

Aktivieren Sie die Abzeichen Funktion, die Besuchern hilft, die beiden verglichenen Bilder eindeutig zu identifizieren.

Anschließend können Sie das Textabzeichen nach Ihren Wünschen anpassen, einschließlich:

1. und 2. Text: Fügen Sie sowohl für das erste als auch für das zweite Bild eine Beschriftung hinzu. Zum Beispiel „Alt“ vs. „Neu“ oder „Vorher“ vs. „Nachher“.

Textstil: Passen Sie die Typografie an Ihr Shop-Design an. Sie können:

• Wählen Sie aus verfügbaren Textstilen (Überschrift, Absatz usw.).
• Wählen Sie eine Schriftfamilie aus.
• Ändern Sie die Schriftgröße.
• Fett, kursiv und unterstrichen anwenden.
• Wählen Sie eine Schriftfarbe.
• Steuern Sie die Zeilenhöhe und den Buchstabenabstand.
• Texttransformation anwenden (Großbuchstaben, Kleinbuchstaben, Großbuchstaben).

Polsterung: Definieren Sie den Abstand innerhalb des Abzeichens, um zu steuern, wie viel Platz der Text darum herum hat.

Hintergrund: Legen Sie die Hintergrundfarbe des Abzeichens für die Sichtbarkeit fest (z. B. einen dunklen Hintergrund für den weißen Text).

Rand: Passen Sie Dicke, Stil und Farbe des Rahmens an.

Ecke: Entscheiden Sie, ob die Ecken des Abzeichens scharf, abgerundet oder pillenförmig sein sollen. Geben Sie einen Radius für die volle Kontrolle ein.

Schatten: Verleihen Sie mit Schatteneffekten Tiefe. Passen Sie Schattengröße, Unschärfe, Farbe und Abstand an.

Position: Wählen Sie, wo das Abzeichen erscheinen soll (z. B. oben links, oben rechts, unten links, unten rechts).

Größe

Passen Sie den Rahmen und die Breite Ihres Elements an.

Rahmen: Wählen Sie das Seitenverhältnis für den Rahmen aus der Dropdown-Liste aus (z. B. 16:9, 4:3).

Breite: Standardmäßig ist die Breite auf 100 % (Voll) eingestellt. Sie können die Breite aber auch ändern, indem Sie eine Zahl in das Feld eingeben.

Shape

Passen Sie das Gesamterscheinungsbild des Vergleichsrahmens an.

• Grenze: Sie können die Rahmenfarbe, -stärke und -kontur ändern.
• CORNER: Die Abschnittsecke kann quadratisch, rund oder pillenförmig sein. Sie können auch einen genauen Radius eingeben, um die Ecke des Elements nach Ihren Wünschen anzupassen.
• Shadow: Sie können einen Schatten hinzufügen und seine Anzeige anpassen (Größe, Farbe, Unschärfe und Entfernung).

LCP optimieren

Diese Einstellung trägt zur Verbesserung der Seite bei Größte inhaltliche Farbe (LCP) Score, eine wichtige Core Web Vitals-Kennzahl für Leistung und SEO.

Vorladen: Aktivieren Sie diese Option, wenn das Bild oberhalb des Falzes angezeigt wird und eines der wichtigsten visuellen Elemente auf der Seite ist.

• Wenn Vorladen = Ja: Das Bild wird vorab geladen, um die Geschwindigkeit zu verbessern.
• Wenn Vorspannung = Nein: Das Bild wird normal geladen.

Qualität: Wählen Sie die richtige Bildkomprimierungsstufe, um Klarheit und Ladegeschwindigkeit in Einklang zu bringen:

• Feinste: Höchste Qualität, größere Dateigröße.
• Hoch (Standard): Ausgewogene Qualität und Leistung.
• Medium: Schnelleres Laden, leicht reduzierte Qualität bei bildlastigen Seiten.
• Benutzerdefiniert: Definieren Sie Ihre Komprimierungseinstellungen für erweiterte Kontrolle.

SEO

Verbessern Sie Ihren Page Rank, indem Sie Bildinformationen bereitstellen. Alternativtext , Bildtitel für jedes Bild.

Ausrichten

Passen Sie die Ausrichtung Ihres Elements innerhalb des Containers an: linksbündig, zentriert oder rechtsbündig.

Hinweis: Die Ausrichtung wird nicht unterstützt, wenn die Breite auf 100 % oder mehr eingestellt ist.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zu Registerkarte Erweitert und befolgen Sie die Anweisungen in Dieser Artikel.

Häufig gestellte Fragen

1. Kann ich im Bildvergleichselement mehr als zwei Bilder hinzufügen?

Nein. Das Bildvergleichselement dient nur zum Vergleichen zwei Bilder gleichzeitig (Vorher vs. Nachher). Wenn Sie weitere Vergleiche anzeigen möchten, können Sie das Element auf Ihrer Seite duplizieren.

2. Funktioniert das Bildvergleichselement auf Mobilgeräten?

Ja. Der Slider ist vollständig responsiv und funktioniert sowohl auf Desktop-PCs als auch auf Mobilgeräten. Besucher können den Schieberegler auf Mobilgeräten mit dem Finger ziehen.

3. Kann ich den Stil des Schiebereglers anpassen?

Ja. Sie können die Farbe, Form und den Schatten des Griffs im Slider .

4. Wie stelle ich sicher, dass Bilder nicht gestreckt aussehen?

Verwenden Sie die Bild anpassen Option unter Skalieren um das ursprüngliche Seitenverhältnis Ihrer Bilder beizubehalten.

5. Kann ich Textbeschriftungen wie „Vorher“ und „Nachher“ hinzufügen?

Ja. Aktivieren Sie die Abzeichen Option zum Hinzufügen anpassbarer Beschriftungen zu jedem Bild.