So fügen Sie ganz einfach Aufzählungszeichen und nummerierte Listen in WordPress hinzu

Gut organisierte Inhalte mit Aufzählungszeichen und nummerierten Listen zu erstellen, mag einfach erscheinen, aber wir haben festgestellt, dass viele Benutzer Schwierigkeiten haben, sie richtig aussehen zu lassen. 📋

Nach der Erkundung verschiedener Formatierungsmethoden im Blockeditor haben wir die einfachsten Wege entdeckt, um klare, konsistente Listen zu erstellen.

Durch umfangreiche Tests in unseren Demo-Umgebungen haben wir mehrere Methoden zum Hinzufügen und Formatieren von Listen in WordPress identifiziert, von einfachen Aufzählungspunkten bis hin zu benutzerdefinierten Listen.

Das Tolle daran ist, dass Sie keine Programmierkenntnisse benötigen, um Ihre Listen professionell aussehen zu lassen.

In diesem anfängerfreundlichen Leitfaden zeigen wir Ihnen genau, wie Sie Aufzählungszeichen und nummerierte Listen in WordPress hinzufügen und formatieren.

Wann Sie Aufzählungszeichen und nummerierte Listen in WordPress hinzufügen sollten

Anstatt Besuchern eine Textwand zu zeigen, ist es eine gute Idee, Ihre Inhalte in übersichtliche Abschnitte zu unterteilen. Es gibt viele Möglichkeiten, Ihre Seiten lesefreundlicher zu gestalten, darunter das Erstellen von Tabellen, die Verwendung von Unterüberschriften, das Hinzufügen von Videos und das Erstellen von Listen.

Eine Liste kann Besuchern helfen, Ihre Inhalte auf einen Blick zu verstehen (wie in einem Inhaltsverzeichnis), auch wenn Sie komplizierte Informationen teilen. Dies kann die Benutzererfahrung verbessern und die Leute länger auf Ihrer WordPress-Website halten.

In diesem Sinne sehen wir uns an, wie Sie Aufzählungszeichen und nummerierte Listen in WordPress hinzufügen können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Verwendung des integrierten WordPress-Listenblocks (einfach)
• Methode 2: Verwendung von Shortcodes Ultimate (Listen mit benutzerdefinierten Symbolen)
• Methode 3: Verwendung eines Page-Builder-Plugins (am besten für Landingpages)
• Methode 4: Verwenden von Code zum Hinzufügen von Aufzählungszeichen und nummerierten Listen (Fortgeschritten)

Methode 1: Verwendung des integrierten WordPress-Listenblocks (einfach)

Der einfachste Weg, Aufzählungszeichen und nummerierte Listen hinzuzufügen, ist die Verwendung des Listenblocks und des WordPress Gutenberg Block-Editors.

Dies ermöglicht es Ihnen, einfache nummerierte oder Aufzählungslisten zu erstellen, ohne ein separates WordPress-Plugin zu installieren. Allerdings hat dieser Standardblock nur wenige Anpassungsoptionen.

Wenn Sie Ihre Listen mit benutzerdefinierten Symbolen, horizontalen Layouts, verschiedenen Farben und mehr feinabstimmen möchten, empfehlen wir die Verwendung einer der anderen Methoden in diesem Artikel.

Um zu beginnen, öffnen Sie einfach den Block-Editor für den WordPress-Beitrag oder die Seite, auf der Sie eine Liste hinzufügen möchten. Oder Sie können den Widget-Editor öffnen, um die Aufzählung zu einem Widget-Bereich wie einer Seitenleiste hinzuzufügen.

Sie können dann wählen, ob Sie einen Aufzählungspunkt oder eine nummerierte Liste erstellen möchten.

So erstellen Sie eine Aufzählungsliste in WordPress

Um eine Aufzählungsliste zu erstellen, klicken Sie auf das „+“-Symbol, um einen neuen WordPress-Block hinzuzufügen.

Geben Sie im erscheinenden Popup 'Liste' ein.

Wenn der richtige Block angezeigt wird, klicken Sie darauf, um ihn zur Seite hinzuzufügen.

Dies erstellt den ersten Punkt in einer Aufzählungsliste. Geben Sie einfach den Text ein, den Sie für den ersten Listenpunkt verwenden möchten.

