Erweiterte Liste

Was ist das erweiterte Listenelement?

GemPages bietet zwei Elemente zum Anzeigen von Inhalten in einer Liste:

• Element „Artikelliste“: Für einfache Listen konzipiert. Jeder Eintrag beginnt mit einem iconSie können Symbole aus der GemPages-Symbolbibliothek auswählen oder eigene hochladen. Dieses Element eignet sich gut zur Darstellung kurzer Informationen wie Produktvorteile, Funktionen oder wichtiger Highlights.
• Erweitertes Listenelement: Anstatt auf Symbole beschränkt zu sein, ermöglicht es Ihnen, Folgendes einzubeziehen Bilder neben jedem ListeneintragDadurch erhalten Sie mehr visuelle Kontrolle über das Layout. Dies macht es ideal für Anwendungsfälle, die reichhaltigere visuelle Darstellungen erfordern, wie z. B. die Präsentation von Produktmerkmalen mit Bildern, Schritt-für-Schritt-Anleitungen oder visuellen Vergleichen. 

So fügen Sie Ihrer Seite das erweiterte Listenelement hinzu

Schritt 1:: Im GemPages Dashboard, wählen Sie Ihre Seite aus, um den Editor aufzurufen.

Schritt 2:: Suchen Sie im Editor nach Erweiterte Liste Element unter dem Inhaltsangabe Abschnitt. Ziehen Sie es per Drag & Drop an die gewünschte Stelle auf der Seite.

Klicken Sie auf das Element. Die Konfiguration wird in der linken Seitenleiste angezeigt. 

Konfigurieren der Registerkarte „Einstellungen“

1. Artikelverwaltung

In diesem Abschnitt können Sie Listenelemente hinzufügen, entfernen oder duplizieren.

• Zu einen neuen Artikel hinzufügen, drücke den Symbol duplizieren neben einem vorhandenen Element. Ein neues Element wird direkt unter dem ursprünglichen angezeigt.
• Zu einen Artikel entfernen, drücke den Papierkorb-Symbol auf das Element, das Sie löschen möchten, und bestätigen Sie dann den Löschvorgang.

2. Artikelabstand

Das Artikelabstand steuert den vertikalen Abstand zwischen den einzelnen Elementen in Ihrer Liste. Passen Sie den Abstand mit dem Schieberegler oder dem Eingabewert an.

• Standard: 12px
• Ein größerer Abstand kann die Lesbarkeit der Liste verbessern, während ein kleinerer Abstand zu einem kompakteren Design führt.

3. Artikelstil

Symbol- und Textlücke : Dadurch wird der horizontale Abstand zwischen dem Symbol (oder Bild) und dem Text angepasst.

• Standard: 12px
• Vergrößern Sie den Abstand für ein offeneres Layout, verkleinern Sie ihn für ein kompakteres Erscheinungsbild.

Polsterung: Fügt um jedes Listenelement Platz hinzu.

• Klicken Sie auf Polsterung hinzufügen und geben Sie die gewünschte Pixelanzahl ein.
• Dadurch wird sichergestellt, dass Ihr Inhalt die Ränder der Artikelbox nicht berührt.

Hintergrund: Sie können hinter dem Element einen farbigen Hintergrund hinzufügen.

Rand, Ecke und Schatten: Mit diesen Optionen können Sie den Artikelcontainer gestalten.

• Rand: Wählen Sie Stil (durchgezogen, gestrichelt, gepunktet), Dicke und Farbe.
• Ecke: Passen Sie den Randradius an, um die Ecken abzurunden.
• Schatten: Fügen Sie Schatten hinzu, um Tiefe zu erzeugen oder Elemente hervorzuheben.

4. Größe

Länge: Steuert die Breite des Inhaltsfelds innerhalb des Elements:

• An Inhalt anpassen: Die Box passt sich automatisch der Größe des Inhalts an.
• Voll: Die Box dehnt sich auf 100 % der Containerbreite aus.

Polsterung: Passen Sie den Abstand zwischen den Rändern des Inhaltsfelds und dem darin enthaltenen Inhalt an. Klicken Sie auf Polsterung hinzufügen und geben Sie den gewünschten Wert in Pixeln ein.

Arrangieren: Richten Sie den Inhalt innerhalb der Box aus: Links, Centerden Rechts.

• Diese Einstellung wird ausgeblendet, wenn die Breite auf „Auto“ eingestellt ist.
• Die Standardausrichtung ist Links.

5. Hintergrund

Sie können auch einen Hintergrund für die gesamtes erweitertes Listenelement:

• Farbe:

• Bild:

6. Form

• Rand: Legen Sie den Rahmenstil, die Dicke und die Farbe für das gesamte Element fest.
• Ecke: Runden Sie die Ecken des Elements mit einem Randradius ab.
• Schatten: Wenden Sie Schatteneffekte an, um die Liste optisch hervorzuheben.

7. Ausrichten

Bestimmen Sie, wie das Element auf Ihrer Seite positioniert wird. Sie können zwischen drei Optionen wählen: linksbündig, zentriert und rechtsbündig.

Konfigurieren der Registerkarte „Erweitert“

Das Registerkarte Erweitert ermöglicht mehr Anpassung:

• Speichern Benutzerdefinierte CSS um Ihre Liste auf eine Weise zu gestalten, die in den Standardeinstellungen nicht verfügbar ist.
• Anpassung Sichtbarkeit pro Gerät um die Liste auf dem Desktop, Tablet oder Mobilgerät auszublenden oder anzuzeigen.
• Tragen Sie Animationen oder Interaktionseffekte, um Ihren Inhalten mehr Dynamik zu verleihen.

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