Artikelliste

Was ist das Artikellistenelement in GemPages?

Mit dem Element „Elementliste“ können Sie Informationen in einem Listenformat darstellen, wobei jedes Element mit einem Symbol beginnt. Sie können Symbole aus der GemPages-Symbolbibliothek auswählen, um die visuelle Konsistenz zu gewährleisten, oder, wenn Sie benutzerdefinierte Symbole oder Bilder bevorzugen, das Erweitertes Listenelement stattdessen.

Dieses Element ist ideal für:

• Hervorhebung der Produktmerkmale
• Auflisten von Vorteilen oder Servicepunkten
• Schritt-für-Schritt-Prozesse präsentieren
• Erstellen kompakter, scanbarer Inhalte

So fügen Sie Ihrer Seite das Element „Artikelliste“ hinzu

Um das Element „Artikelliste“ zu Ihrer Seite hinzuzufügen, befolgen Sie bitte die folgenden Schritte:

Schritt 1:   Von deiner GemPages Dashboard, wählen Sie die Seite aus, die Sie bearbeiten möchten, und öffnen Sie sie im Editor.

Schritt 2:  Gehen Sie im Editor zum Abschnitt „Inhaltsliste“ in der linken Seitenleiste oder suchen Sie in der Suchleiste nach „Artikelliste“.

Schritt 3: Ziehen Sie das Element „Artikelliste“ per Drag & Drop an die gewünschte Stelle auf der Seite.

Konfigurieren der Elementeinstellungen

Sobald das Element auf Ihrer Seite angezeigt wird, klicken Sie darauf. In der linken Seitenleiste werden zwei Hauptregisterkarten angezeigt: Einstellungen und Erweitert:

Die Registerkarte Einstellungen

1. Artikelverwaltung

In diesem Abschnitt können Sie Listenelemente hinzufügen, entfernen oder neu anordnen:

• Einen Artikel hinzufügen: Bewegen Sie den Mauszeiger über ein vorhandenes Element und klicken Sie auf das Symbol „Duplizieren“, um eine exakte Kopie zu erstellen.
• Entfernen eines Elements: Klicken Sie auf das Papierkorbsymbol des Elements, das Sie löschen möchten, und bestätigen Sie dann.
• Artikel neu anordnenBewegen Sie den Mauszeiger über das Element, das Sie verschieben möchten, Klicken und halten Sie die Maustaste gedrückt und dann Ziehen Sie es nach oben oder unten Um die Position des Elements in der Liste zu ändern, lassen Sie die Maustaste los, sobald sich das Element an der gewünschten Stelle befindet.

2. Symbol

• Symboltyp: Art der Symbole für jedes Element in der Elementliste. Es gibt 2 Symboltypoptionen:

Übereinstimmende Symbole: Alle Symbole in der Artikelliste sind gleich.

Unterschiedliche Symbole: Jeder Artikel in der Artikelliste hat ein individuelles Symbol.

• Symbolquelle: Wählen Sie das angezeigte Symbol

Wenn Symboltyp = Übereinstimmende Symbole: Alle Symbole in der Artikelliste sind gleich.

Wenn Symboltyp = Verschiedene Symbole: Jedes Element in der Elementliste hat ein individuelles Symbol.

Der Benutzer wählt jedes Symbol für jedes Element manuell aus.

• Symbolgröße: Geben Sie Ihre bevorzugte Größe für das Symbol einDie Standardsymbolgröße beträgt 16 Pixel.

• Symbolfarbe: Wählen Sie die Farbe für Ihr Symbol aus der Palette oder geben Sie den Hex-Farbcode in das Feld ein.

• Position: Position des Symbols relativ zum Text in jedem Element der Liste. Es gibt zwei Positionsoptionen: Oben ausrichten, Zentriert ausrichten.

• Polsterung: Passen Sie den Abstand innerhalb des Symbolcontainers an. Hiermit steuern Sie, wie nah das Symbol an den Containerrändern sitzt. Erhöhen Sie den Abstand, um mehr Platz um das Symbol herum zu schaffen, oder verringern Sie ihn, um einen engeren Platz zu schaffen.

• Hintergrund: Fügen Sie hinter dem Symbol einen Hintergrund hinzu.

Farbe: Wählen Sie eine Vollton- oder Farbverlaufshintergrundfarbe.

