Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man einzelne Kategorien in WordPress unterschiedlich gestaltet

Wollten Sie schon immer Ihre WordPress Kategorien auffallen lassen? Vielleicht möchten Sie, dass Ihr Abschnitt „News“ anders aussieht als Ihre Kategorien „Tutorials“ oder „Reviews“.

Um ehrlich zu sein, ist die unterschiedliche Gestaltung von Kategorien für die meisten Blogs kein dringendes Problem. Wir machen das bei WPBeginner nicht einmal selbst.

Aber wir wissen, dass jeder Blog seine eigenen Bedürfnisse hat und wie wichtig es ist, die Besucher zu begeistern. Und bei manchen Websites können unterschiedliche Stile und Funktionen für jede Kategorie-Seite den Besuchern helfen, den Inhalt leichter zu finden.

Die gute Nachricht ist, dass die individuelle Gestaltung von Seiten für Kategorien eigentlich ziemlich einfach ist. Wir haben mehrere codefreie Möglichkeiten dafür entwickelt: mit dem vollständigen Website-Editor, einem Page-Builder und einem visuellen CSS-Editor.

How to Style Individual Categories Differently in WordPress

Wann Sie Ihre WordPress-Kategorieseiten anders gestalten sollten

Es ist zwar nicht für jede WordPress Website notwendig, aber es gibt einige Situationen, in denen individuelle Kategorien die Erfahrung Ihrer Besucher wirklich verbessern können.

Wenn die Themen Ihrer WordPress-Beiträge sehr unterschiedlich sind, sollten Sie die einzelnen Kategorien individuell gestalten.

Wenn Ihr WordPress-Blog zum Beispiel sowohl Nachrichten als auch Anleitungen enthält, können Sie diese Kategorien unterschiedlich gestalten. So wissen die Besucher sofort, welche Art von Inhalt sie vor sich haben.

Oder nehmen Sie eine Website mit Bewertungen. Sie könnten eine einzelne Kategorie für Produktbewertungen anders gestalten als Ihre Vergleichskategorie. Das macht es den Besuchern leichter, auf Ihrer WordPress Website zu finden, was sie suchen.

Einige Websites möchten vielleicht auch bestimmte Kategorien auffälliger gestalten, um ihre Bedeutung zu unterstreichen. Auf einer Website mit Nachrichten möchten Sie vielleicht die Kategorie „Eilmeldung“ im Vergleich zu den normalen Kategorien in WordPress auffälliger gestalten.

Denken Sie daran, dass der Hauptgrund, Kategorien in WordPress anders zu gestalten, darin besteht, Ihre Website benutzerfreundlicher zu gestalten. Wenn Sie der Meinung sind, dass Ihre Besucher dadurch schneller finden, was sie suchen, ist das vielleicht eine gute Idee.

In diesem Sinne wollen wir uns 3 Möglichkeiten ansehen, wie man einzelne Kategorien in WordPress gestalten kann. Sie können die Links unten verwenden, um zu Ihrer bevorzugten Methode zu gelangen:

Methode 1: Verwenden Sie einen Page-Builder, um Kategorieseiten zu gestalten (individuelle Themes)

Wenn Sie bereit sind, Themes zu wechseln oder ein individuelles WordPress-Theme von Grund auf zu erstellen, dann kann die Verwendung eines Page-Builders eine hervorragende Möglichkeit sein, Kategorien in WordPress zu gestalten.

Diese Methode ist ideal für diejenigen, die mehr Kontrolle über das Design ihrer Website wünschen und mit Werkzeugen von Drittanbietern vertraut sind.

Nach dem Testen verschiedener Optionen haben wir festgestellt, dass Thrive Architect einer der besten Page-Builder für die Gestaltung einzelner Kategorien ist.

Es bietet eine benutzerfreundliche Drag-and-drop-Oberfläche, mit der Sie individuelle Kategorien erstellen und sie ohne Programmierkenntnisse individuell gestalten können. Sie können mehr über das Plugin in unserem Thrive Architect Testbericht erfahren.

Es ist jedoch wichtig zu wissen, dass dieser Ansatz nicht für jeden geeignet ist.

Wenn Sie mit Ihrem aktuellen WordPress-Theme zufrieden sind und nicht wechseln möchten, sollten Sie vielleicht Methode 2 mit dem vollständigen Website-Editor oder Methode 3 mit dem visuellen CSS-Editor in Betracht ziehen (auf die wir später noch eingehen werden).

Wenn Sie jedoch Ihr Theme ändern möchten, empfehlen wir Ihnen, unseren Leitfaden zum richtigen Ändern von WordPress Themes zu lesen.