Wenn Sie damit fertig sind, drücken Sie die 'Enter'-Taste auf Ihrer Tastatur, um zur nächsten Zeile zu gelangen. WordPress erstellt automatisch den zweiten Aufzählungspunkt.

Sie können nun den Text eingeben, den Sie für den zweiten Aufzählungspunkt verwenden möchten. Wiederholen Sie einfach diese Schritte, um weitere Elemente zur Liste hinzuzufügen.

Wenn Sie eine verschachtelte Liste erstellen möchten, klicken Sie auf die Schaltfläche „Einrücken“. Dies verschiebt den Cursor um einen Schritt nach rechts, sodass Sie den eingerückten Text eingeben können.

Sie können erneut auf die Schaltfläche „Einrücken“ klicken, um zwei Ebenen von verschachtelten Aufzählungspunkten zu erstellen.

Wie Sie im folgenden Bild sehen können, verwendet jede Ebene ein anderes Symbol.

Um den Einzug zu verringern, klicken Sie auf die Schaltfläche „Einzug verringern“.

Dies bewegt den Cursor einen Schritt nach links, bereit für Ihre Eingabe.

Durch Drücken der Schaltflächen 'Einrücken' und 'Ausrücken' können Sie verschachtelte Listen mit mehreren verschiedenen Ebenen erstellen.

Standardmäßig verwendet der WordPress Block-Editor die Schriftgröße ‘Mittel’, aber Sie können mit den ‘Typografie’-Einstellungen in den Blockoptionen auf der rechten Seite zwischen klein, groß und extra groß wechseln.

Sie können auch Links hinzufügen oder Standard-Textformatierungsoptionen wie Fett und Kursiv verwenden. Dies macht Ihre Listen auf einen Blick leichter zu erfassen und zu verstehen.

So erstellen Sie eine nummerierte Liste in WordPress

Um eine nummerierte Liste in WordPress zu erstellen, drücken Sie einfach die Taste „1“ auf Ihrer Tastatur, gefolgt von einem Punkt (.)

WordPress wandelt diesen Text automatisch in das erste Element einer nummerierten Liste um.

Sie sind nun bereit, das erste Element der nummerierten Liste einzugeben.

Drücken Sie danach einfach die 'Return'-Taste auf Ihrer Tastatur, und WordPress erstellt automatisch den nächsten nummerierten Punkt.

Genau wie bei Aufzählungszeichen können Sie verschachtelte Listen erstellen, indem Sie auf die Schaltflächen „Einrücken“ und „Ausrücken“ klicken.

Dies erstellt einen eingerückten Aufzählungspunkt unter dem nummerierten Aufzählungspunkt.

Im Gegensatz zu Aufzählungslisten können Sie nur eine einzige Einrückungsebene verwenden.

Wenn Sie mit dem Aussehen der Liste zufrieden sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um sie auf Ihrer WordPress-Website live zu schalten.

Methode 2: Verwendung von Shortcodes Ultimate (Listen mit benutzerdefinierten Symbolen)

Der integrierte Listenblock eignet sich perfekt zum Erstellen von textbasierten Listen, aber manchmal möchten Sie vielleicht eine Liste mit benutzerdefinierten Symbolen erstellen. Auf diese Weise können Sie Ihre Listen optisch ansprechender gestalten und besser an Ihr Inhaltsthema anpassen.

Der einfachste Weg, dies zu tun, ist die Verwendung von Shortcodes Ultimate. Dieses Plugin ermöglicht es Ihnen, Listen mit benutzerdefinierten Symbolen mithilfe einfacher Shortcodes zu erstellen.

Dazu verwenden wir die kostenlose Version des Plugins, da diese für diese Methode bereits ausreicht. Wenn Sie jedoch erweiterte Funktionen wünschen, können Sie auf einen kostenpflichtigen Plan upgraden.

Um Shortcodes Ultimate zu verwenden, installieren Sie das WordPress-Plugin in Ihrem Admin-Bereich. Erstellen Sie danach einen neuen Beitrag oder bearbeiten Sie einen vorhandenen im Block-Editor.

Klicken Sie nun auf die Schaltfläche „+“ irgendwo auf der Seite und wählen Sie den Block „Shortcode“ aus.