Bild: Laden Sie ein Bild hoch, das hinter dem Symbol angezeigt werden soll.

• Grenze: Fügen Sie einen Rahmen um den Container des Symbols hinzu. Sie können Folgendes festlegen:

Rahmenstil (durchgezogen, gestrichelt, gepunktet)

Randstärke (in Pixeln)

Randfarbe

• CORNER: Passen Sie die Rundung der Containerecken des Symbols an, indem Sie einen Randradius festlegen.

3. Textstil

An dieser Stelle haben Sie die Möglichkeit, die Typografie des Textes zu bearbeiten. Hier sind die verfügbaren Optionen:

• Stile: Wählen Sie Ihren gewünschten Stil aus den vordefinierten Optionen aus, darunter 6 Überschriftenstile und 3 Absatzstile.
• Schriftart: Wählen Sie die Schriftart, die Sie für den Text verwenden möchten. Wenn Sie eine Schriftart verwenden möchten, die nicht aufgeführt ist, können Sie die bereitgestellte Anleitung unter So fügen Sie im Editor Version 7 eine benutzerdefinierte Schriftart hinzu.
• Größe: Passen Sie die Schriftgröße an, indem Sie einen Wert in Pixeln angeben.
• Farbe,: Ändern Sie die Farbe des Textes nach Ihren Wünschen.

Klicken Sie auf die Schaltfläche „Mehr anzeigen“, um weitere Anpassungsoptionen anzuzeigen:

• Font Gewicht: Wählen Sie die gewünschte Schriftstärke aus dem bereitgestellten Dropdown-Menü.
• Linienhöhe: Passen Sie die Höhe des Textes an, indem Sie einen Prozentwert angeben.
• Buchstaben-Abstand: Ändern Sie den Abstand zwischen Buchstaben, indem Sie einen Wert in Pixeln eingeben.
• Texttransformation: Transformieren Sie den Text auf eine der folgenden Arten: Keine Transformation angewendet, Großbuchstaben, Kleinbuchstaben, Großbuchstaben.

4. Artikelabstand

Passen Sie den vertikalen Abstand zwischen Listenelementen mit dem Schieberegler an.

Standard: 12px.

5. Artikelstil

Symbol- und Textabstand – steuert den horizontalen Abstand zwischen Symbol und Text.

Standard: 8px.

6. Hintergrund

• Farbe,: Klicken Sie auf die Farbauswahl, um einen einfarbigen oder farbigen Hintergrund auszuwählen.
  
• Bild: Laden Sie ein Hintergrundbild von Ihrem Gerät hoch. Die empfohlene Größe hängt von Ihrem Designlayout ab.

7. Größe

• Länge: Geben Sie einen numerischen Wert (px) ein oder wählen Sie:

Inhalt anpassen: Passt die Breite an die Inhaltsgröße an.

Voll: Dehnt sich auf die volle Containerbreite aus.

• Polsterung: Passen Sie den inneren Abstand zwischen Inhalt und Elementrand an.
• Arrangieren: Richten Sie das gesamte Element linksbündig, zentriert oder rechtsbündig aus.

8. Form

• Grenze: Fügen Sie einen Rahmen hinzu, wählen Sie den Stil (durchgehend, gestrichelt, gepunktet), legen Sie Dicke und Farbe fest.
• CORNER: Runden Sie die Ecken ab, indem Sie einen Radiuswert festlegen (z. B. 5 Pixel für leichte Rundung, 50 Pixel für vollständige Rundung).
  
• Shadow: Fügen Sie Schatteneffekte für Tiefe hinzu; passen Sie Unschärfe, Ausbreitung und Farbe an.

9. Ausrichten

• Wenn die Breite 100 % beträgt, ist die Ausrichtung festgelegt und kann nicht geändert werden.
  
• Andernfalls ist die Standardausrichtung Links, Sie können jedoch bei Bedarf auf Mitte oder Rechts umschalten.

Die Registerkarte „Erweitert“

Für erweiterte Anpassungen wechseln Sie zur Registerkarte „Erweitert“. Hier können Sie:

• Fügen Sie benutzerdefiniertes CSS für ein einzigartiges Styling hinzu.
• Steuern Sie die Sichtbarkeit pro Gerätetyp.
• Wenden Sie Animationen und Interaktionseffekte an.

Ausführliche Anweisungen finden Sie in unserer Erweiterte Einstellungen Artikel.