Eine weitere Sache zu beachten ist, dass Thrive Architect keine kostenlose Version hat. Aber Sie können unseren Thrive Themes-Gutscheincode verwenden, um bis zu 50% Rabatt auf Ihren ersten Kauf zu erhalten.

Schritt 1: Thrive Architectinstallieren

Beginnen wir damit, Thrive Architect einzurichten. Nachdem Sie einen Plan gekauft haben, können Sie sich auf der Thrive Themes-Website anmelden.

Dort finden Sie das Thrive Product Manager Plugin. Laden Sie die Datei einfach herunter und installieren Sie sie in Ihrem WordPress-Admin. Wenn Sie nicht sicher sind, wie das geht, lesen Sie unseren Leitfaden zur Installation von WordPress Plugins für Anfänger.

Install Thrive Product Manager

Sobald Sie das Plugin aktiviert haben, öffnen Sie den Menüpunkt Produktmanager in Ihrem WordPress-Dashboard.

Klicken Sie auf „Bei meinem Konto anmelden“, um Ihre WordPress Website mit Ihrem Thrive Themes Konto zu verbinden.

Log into your Thrive Themes account

Jetzt sollten Sie eine Liste der Thrive Themes Produkte sehen, die Sie verwenden können.

Suchen Sie „Thrive Architect“ und aktivieren Sie die Box neben „Produkt installieren“.

Installing Thrive Architect

Scrollen Sie nach unten, bis Sie „Thrive Theme Builder“ sehen, und wählen Sie die Option „Theme installieren“.

Klicken Sie dann auf „Ausgewählte Produkte installieren“. Wir müssen dies tun, weil Thrive Architect mit Thrive Theme Builder zusammenarbeitet.

Installing the Thrive Theme Builder

Die nächste Seite zeigt den Thrive Product Manager, der Thrive Architect und Thrive Theme Builder einrichtet.

Klicken Sie anschließend auf den Button „Zum Theme Builder Dashboard“.

Activating Thrive Architect and Thrive Theme Builder

Jetzt ist es an der Zeit, ein Startdesign für Ihre Website aus der Theme-Sammlung von Thrive auszuwählen.

Wenn Sie sich nicht sicher sind, welches Sie wählen sollen, klicken Sie einfach auf den Button „Vorschau“, um zu sehen, wie die einzelnen Themes aussehen. Wenn Sie ein Thema gefunden haben, das Ihnen gefällt, klicken Sie auf „Auswählen“.

Choosing a Thrive Theme Builder theme

Als Nächstes starten Sie den Theme Builder Wizard. Dieser Assistent hilft Ihnen, Ihr Logo hinzuzufügen, Ihre Markenfarben auszuwählen und verschiedene Teile Ihres Themes einzurichten.

Vergewissern Sie sich, dass Sie den Einrichtungsassistenten abgeschlossen haben, bevor Sie mit dem nächsten Schritt fortfahren.

Thrive Theme Builder's setup wizard

Schritt 2: Erstellen einer Kategorie Archiv-Vorlage

Nachdem Sie Ihr Theme eingerichtet haben, wechseln wir zum Tab „Templates“. Hier sehen Sie die Standard-Templates, die von Ihrem Theme für die Gestaltung Ihrer Seiten verwendet werden. In diesem Fall heißt das Template für die Archive der Kategorien „Alle Archive“.

Da wir einzelne Kategorien in WordPress gestalten wollen, müssen wir zunächst ein neues Template für das Archiv der Kategorien erstellen. Klicken Sie dazu auf „+ Neu hinzufügen“.

Adding a new template in Thrive Architect

Es erscheint ein neues Popup-Fenster. Geben Sie zunächst den Namen Ihres neuen Templates für die Kategorie ein. Sie können etwas Einfaches verwenden und den Namen der Kategorie dort einfügen.

Darunter wählen Sie ‚Liste‘, da wir eine Seite erstellen wollen, auf der alle Beiträge einer bestimmten Kategorie veröffentlicht werden.

Wählen Sie unter Listentyp die Option „Archive“ und unter „Archivtyp“ die Option „Kategorien“.

Wählen Sie im Feld Definiert für den Namen der Kategorie, für die Sie das Template erstellen möchten. Für das Beispiel haben wir „Blogging“ gewählt.

Am Ende können Sie entweder „Neu beginnen“ oder „Template auswählen“ wählen.

Creating a new category template in Thrive Architect

Wir werden uns für die zweite Option entscheiden, da viele der gebrauchsfertigen Templates von Thrive Themes bereits gut designt sind.