Fügen Sie zu diesem Zeitpunkt den folgenden Shortcode in den Block ein:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Dieser Shortcode zeigt drei Aufzählungspunkte mit gelben Stern-Icons an, wie folgt:

Um das Symbol und die Farbe anzupassen, können Sie die Fork Awesome-Website besuchen. Hier sehen Sie alle Symbole, die Sie für Ihre Aufzählungslisten verwenden können. Suchen Sie hier einfach nach einem Symbol, das Sie verwenden möchten.

Zum Beispiel verwenden wir das Icon 'flag'. Kopieren Sie nun den Namen des Icons und kehren Sie zum Block-Editor zurück.

Ersetzen Sie dort einfach star durch diesen. Anstatt also icon: star, verwenden wir icon: flag.

Um die Farbe zu ändern, ersetzen Sie den HEX-Code in icon_color="#ffde0f" durch den HEX-Code Ihrer gewünschten Farbe.

Wenn Sie das Symbol grün machen möchten, müssen Sie icon_color="#008000" eingeben. Weitere Informationen zum Finden der richtigen Farben finden Sie in unserem Artikel So wählen Sie ein perfektes Farbschema für Ihre WordPress-Website.

Ersetzen Sie nun Listenelement durch Ihren eigenen Text.

So sieht unser Code jetzt aus:

Wenn Sie mit dem Aussehen der Liste zufrieden sind, können Sie entweder auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“ klicken, um sie auf Ihrem WordPress-Blog oder Ihrer Website live zu schalten.

So sieht die Liste im Frontend aus:

Methode 3: Verwendung eines Page-Builder-Plugins (am besten für Landingpages)

Wenn Sie schöne Listen mit benutzerdefiniertem Styling erstellen möchten, sollten Sie SeedProd verwenden.

Dieses fortschrittliche WordPress-Theme und Page-Builder-Plugin ermöglicht es Ihnen, professionell gestaltete Seiten mit einem einfachen Drag-and-Drop-Editor zu erstellen.

Es wird auch mit einem fertigen Listenblock geliefert, mit dem Sie jeden Teil des Listendesigns feinabstimmen können, einschließlich der Änderung des Abstands zwischen einzelnen Elementen, dem Ersetzen der Standardaufzählungszeichen durch benutzerdefinierte Symbole und mehr.

Außerdem ist es einfach, eigenständige Seiten mit einem einzigartigen Design zu erstellen. Dies ist also auch eine großartige Wahl, wenn Sie Listen zu einer benutzerdefinierten Homepage oder Landingpage hinzufügen möchten.

Wir haben das Tool gründlich getestet und festgestellt, dass es sehr anfängerfreundlich ist. Weitere Informationen finden Sie in unserem SeedProd-Testbericht.

Das erste, was Sie tun müssen, ist, SeedProd zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie Ihren Lizenzschlüssel eingeben.

Sie finden diese Informationen in Ihrem Konto auf der SeedProd-Website. Nachdem Sie den Lizenzschlüssel hinzugefügt haben, klicken Sie einfach auf 'Schlüssel überprüfen'.

Wählen Sie eine professionell gestaltete Vorlage

Gehen Sie danach zu SeedProd » Landing Pages und klicken Sie auf 'Neue Landing Page hinzufügen'.

Auf dem nächsten Bildschirm werden Sie aufgefordert, eine Vorlage auszuwählen.

SeedProd bietet über 300 wunderschöne Vorlagen, die in verschiedene Kategorien unterteilt sind, wie z. B. 404-Seiten-Vorlagen und benutzerdefinierte WooCommerce 'Danke'-Seiten.

Klicken Sie einfach auf eine Registerkarte, um die verschiedenen Vorlagen innerhalb dieser Kategorie anzuzeigen.

Wenn Sie eine Vorlage finden, die Sie verwenden möchten, bewegen Sie die Maus darüber und klicken Sie dann auf das Häkchen-Symbol.

Wir verwenden die Vorlage „Explosive Growth Webinar“ in all unseren Bildern, aber Sie können jedes Design verwenden, das Sie möchten.

Als Nächstes müssen Sie der Seite einen Titel geben.

