Artikel-Bildelement

Über das Artikelbildelement

Die Artikel-Bildelement wird hauptsächlich eingesetzt in der Artikellistenelement um Artikelvorschaubilder oder ausgewählte Bilder anzuzeigen. 

Dieses Element hilft bei der Erstellung optisch ansprechender Artikellisten und verbessert so das allgemeine Benutzererlebnis. Es kann auch zu einzelnen Artikelseiten hinzugefügt werden, wird in diesem Zusammenhang jedoch seltener verwendet.

Das Artikelbild-Element kann nur verwendet werden, wenn es innerhalb des Artikellisten-Elements platziert wird.

Wie füge ich ein Artikelbild-Element zu meiner Seite hinzu?

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 dem Artikel-Bildelement und ziehen Sie es per Drag & Drop an die gewünschte Position auf Ihrer Seite.

Schritt 3: Klicken Sie auf das Element, um seine Einstellungen für weitere Anpassungen zu öffnen.

Konfigurieren Sie die Registerkarte „Einstellungen für Artikelbildelemente“.

Die Artikel-Bildelement enthält mehrere Anpassungsoptionen, um Ihren Design- und Funktionsanforderungen gerecht zu werden:

Artikel Quelle

Klicken Sie auf das Kästchen, um die Artikelquellen im Element „Artikelliste“ zu konfigurieren.

Bild

Wählen Sie aus, wie das vorgestellte Bild Ihres Artikels auf der Seite angezeigt werden soll:

• Bild füllen: Die Größe des Bildes wird angepasst oder es wird zugeschnitten, um die Abmessungen des Rahmens auszufüllen.

Dadurch können Teile des Bildes abgeschnitten werden, wenn das Seitenverhältnis vom Rahmen abweicht.

• Bild anpassen: Das Bild wird verkleinert oder vergrößert, damit es vollständig in den Rahmen passt, wobei das ursprüngliche Seitenverhältnis erhalten bleibt. 

Dadurch wird sichergestellt, dass das gesamte Bild sichtbar ist. Es kann jedoch sein, dass an den Rändern Platz (Füllung) verbleibt, wenn das Seitenverhältnis nicht mit dem Rahmen übereinstimmt.

Größe

Anteil: Wählen Sie, wie das Bild zugeschnitten oder angezeigt wird:

• Quadratisch: Gleiche Breite und Höhe.
• Vertikale: Höher als breit.
• Horizontale: Breiter als hoch.
• Original: Behält das ursprüngliche Seitenverhältnis des Bildes bei.
• Maßgeschneidert: Breite und Höhe manuell anpassen.

Breite und Höhe: Legen Sie die genauen Abmessungen des Bildes in Pixeln fest.

Shape

• Grenze: Sie können die Rahmenfarbe, -stärke und -kontur für dieses Element ändern.
• CORNER: Die Profilecke kann quadratisch, rund oder pillenförmig sein. Den Eckenradius können Sie nach Wunsch anpassen.
• Shadow: Sie können dem Abschnitt „Artikelliste“ einen Schatten hinzufügen und die Schattenanzeige anpassen (Größe, Farbe, Unschärfe und Abstand).

verbindung

Standardmäßig wird in der verbindung Abschnitt ist die After-Click-Aktion auf „Zum Artikel”. Sie können es ändern in „Blättern Sie zu“ und fügen Sie den Zielabschnitt nach Wunsch ein. 

SEO

• Alt Text: Geben Sie eine Beschreibung des Bildes für Barrierefreiheit und SEO ein. Dieser Text wird angezeigt, wenn das Bild nicht geladen werden kann, und hilft Suchmaschinen, den Inhalt zu verstehen.
• Bild Titel: Fügen Sie einen Tooltip hinzu, der angezeigt wird, wenn ein Benutzer mit der Maus über das Bild fährt, und zusätzlichen Kontext oder Informationen liefert.
  

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.

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 eigenen Komprimierungseinstellungen für erweiterte Kontrolle.

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

Ausrichten

Passen Sie die Ausrichtung der Überschrift für eine bessere Lesbarkeit an. Sie können zwischen linksbündig, zentriert und rechtsbündig wählen.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zur Registerkarte „Erweitert“ und folgen Sie den Anweisungen in Dieser Artikel.