Im nächsten Popup können Sie eines der verfügbaren Templates auswählen. Zur Veranschaulichung wählen wir „Raster-Layout – Hervorgehobene Beiträge“.

Wenn Sie Ihre Auswahl getroffen haben, klicken Sie auf den Button ‚Template erstellen‘.

Choosing a template layout in Thrive Architect

Ihre neue Template sollte nun der Liste der Templates hinzugefügt werden.

Bewegen Sie den Mauszeigerkontakt darüber und klicken Sie auf „Bearbeiten“, um es individuell anzupassen.

Editing a category template in Thrive Architect

Schritt 3: Passen Sie Ihre Kategorie Template Seite individuell an

Thrive Architect bietet eine Vielzahl von Möglichkeiten, Ihre Seite individuell anzupassen.

Er funktioniert ähnlich wie der Block-Editor: Sie können Elemente per Drag-and-drop auf Ihre Seite ziehen, ein Element zum Anpassen auswählen und loslegen. Der Unterschied besteht darin, dass es viel mehr Optionen zur individuellen Anpassung gibt, mit denen Sie herumspielen können.

The Thrive Architect page builder

Schauen wir uns ein Beispiel an. In unserem Template für das Archiv einer Kategorie befindet sich ein großer hervorgehobener Beitrag ganz oben, während die übrigen Beiträge der gleichen Kategorie darunter zu finden sind. Standardmäßig ist der hervorgehobene Beitrag der letzte Beitrag, der in dieser Kategorie veröffentlicht wurde.

Wenn Sie das Layout dieses Elements ändern möchten, klicken Sie auf das Element „Hervorgehobene Liste 01“. Klicken Sie dann auf den externen Icon Button oben in der linken Seitenleiste.

Changing the featured post design in Thrive Architect

Es erscheint ein Popup, in dem Sie aufgefordert werden, ein anderes Design für die hervorgehobenen Beiträge zu wählen.

Es stehen mehrere zur Auswahl, und Sie können sie jederzeit wieder ändern, wenn Sie mit Ihrer aktuellen Auswahl nicht zufrieden sind. Klicken Sie einfach auf Ihr gewünschtes Layout, und Thrive Architect wird es automatisch in Ihr Template für die Seite implementieren.

Choosing a featured post design in Thrive Architect

Das Gleiche können Sie auch mit der Liste der unten veröffentlichten Beiträge tun.

Wählen Sie einfach das Element „Blog-Liste“ aus. Danach klicken Sie auf das externe Symbol oben in der linken Seitenleiste. Dort finden Sie weitere Templates, mit denen Sie Ihre Liste der Beiträge wie zuvor anzeigen können.

Choosing a category list design in Thrive Architect

Wenn Sie das Design der Kategorienliste weiter verändern möchten, scrollen Sie in der Seitenleiste nach unten.

Dort finden Sie Funktionen zum Ändern des Anzeigetyps (z. B. Karussell), zum Deaktivieren der hervorgehobenen Beiträge, zum Umschalten der Seitennummerierung (z. B. von numerisch auf ‚Mehr laden‘), zum Erhöhen/Verringern der Anzahl der veröffentlichten Beiträge und vieles mehr.

Configuring the blog list block in Thrive Architect

Sie können auch andere Elemente hinzufügen, z. B. eine große Überschrift, um den Besuchern mitzuteilen, auf welcher Kategorie Seite sie sich befinden, und eine Beschreibung dazu.

Klicken Sie dazu auf den Button „+“ auf der rechten Seite des Builders. Wählen Sie dann das Element „Text“ aus und fügen Sie es dort ein, wo es am besten für die Seite passt.

Adding a text block in Thrive Architect

Klicken Sie im Textelement auf das Symbol für dynamischen Text ganz rechts in der Werkzeugleiste für den Text. Wählen Sie anschließend im Feld „Dynamischer Text“ die Option „Archiv“ und im Feld darunter „Archivname“.

Klicken Sie nun auf „Einfügen“. Thrive Architect fügt dann den Namen Ihrer Kategorie hinzu. Da diese Funktion dynamische Inhalte hinzufügt, wird der Name der Kategorie automatisch angepasst, wenn Sie ihn in der Zukunft ändern.

Von hier aus können Sie den Stil, das Format, die Ausrichtung und vieles mehr des Textes ändern.

Adding dynamic text in Thrive Architect

Um die Beschreibung der Kategorie hinzuzufügen, klicken Sie einfach erneut auf den ‚+‘ Button.

Wählen Sie anschließend das Element „Beschreibung der Begriffe der Taxonomie“.

Adding a taxonomy term description in Thrive Architect