SeedProd erstellt automatisch eine URL basierend auf dem Seitentitel, aber Sie können diese in alles ändern, was Sie möchten. Zum Beispiel verbessert das Hinzufügen relevanter Schlüsselwörter zu einer URL oft Ihre WordPress SEO und hilft der Seite, in relevanten Suchergebnissen zu erscheinen.

Um mehr zu erfahren, lesen Sie bitte unseren Leitfaden zum Thema Keyword-Recherche für Ihren WordPress-Blog.

Wenn Sie mit dem Titel und der URL zufrieden sind, klicken Sie einfach auf ‘Speichern und Seite bearbeiten’.

Erstellen Sie Ihr benutzerdefiniertes Seitenlayout

SeedProd öffnet nun Ihre Vorlage in seinem Drag-and-Drop-Editor. Rechts sehen Sie eine Live-Vorschau des Seitenlayouts mit einigen Einstellungen auf der linken Seite.

SeedProd bietet viele Blöcke, die Sie Ihrem Design hinzufügen können, einschließlich Blöcken, die es Ihnen ermöglichen, Social-Share-Buttons, Videos, Kontaktformulare und mehr hinzuzufügen.

Weitere Informationen finden Sie in unserem Leitfaden zum Thema Erstellen einer benutzerdefinierten Seite in WordPress.

Um eine Liste zu Ihrem Design hinzuzufügen, suchen Sie den Block 'Liste' und ziehen Sie ihn auf die Seite.

Dies fügt Ihrer Seite eine vertikale Liste mit dem Platzhalter „Element 1“ hinzu.

Wenn Sie stattdessen eine horizontale Liste erstellen möchten, klicken Sie auf die Registerkarte 'Erweitert' und wählen Sie dann die Schaltfläche 'Horizontal'.

Sie sind nun bereit, Ihre Liste zu erstellen, indem Sie die Registerkarte 'Inhalt' auswählen.

Um den Standardtext durch Ihre eigene Nachricht zu ersetzen, klicken Sie im linken Menü auf 'Element 1'.

Sie können nun Ihren Listenpunkt in den kleinen Texteditor eingeben, der erscheint.

Hier können Sie auch beliebige Formatierungen anwenden, die Sie verwenden möchten, wie z. B. Fett oder Kursiv.

Standardmäßig verwendet SeedProd ein Häkchen für jeden Aufzählungspunkt, verfügt aber über eine integrierte Bibliothek von Icon-Schriftarten, die 1400 Font Awesome-Icons enthält, die Sie stattdessen verwenden können.

Um das Häkchen zu ersetzen, bewegen Sie einfach die Maus darüber und klicken Sie dann auf 'Symbolbibliothek', wenn es erscheint.

Dies öffnet ein Popup, in dem Sie das gewünschte Icon auswählen können.

Sie können für einzelne Aufzählungspunkte innerhalb der Liste unterschiedliche Symbole verwenden, sodass dies eine großartige Möglichkeit ist, interessantere und auffälligere Listen zu erstellen.

Um weitere Aufzählungspunkte zu erstellen, klicken Sie einfach auf die Schaltfläche 'Neues Element hinzufügen'.

Sie können nun Text hinzufügen und das Standardsymbol ändern, indem Sie denselben Prozess wie oben beschrieben befolgen.

Nachdem Sie alle Elemente zu Ihrer Liste hinzugefügt haben, können Sie die Schriftgröße und Ausrichtung über die Einstellungen im linken Menü ändern.

Sie können auch den Abstand zwischen den einzelnen Listenelementen mit dem Schieberegler 'Abstand' vergrößern oder verkleinern.

Danach möchten Sie vielleicht die Farbe der Icons in der Liste ändern. Selbst wenn Sie verschiedene Icons verwenden, wendet SeedProd die gleiche Farbe auf jedes Element an, sodass das Design immer konsistent aussieht.

Um diese Änderung vorzunehmen, klicken Sie auf den Bereich „Icon Color“ und wählen Sie dann eine neue Farbe aus dem erscheinenden Popup aus.

Wenn das erledigt ist, möchten Sie vielleicht auf ‘Erweitert’ klicken und einige zusätzliche Einstellungen ansehen. Wir haben bereits gesehen, wie Sie zwischen vertikalen und horizontalen Listenlayouts wechseln können, aber Sie können auch die Textfarbe und Schriftart ändern.

