Wie passe ich einen Listenstyle an?

Erstellen Sie Listen, können Sie diese in einem einheitlichen Style ausgeben. Durch die standardmäßigen Listenarten, wie ungeordnete Listen (ul) und geordnete Listen (ol), sind bereits grundlegende Einstellungen getroffen, die Sie an Ihr Branding anpassen können. In dieser Anleitung wird Ihnen erklärt, wie Sie diese Listen an Ihr Branding anpassen können.

1. Klicken Sie in der Navigationsleiste auf Style
2. Wählen Sie den zu bearbeitenden Style aus
3. Klicken Sie im Menü links auf die Rubrik Lists
4. Klicken Sie auf den zu bearbeitenden Listenstyle, um das Fenster Edit Lists zu öffnen oder wählen Sie im Dreipunkte Menü des jeweiligen Listenstyles den Punkt Bearbeiten aus

Schrift anpassen

Geben Sie den Font style für jedes Level an, diese können immer gleich bleiben oder sich voneinander unterscheiden. Wählen Sie jeweils für Level 1 bis 3 die Schrift wie folgt aus:

1. Klicken Sie auf das Feld Font style Level 1, um das Dropdown Menü zu öffnen
2. Wählen Sie die Schrift aus, die Sie für das Level verwenden möchten
3. Wiederholen Sie die Schritte für Level 2 und 3

Desktop, Tablet und Mobile Ansicht

Das Erscheinungsbild von Listen auf verschiedenen Endgeräten wie Desktop, Tablet und Mobilgeräten kann separat angepasst werden. Dies ermöglicht Ihnen, Listen in unterschiedlichen Ansichten mit spezifischen Abständen, Einrückungen oder anderen Stiländerungen darzustellen, um eine optimale Darstellung und Benutzererfahrung auf verschiedenen Geräten sicherzustellen. Wählen Sie dafür Desktop, Tablet oder Mobil aus und nehmen Sie beliebige Änderungen vor.

Bullet points festlegen

Wählen Sie für jedes Level die Farbe Ihrer gewünschten Bullet Points an und wählen Sie den Typ.

1. Klicken Sie in das Feld Bullet point color, um im Dropdown Menü die gewünschte Farbe für die Bullet Points auszuwählen
2. Klicken Sie in das Feld Bullet point type, um im Dropdown Menü einen der Folgenden Bullet Points auszuwählen:
   1. None
   2. Filled Circle (●)
   3. Empty Circle (○)
   4. Filled Square (▪)
   5. Decimal numbers (1.)
   6. Han-Decimal numbers (一)
   7. Decimal numbers with zeros (01.)
   8. Lower roman numbers (i.)
   9. Upper roman numbers (I.)
   10. lower greek numbers (α)
   11. Upper greek numbers (1.)
   12. Lower latin number (a.)
   13. Upper latin numbers (A.)
   14. Image 
   15. Custom
3. Nehmen Sie diese Einstellung für alle Level (1 bis 3) vor

Innenabstand

Mit dem Padding können Sie den Abstand zwischen den verschiedenen Ebenen von Listen anpassen. Das Padding wird innerhalb der Boxen angewendet und umfasst den Inhalt und den Innenabstand. Wenn Sie beispielsweise das Padding für eine Level-1-Liste erhöhen, wird der Abstand innerhalb dieser Box, nach dem Inhalt (z. B. Level 2 Liste) vergrößert.

1. Klicken Sie in das Eingabefeld der jeweiligen Abstandsrichtung:
   1. Padding top (Innenabstand nach oben)
   2. Padding bottom (Innenabstand nach unten)
   3. Padding left (Innenabstand nach links)
   4. Padding right (Innenabstand nach rechts)
2. Geben Sie den gewünschten Abstand ein z. B. 10px
3. Wiederholen Sie die Einstellung für alle Level (1 bis 3)

Indentation

Die Indentation (auch: Einrückung) ist der Abstand, den ein Listenpunkt von der linken Kante des Containers bzw. des Bildschirms hat. Durch die Indentation wird die Hierarchie oder Einrückungsebene der Listenpunkte dargestellt. Die Indentation wird aufeinander addiert, wenn beispielsweise Level 1 eine Einrückung von 20px hat und Level 2 eine Einrückung von 10px, dann hat ein Level-2-Listenpunkt insgesamt 30px Einrückung von der linken Kante. 

1. Klicken Sie auf das Eingabefeld Indentation
2. Geben Sie einen gewünschten Wert ein 
3. Wiederholen Sie diese Schritte für Level 1 bis 3

Speichern

Nachdem Sie alle gewünschten Einstellungen vorgenommen haben, vergessen Sie bitte nicht, auf den Speichern-Button zu klicken. Beachten Sie, dass alle Änderungen verloren gehen, wenn Sie das Fenster schließen, ohne auf den "Speichern"-Button zu klicken.

Das könnte Sie auch Interessieren