Wenn Sie Ihrer Kategorie im WordPress-Admin “ Beiträge “ Kategorien eine Beschreibung hinzugefügt haben, dann sollte diese hier automatisch erscheinen.

Andernfalls können Sie zu dieser Seite zurückgehen und sie später aktualisieren. Weitere Informationen finden Sie in unserem Tutorial über die Anzeige von Kategorie-Beschreibungen in WordPress.

Taxonomy term description block example in Thrive Architect

Das Tolle an der unterschiedlichen Gestaltung Ihrer Kategorien in WordPress ist, dass Sie verschiedene Elemente hinzufügen können, die speziell auf die einzelnen Kategorien zugeschnitten sind.

Wenn Sie z. B. einen Leadmagneten oder ein Opt-in-Formular haben, das nur für ein bestimmtes Thema geeignet ist, dann ist das Hinzufügen zu dieser Kategorie-Seite eine gute Möglichkeit, interessierte Besucher anzusprechen.

Zum Glück gibt es in Thrive Architect Blöcke speziell für diesen Zweck.

Sie können zum Beispiel auf den „+“-Button klicken und das „Call to Action“-Element an beliebiger Stelle auf Ihrer Seite einfügen. Das ist eine hervorragende Taktik, um eine lange Liste von Beiträgen auf einer Kategorie-Seite aufzulockern.

Adding a call-to-action element in Thrive Architect

Von hier aus können Sie ein Template für die Aufforderung zum Handeln auswählen.

Wenn Ihnen keins der vorhandenen Designs gefällt, können Sie dasjenige auswählen, das Ihnen am besten gefällt, und den Stil später ändern.

Choosing a call-to-action element in Thrive Architect

Jetzt können Sie den Text der Call-to-Action-Elemente ändern.

Um die Ziel-URL für den Call-to-Action-Button hinzuzufügen, klicken Sie einfach auf den Button selbst. Fügen Sie dann die URL ein und wählen Sie, ob sie in einem neuen Tab geöffnet werden soll und ob sie nofollow sein soll.

Adding a target URL to the call-to-action element in Thrive Architect

Danach können Sie das Call-to-Action-Element weiter verändern, indem Sie die Typografie anpassen, eine Hintergrundfarbe hinzufügen, Animationen einfügen usw.

Wenn Sie mit dem Aussehen der Kategorie-Seite zufrieden sind, klicken Sie auf „Arbeit speichern“.

Saving your work in Thrive Architect

Wenn Ihre Kategorie-Seite fertig ist, können Sie nun eine Vorschau Ihrer Website auf dem Handy, dem Desktop oder dem Tablet anzeigen, um sicherzustellen, dass alles gut aussieht.

Dann können Sie entweder die gleichen Schritte wie zuvor wiederholen, um einzelne Seiten für Kategorien mit ihren eigenen Stilen zu erstellen. Oder Sie gestalten nur Ihre Hauptkategorien und lassen den Rest das Standard Template für das Kategorie Archiv von Thrive Themes verwenden.

So sieht unsere Website auf unserer Demo-Website aus:

Blogging category page example in Thrive Architect

Methode 2: Verwenden Sie den vollständigen Website-Editor zur Gestaltung von Kategorieseiten (Block-Themes)

Diese zweite Methode ist für Benutzer von Block-Themes gedacht. Der vollständige Website-Editor bietet eine einfache Möglichkeit, ein individuelles WordPress-Template für Seiten von Kategorie-Archiven zu erstellen und einzelne Kategorien unterschiedlich zu gestalten.

Das Gute an dieser Methode ist, dass sie kein Plugin benötigt. Stellen Sie jedoch sicher, dass Sie mit den Optionen zur individuellen Anpassung Ihres WordPress-Themes und des Editors für die gesamte Website zufrieden sind, denn das ist alles, womit Sie arbeiten werden.

Öffnen Sie zunächst den vollständigen Website-Editor, indem Sie in Ihrem WordPress-Admin auf Design „ Editor gehen.

Selecting the Full-Site Editor from the WordPress admin panel

Sie sehen nun die wichtigsten Einstellungen, mit denen Sie Ihr Block-Theme individuell anpassen können.

Um eine individuelle Kategorie-Vorlage zu erstellen, klicken Sie auf ‚Templates‘.

Choosing the Templates menu in FSE

Nun sehen Sie mehrere Standard-Templates, die Ihr Theme anbietet. Diese variieren je nach WordPress-Theme, aber in der Regel enthält ein Theme ein Template, das für alle Seiten Ihres Kategorie-Archivs verwendet wird. Der Entwickler des Themes gibt in der Beschreibung an, welche das ist.