Um Ihre Liste wirklich hervorzuheben, können Sie sogar einen Box-Schatten oder CSS-Animationen hinzufügen.

Die meisten Einstellungen im Tab „Erweitert“ sind ziemlich selbsterklärend, daher lohnt es sich, sie zu erkunden, um zu sehen, welche Effekte Sie erzielen können.

Wenn Sie damit fertig sind, können Sie mit der Gestaltung Ihrer Seite fortfahren, indem Sie weitere Blöcke hinzufügen und diese dann mit den Einstellungen im linken Menü anpassen.

Wenn Sie mit dem Aussehen der Seite zufrieden sind, klicken Sie einfach auf das Dropdown-Menü der Schaltfläche „Speichern“ und wählen Sie „Veröffentlichen“.

Sie können diese Seite jetzt besuchen, um die Liste live in Ihrem Online-Shop oder Ihrer Website anzuzeigen.

Methode 4: Verwenden von Code zum Hinzufügen von Aufzählungszeichen und nummerierten Listen (Fortgeschritten)

Sie können auch Listen mit dem integrierten WordPress-Code-Editor und HTML erstellen.

Dies ist komplizierter und daher nicht die beste Methode für Anfänger. Es ermöglicht Ihnen jedoch, mehr Stile und Formatierungen im integrierten Listenblock zu verwenden. Sie können beispielsweise schnell und einfach Überschriftenstile zu Listenelementen hinzufügen, indem Sie Tags wie h1 und h2 verwenden.

Weitere Informationen zu diesem Thema finden Sie in unserem Leitfaden zum Bearbeiten von HTML im WordPress Code-Editor.

Um zu beginnen, öffnen Sie die Seite oder den Beitrag, auf der Sie die Liste anzeigen möchten. Klicken Sie dann auf das Symbol mit den drei Punkten in der oberen rechten Ecke und wählen Sie „Code-Editor“.

Die nächsten Schritte variieren je nachdem, ob Sie eine Aufzählungsliste oder eine nummerierte Liste hinzufügen möchten.

So erstellen Sie eine Aufzählungsliste mit Code

Um eine Aufzählungsliste zu erstellen, beginnen Sie mit der Eingabe von Folgendem:

<!-- wp:list -->
<ul>

ul steht für 'unordered list' (unsortierte Liste), was bedeutet, dass die Liste keine Nummern hat, und wp:list teilt WordPress mit, dass Sie manuell einen Listenblock erstellen.

Drücken Sie als Nächstes die 'Return'-Taste, um zur nächsten Zeile zu gelangen und Ihr erstes Listenelement zu erstellen:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Hier steht li für 'list item' (Listenelement), und wir schließen die Zeile mit /li.

Sie können diesen Vorgang wiederholen, um weitere Listenelemente zu erstellen. Zum Beispiel:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Wenn Sie fertig sind, schließen Sie den Codeblock mit einem weiteren Flag für 'ungeordnete Liste':

</ul>
<!-- /wp:list -->

Dies ergibt den folgenden Listen-Code:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Wie Sie im folgenden Bild sehen können, erstellt dies eine sehr einfache Liste, aber Sie können sie anpassen, indem Sie andere HTML-Elemente hinzufügen, wie z. B. Überschriften-Tags.

So erstellen Sie eine nummerierte Liste mit Code

Um eine nummerierte Liste zu erstellen, geben Sie einfach Folgendes ein:

<!-- wp:list {"ordered":true} -->

Sie können dann ol eingeben, was für „ordered list“ (nummerierte Liste) steht:

<!-- wp:list {"ordered":true} -->
<ol>

Fügen Sie danach jedes Listenelement hinzu, indem Sie dem gleichen oben beschriebenen Prozess folgen:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Schließen Sie schließlich die geordnete Liste mit einem /ol-Tag und wp:list ab.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie Aufzählungszeichen und nummerierte Listen in WordPress hinzufügen. Möglicherweise möchten Sie auch lernen, wie Sie Zusammenarbeit im WordPress-Block-Editor hinzufügen und unsere Expertenauswahl der besten Gutenberg-Block-Plugins für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.