In unserem Fall heißt die Standard-Vorlage für Seiten mit Kategorien-Archiven „Alle Archive“. Neben Kategorien wird diese Vorlage auch für andere Arten von Archiven wie Schlagwörter, individuelle Taxonomien, individuelle Inhaltstypen und so weiter verwendet.

Um ein neues Template für die Seiten Ihres Kategorie Archivs zu erstellen, klicken Sie auf ‚Neues Template hinzufügen‘ in der oberen rechten Ecke.

Adding a new template in FSE

Es erscheint nun ein Popup-Fenster, in dem Sie auswählen können, welche Art von Template Sie erstellen möchten.

Wählen Sie hier einfach ‚Kategorie Archive‘.

Choosing a type of archive to create a template for in FSE

An dieser Stelle können Sie wählen, ob Sie ein neues individuelles Template für das Archiv aller Kategorien oder nur für eine bestimmte Kategorie erstellen möchten.

Da wir versuchen, die einzelnen Kategorien unterschiedlich zu gestalten, wählen wir ‚Kategorie für einen bestimmten Artikel‘.

Choosing a specific category to create a template for in FSE

Jetzt müssen Sie nur noch die Kategorie auswählen, für die Sie ein Template erstellen möchten.

In diesem Fall wählen wir die Kategorie „Blogging“.

Choosing a category name to create a template for in FSE

Sie gelangen nun in den vollständigen Website-Editor. Es sollte ein Popup-Fenster erscheinen, in dem Sie aufgefordert werden, eine Vorlage für die Seite des Kategorie Archivs zu wählen.

Sie können entweder eine Vorlage auswählen oder diesen Schritt überspringen, wenn Sie ganz von vorne beginnen möchten.

Choosing a block pattern for the category template in FSE

Um ein Beispiel zu geben, fangen wir bei Null an und geben Ihnen Beispiele, wie Sie Ihre Kategorien-Seite in WordPress anders gestalten können.

Wenn Sie nicht ganz bei Null anfangen und andere Vorlagen verwenden wollen, können Sie Folgendes tun.

Sie können auf das schwarze „+“-Zeichen in der oberen linken Ecke klicken, um einen Block hinzuzufügen. Wechseln Sie dann zum Tab „Vorlagen“ und scrollen Sie nach unten zur Option „Beiträge“. Sie sollten nun einige Vorlagen für die Anzeige mehrerer WordPress Beiträge sehen.

Choosing a block pattern in FSE

Wenn Sie mit den Standard Optionen unzufrieden sind, können Sie einfach Ihr eigenes Design erstellen. Mit dem vollständigen Website-Editor ist das ganz einfach, denn im Block-Editor können Sie Blöcke wie gewohnt per Drag-and-drop verschieben.

Wir empfehlen jedoch, zunächst den Gruppenblock zu verwenden, damit Sie Teile des Templates als einen Block verwalten können. Klicken Sie irgendwo auf der Seite auf den Button „+“ und wählen Sie „Gruppieren“.

Adding a group block in FSE

Wählen Sie nun ein Layout für den Gruppenblock aus.

Es stehen vier zur Auswahl, und Sie können diejenige wählen, die für Ihre WordPress Website am besten geeignet ist.

Choosing a layout for a group block in FSE

Wir schlagen vor, dem Gruppenblock zuerst den Block Archiv Titel hinzuzufügen. Dadurch wird automatisch der Titel Ihrer Kategorie angezeigt.

Wenn Sie also den Namen der Kategorie in Zukunft ändern, wird auch der Titel automatisch angepasst. Sie finden ihn, indem Sie irgendwo auf der Seite auf den ‚+‘ Button klicken und ‚Titel archivieren‘ auswählen.

Choosing the archive title block in FSE

Standardmäßig zeigt dieser Block den Titel im Format ‚Archiv-Typ: Archiv-Titel‘.

Sie können jedoch den Archiv-Typ im Titel deaktivieren, indem Sie in der Seitenleiste der Blockeinstellungen den Button ‚Archiv-Typ im Titel anzeigen‘ deaktivieren.

Showing archive type title in FSE

Außerdem sollten Sie einen Block hinzufügen, der alle in der Kategorie veröffentlichten Beiträge anzeigt.

Klicken Sie dazu auf den ‚+‘ Button und wählen Sie ‚Beiträge Liste‘.

Choosing the posts list block in FSE

Nun können Sie wählen, ob Sie ein vorgefertigtes Design verwenden oder mit einem leeren Entwurf beginnen möchten.

Zur Veranschaulichung wird die Option „Leer starten“ verwendet.

Choosing the posts list layout in FSE

In diesem Stadium können Sie ein Layout für die Anzeige der Beiträge wählen.

Es gibt 4 Optionen: Titel & Datum; Titel & Textauszug; Titel, Datum & Textauszug; und Bild, Datum & Titel.

Choosing a layout to display the list of posts in FSE

Wenn Sie sich für ein Layout entschieden haben, sollten Sie nun eine Liste aller von Ihnen veröffentlichten Beiträge sehen.

Sie sollten nun die Beiträge anhand der Kategorie filtern. Wechseln Sie dazu in der Seitenleiste der Blockeinstellungen auf den Tab „Block“. Scrollen Sie dann nach unten zum Abschnitt „Filter“ und klicken Sie auf das Menü mit den drei Punkten.

Wählen Sie hier ‚Taxonomien‘.

Filtering the posts in a specific taxonomy in FSE

Geben Sie einfach den Namen der Kategorie ein, um die Liste der Beiträge im entsprechenden Feld zu filtern.

Achten Sie darauf, dass Sie danach die Eingabetaste drücken.

Filtering the posts in a specific category in FSE

Um die Anzahl der veröffentlichten Beiträge zu ändern, klicken Sie auf den Block „Beitragsliste“ und wählen Sie das Symbol „Einstellungen“.

Jetzt können Sie die Anzahl im Feld „Artikel pro Seite“ ändern.

Change the number of posts displayed in FSE

Um das Design der Seite zu ändern, können Sie einen der Blöcke auf der Seite auswählen. Wechseln Sie dann in der Seitenleiste der Einstellungen auf die Registerkarte „Block“ und navigieren Sie zum Tab „Stil“.

Sie sehen nun die verfügbaren Optionen für die Gestaltung dieses Blocks. Sie können die Textfarbe oder die Farbe des Links ändern, die Schriften ändern, den Innenabstand und den Außenabstand anpassen usw.

The Block styles setting sidebar in FSE

An dieser Stelle können Sie auf der Seite nach unten gehen und den Block „Text oder Blöcke hinzufügen, die angezeigt werden, wenn eine Abfrage keine Ergebnisse liefert“ suchen.

Hier können Sie einen Text eingeben oder Blöcke hinzufügen, die angezeigt werden, wenn in der Kategorie noch keine Beiträge veröffentlicht wurden.

Adding text when there are no results in the category in FSE

Das war’s mit den Grundlagen der Bearbeitung einer Seite mit Kategorien im Editor der Website. Sie können nun weitere Blöcke hinzufügen, um die Seite von den anderen Seiten des Kategorie Archivs zu unterscheiden.

Klicken Sie dann einfach auf „Speichern“.

Danach können Sie die gleichen Schritte wie zuvor wiederholen, um individuelle WordPress-Seiten für alle Ihre Kategorien zu erstellen. Sie können auch nur Ihre Hauptkategorien bearbeiten, und der Rest wird das Standard Archive Template in Ihrem Theme verwenden.

Saving your changes in FSE

Wenn Sie weitere Tipps und Tricks zur Verwendung des Website-Editors wünschen, lesen Sie unseren vollständigen Leitfaden für Einsteiger zur vollständigen Website-Bearbeitung mit WordPress.

Wir empfehlen Ihnen auch, sich unsere Liste der besten Gutenberg-Block Plugins anzuschauen, damit Sie Ihrer Seite für Kategorien viel mehr Elemente hinzufügen können.

So sieht unsere einfache Seite mit den Kategorien aus:

Example of a category page made with FSE

Methode 3: Verwenden Sie CSS Hero zum Gestalten von Seiten mit Kategorien (alle Themes)

Diese dritte Methode wird für Benutzer von klassischen WordPress-Themes empfohlen, aber auch Benutzer von Block-Themes können sie anwenden.

Der Grund dafür ist, dass nicht viele klassische Themes die Option bieten, Ihre Seiten für das Kategorien Archiv individuell zu gestalten. Und wenn Sie die Methode 1 nicht anwenden wollen, dann ist die Alternative die Verwendung von individuellem CSS.

Der Trick bei CSS ist, dass Sie wissen müssen, wie man programmiert. Wenn Sie ein absoluter Anfänger ohne technische Vorkenntnisse sind, ist die Codierung möglicherweise nicht die benutzerfreundlichste Option für Sie.

Zum Glück haben wir eine einfache Möglichkeit gefunden, Ihr Theme mit CSS individuell anzupassen, und zwar ganz ohne Programmierkenntnisse, nämlich mit CSS Hero.

CSS Hero ist ein Plugin, mit dem Sie Ihr bestehendes Theme mit einem visuellen CSS Editor individuell anpassen können. Alles, was Sie tun müssen, ist ein Element auf Ihrer Website auszuwählen, seinen Stil zu ändern, und CSS Hero wird den CSS-Code dieses Elements ändern.

Im Vergleich zu den vorherigen Methoden empfehlen wir die Verwendung von CSS jedoch nur, wenn Sie kleinere Änderungen an Ihren Seiten des Kategorie Archivs vornehmen möchten. Eine Überarbeitung ist zwar möglich, kann aber länger dauern.

Außerdem gibt es keine kostenlose Version des Plugins, aber Sie können unseren CSS Hero-Gutscheincode verwenden, um einen Rabatt von 40% zu erhalten.

Weitere Informationen finden Sie in unserem vollständigen CSS Hero-Test.

Sobald Sie CSS Hero gekauft und heruntergeladen haben, können Sie es in Ihrem WordPress-Admin installieren und aktivieren. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden für Anfänger zur Installation von WordPress Plugins.

Dann sollten Sie einen CSS Hero Button oben in Ihrer Adminleiste sehen. Klicken Sie darauf, um mit der Bearbeitung Ihrer Website zu beginnen.

Opening CSS Hero in WordPress

Der folgende Screenshot zeigt, wie Ihre Seite jetzt aussehen sollte.

Auf der linken Seite befindet sich eine Seitenleiste, in der Sie die einzelnen Elemente auf Ihrer Seite ändern können. Oben finden Sie Buttons, mit denen Sie Ihre Seite auf verschiedenen Geräten anzeigen, in den Modus „Navigieren“ wechseln und Änderungen rückgängig machen können.

Im unteren Bereich können Sie Ihre Arbeit speichern.

The CSS Hero interface

Standardmäßig sehen Sie Ihre Homepage.

Um eine Seite des Kategorie Archivs individuell anzupassen, wechseln Sie vom Modus „Bearbeiten“ in den Modus „Navigieren“ in der oberen rechten Ecke der Seite. Gehen Sie dann zu der Kategorie, die Sie individuell anpassen möchten.

Activating the Navigate mode in CSS Hero

Sobald Sie auf der richtigen Seite sind, können Sie wieder in den Bearbeitungsmodus wechseln.

Um sicherzustellen, dass sich Ihre Änderungen nur auf diese spezielle Seite der Kategorie auswirken und nicht auf die übrigen Seiten, ändern Sie die Einstellung ‚Auswahlmodus‘ auf ‚Kategorie‘.

Changing to Category selection mode in CSS Hero

Nun können Sie ein Element auswählen, das Sie bearbeiten möchten.

In diesem Beispiel haben wir auf die Gruppe der Blöcke geklickt, die den Titel und die Beschreibung der Kategorie anzeigen. Die linke Seitenleiste verfügt nun über Einstellungen zum Ändern dieses Elements.

Selecting a block in CSS Hero

Lassen Sie uns ein Beispiel ausprobieren. Wenn Sie die Hintergrundfarbe ändern möchten, dann klicken Sie auf die Option „Hintergrund“.

Dann können Sie auf das Farbwähler-Symbol klicken und eine Farbe nach Ihrem Geschmack auswählen. Es ist auch möglich, einen Farbverlauf oder ein Bild als Hintergrund hinzuzufügen.

The Background settings in CSS Hero

Da wir eine recht dunkle Farbe gewählt haben, ist der Text jetzt nicht mehr lesbar. Zum Glück können Sie mit CSS auf die einzelnen Textelemente innerhalb dieser Gruppe von Blöcken klicken.

Um die Textfarbe zu ändern, können Sie zur Einstellung „Typografie“ wechseln und die gewünschte Farbe auswählen. Sie können auch die Schriftgröße, die Zeilenhöhe und sogar die Schriftfamilie individuell anpassen.

The Typography settings in CSS Hero

Außerdem können Sie Ihre Elemente mit einem Box-Schatten versehen, damit sie noch besser zur Geltung kommen.

Klicken Sie dazu auf ein beliebiges Element, dem Sie einen Schatten hinzufügen möchten. Navigieren Sie dann zum Tab „Extra“ und klicken Sie auf „Schatten erstellen“.

The Extra settings in CSS Hero

Ziehen Sie nun den Punkt dorthin, wo der Schatten erscheinen soll. Sie werden automatisch einen Schatten unter dem Element sehen.

Anschließend können Sie die Unschärfe, die Verteilung, die Position und die Farbe des Schattens anpassen.

Adjusting a block's shadow settings in CSS Hero

Wenn Sie der Meinung sind, dass die Elemente zu dicht beieinander liegen (als ob Sie Zeilenumbrüche hinzufügen müssten) oder zu weit voneinander entfernt sind, können Sie sie in den Einstellungen für die Leerzeichen“ anpassen.

Hier können Sie die Innenabstände und Außenabstände der einzelnen Elemente ändern, um sie proportionaler zu gestalten.

Adjusting a block's padding and margin in CSS Hero

Es gibt noch viel mehr, was Sie mit CSS Hero machen können. Wenn Sie mehr erfahren möchten, sehen Sie sich diese Anleitungen an:

Wenn Sie mit dem Aussehen der Kategorie-Seite zufrieden sind, klicken Sie einfach auf „Speichern“.

Saving your work in CSS Hero

Das war’s. Jetzt können Sie die gleichen Schritte mit den anderen Seiten der Kategorien wiederholen, damit sie noch einzigartiger aussehen.

Hier ist das Endergebnis unserer Kategorie-Seite, die mit CSS Hero erstellt wurde:

An example of a category archive page made with CSS Hero

Bonus-Tipp: Verwenden Sie ein anderes Theme für bestimmte Seiten einer Kategorie

Möchten Sie das Aussehen einiger Ihrer Kategorien grundlegend verändern? Dann sollten Sie für bestimmte Kategorien ein völlig anderes Theme verwenden.

Dies kann sehr nützlich sein, wenn Sie möchten, dass eine Gruppe von Kategorien-Seiten gleich aussehen, sich aber von allen anderen unterscheiden.

Beachten Sie jedoch, dass Sie nicht jede Kategorie gestalten können. Stattdessen erstellen Sie zwei unterschiedliche Looks für Ihre Website.

Das gibt Ihnen zwar viel Spielraum für Veränderungen, aber Sie sollten dennoch darauf achten, dass Ihre Website einigermaßen einheitlich aussieht. Auch wenn einige Kategorien anders aussehen, sollten Sie versuchen, einige gemeinsame Elemente beizubehalten.

Dies trägt dazu bei, dass sich Besucher auf Ihrer Website wohlfühlen. Sie können Ihre WordPress Website ansprechend und benutzerfreundlich gestalten, indem Sie ein Gleichgewicht zwischen einzigartigen Designs und Konsistenz finden.

Weitere Einzelheiten dazu finden Sie in unserem Leitfaden zur Verwendung mehrerer Themes auf Ihrer WordPress-Website.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie einzelne Kategorien in WordPress anders gestalten können. Vielleicht möchten Sie auch unsere Expertenauswahl der besten WordPress Theme-Builder und unseren ultimativen Leitfaden zum Bearbeiten einer WordPress-Website lesen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

10 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. ofir

    is it possible to change style of all the post under the category and not just the category archive page, with the css option ?

    i want to display:none of an element only on specific category pages

    • WPBeginner Support

      It is possible but you would need to add some code for adding the category target to posts as that is not a default addition from WordPress.

      Admin

  3. Caroline

    Thanks for your article!

    Let say I want to style all posts in category „Reviews“ but only the child-categories in reviews are selected for the post.

    How can I style all the child categories in the category Review?

    • WPBeginner Support

      For what it sounds like you’re wanting, you would want to target the individual subcategories.

      Admin

      • Caroline

        Yes that’s correct! Is it possible?

        • WPBeginner Support

          Apologies for the confusion by what we meant, we would mean following this guide for each of the subcategories and if you wanted to have the subcategories grouped you can add a comma for the CSS to affect an additional target.

  4. Caroline

    Hello,

    thank you for the article.
    What is going on if an article belongs to two or more categories ?

    Carosch

    • AB

      The question is how to assign a custom category template layout from the admin dashboard to multiple other categories.

      for example I’ve created a template called Category-grid.php . how do assign it to multiple categories in my wordpress ?

  5. Kat S.

    Fantastic Article!

    I am a Wordpress newbie and have been trying to figure out a way to do exactly this. I did run into some problems when following your steps though. Our Wp site is set up on a Windows server running iis 7, so I do not know if that is causing my issue, but I’m sure the issue is on my end, not with your instructions.

    I tried both methods; copying category.php to a new php file named after one of my categories, and CSS. CSS worked like a charm, but with the first method, I received an error telling me that a call to a certain function in the original php category file was duplicated in my custom category file. I created the new php file in my child theme directory (I am using Avada). The original category.php was also not found in the location you mention, but in the wp-includes folder. My blog page has been working fine though; and so have my categories. Not sure how to deal with this as there was SO much coding in the original category php file; I have no idea what, if anything, I should have deleted from my custom category php file.

    A lot of information I know. Many thanks for responding if you have further suggestions.

    Love this site!

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.