Letzte SeedProd Nachrichten

WordPress-Tutorials, -Tipps und -Ressourcen für das Wachstum Ihres Unternehmens

Wie man das Blog-Layout in WordPress ändert

Wie man das Blog-Layout in WordPress ändert (+ unsere Design-Tipps) 

Geschrieben von: Autorenavatar Stacey Corrin
Autorenavatar Stacey Corrin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.
     Bewertet von: Gutachter-Avatar John Turner
Gutachter-Avatar John Turner
John Turner ist der Gründer von SeedProd. Er ist Unternehmer, Web-Entwickler, Marketer, SysAdmin, DBA, Support-Techniker und kann sogar kochen.

Sie möchten wissen, wie Sie das Blog-Layout in WordPress ändern können?

Das Design Ihres Blogs spielt eine wichtige Rolle bei der Verbesserung der Benutzerfreundlichkeit und des Erscheinungsbildes Ihrer Website. Ein gutes Layout gibt Ihren Besuchern das Gefühl, zu Hause zu sein, und ermutigt sie, zu bleiben und sich umzusehen.

In diesem Leitfaden zeige ich Ihnen, wie Sie das Layout Ihres Blogs in WordPress mit Hilfe der vielen Themes und Plugins ändern können. Außerdem verrate ich Ihnen meine eigenen Tipps zur Perfektionierung Ihres Blogdesigns.

In diesem Leitfaden:

Was ist ein Blog-Layout und warum ist es wichtig?

Ein Blog-Layout ist die Struktur, die Ihre Beiträge, Bilder und Widgets auf der Seite anordnet, um die Leser zu führen und die Benutzerfreundlichkeit zu verbessern. Dies ist wichtig, weil eine gut geplante Website den Nutzern hilft, das zu finden, was sie brauchen. Außerdem sieht sie gut aus, was die Besucher dazu veranlasst, länger auf Ihrer Website zu verweilen.

Sie können zwischen verschiedenen Blog-Layout-Typen wählen. Hier sind die gängigsten:

  • Raster-Layout: Dieses Layout zeigt Ihre Beiträge in einem Rasterformat an.
  • Listen-Layout: In diesem Layout werden Ihre Blogeinträge nacheinander in einer einzigen Zeile angezeigt.
  • Einspaltiges Layout: In diesem Seitenlayout werden Ihre Blogbeiträge in einer einzigen, breiten Spalte dargestellt.

Die Wahl des richtigen Layouts hängt davon ab, wie Sie Ihr Blog gestalten möchten. Für News-Blogs, die mehrere Themen abdecken, eignet sich beispielsweise das Rasterlayout am besten, um den Platz zu maximieren.

Grid-Blog-Layout-Beispiel für eine Nachrichtenseite von TechCrunch

Traditionelle Blogger bevorzugen vielleicht das Listenlayout, das Platz für eine Seitenleiste mit Widgets lässt.

Warum sollten Sie das Layout Ihres WordPress-Blogs ändern?

Eine Änderung des Blog-Layouts kann die Navigation verbessern, die Absprungrate verringern und Ihrer Website ein moderneres und markengerechteres Aussehen verleihen.

Außerdem mag niemand eine langsame Website. Der Wechsel zu einem anderen Layout kann die Geschwindigkeit Ihres Blogs verbessern, was ein weiterer wichtiger Faktor ist, der Ihre Suchmaschinenplatzierung und SEO verbessern kann.

Und schließlich verleiht eine Änderung des Layouts Ihrer Website ein frisches Aussehen, das besser zu Ihrer Marke passt.

Was Sie tun sollten, bevor Sie das Layout Ihres WordPress-Blogs ändern

Bevor Sie Ihr Blog-Layout ändern, sollten Sie eine Sicherungskopie Ihrer Website erstellen und die Grenzen Ihres aktuellen Themas ausloten.

Am liebsten mache ich das mit einem WordPress-Backup-Plugin. Einige der beliebtesten Optionen bieten Funktionen, um regelmäßige Backups zu planen und die Daten als zusätzliche Vorsichtsmaßnahme sogar in der Cloud zu speichern.

Wenn Sie Hilfe benötigen, finden Sie hier eine Anleitung, wie Sie Ihre WordPress-Website sichern können.

Es lohnt sich auch, einen Blick auf Ihr aktuelles WordPress-Theme zu werfen. Ein WordPress-Theme steuert das Design, das Layout und das allgemeine Erscheinungsbild Ihres Blogs.

Welche Einschränkungen gibt es also, die Sie daran hindern, das gewünschte Blog-Layout zu erhalten? Können Sie es anpassen, oder brauchen Sie ein ganz anderes Theme?

Bevor Sie beginnen, sollten Sie wissen, was Sie wollen und was Ihr Thema nicht kann.

Wie man das Blog-Layout mit SeedProd ändert

Der einfachste Weg, das Layout Ihres Blogs zu ändern, ist die Verwendung des Drag-and-Drop WordPress Page Builders von SeedProd. Damit lassen sich Themes für WordPress und Landing Pages ganz einfach ohne einen Entwickler erstellen.

SeedProd Drag and Drop WordPress Website-Baukasten

SeedProd verfügt über Blog-Layout-Optionen, die Sie mit nur wenigen Klicks bearbeiten können. Jedes Design, das Sie erstellen, ist schnell, überflüssig und lässt sich mit gängigen WordPress-Plugins und E-Mail-Marketingdiensten integrieren.

Warum ich SeedProd. empfehle

Ich persönlich habe SeedProd verwendet, um Dutzende von WordPress-Blogs zu erstellen und umzugestalten. Es ist zweifellos der schnellste Weg, um ein benutzerdefiniertes Layout zu erstellen, ohne den Code anzufassen. Im Vergleich zu anderen Buildern, habe ich festgestellt, dass es die beste Balance zwischen Benutzerfreundlichkeit, Leistung und Flexibilität hat - vor allem für Anfänger.

Um loszulegen, müssen Sie das SeedProd-Plugin herunterladen und auf Ihrer WordPress-Website installieren.

Hinweis: Es gibt eine kostenlose Version von SeedProd, mit der Sie einfache Landing Pages erstellen können. Wir werden SeedProd Pro jedoch wegen seiner Theme Builder-Funktion verwenden.

Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Dokumentation zur Installation des SeedPod Pro Plugins.

Erstellen eines benutzerdefinierten WordPress-Themes

Nachdem Sie SeedProd aktiviert und Ihren Lizenzschlüssel verifiziert haben, können Sie ein individuelles WordPress-Theme erstellen. Dadurch wird Ihr bestehendes Theme durch ein Theme ersetzt, das Sie einfach per Drag-and-Drop anpassen können.

Navigieren Sie dazu in Ihrem WordPress-Dashboard zu SeedProd " Theme Builder und klicken Sie auf die Schaltfläche Theme Template Kits.

SeedProd-Themenvorlagen-Kits

Auf dem nächsten Bildschirm sehen Sie eine Bibliothek von 1-Klick-Website-Vorlagen für verschiedene Nischen. Jede Vorlage ist zu 100 % mobilfähig und vollständig anpassbar, sodass Sie ein beliebiges Design wählen und es an Ihre Bedürfnisse anpassen können.

Wählen Sie ein SeedProd-Website-Kit aus der Themenbibliothek

Um ein Thema auszuwählen, bewegen Sie den Mauszeiger über ein Thema und klicken Sie auf das Häkchensymbol. In wenigen Sekunden importiert SeedProd das Site Kit und zeigt die einzelnen Vorlagen in einer Liste an.

SeedProd-Site-Kit-Vorlagen

Sie können Ihr Thema anpassen, indem Sie diese Vorlagen bearbeiten, einschließlich der Homepage, der Kopfzeile, der Fußzeile und der Archivseiten.

Ausführlichere Schritte finden Sie in unserer Anleitung zur Erstellung eines benutzerdefinierten WordPress-Themes.

Anpassen Ihres Blog-Layouts

Viele Website-Kits von SeedProd verfügen standardmäßig über eine Blog-Seite, die eine Liste Ihrer letzten Blog-Beiträge anzeigt. In anderen Website-Kits wird diese Seite manchmal auch als Archivseite bezeichnet.

Sie können die Blogseite anpassen, indem Sie mit dem Mauszeiger über die Seite in der Vorlagenliste fahren und auf den Link "Design bearbeiten" klicken.

Bearbeiten Sie die Vorlage für die Blog-Seite in SeedProd

Hinweis: Wenn Ihr Thema keine Beitragsseite enthält, können Sie in unserer Dokumentation nachlesen, wie Sie eine neue Seitenvorlage für Ihren Blog von Grund auf erstellen.

Wenn Sie die Blog-Vorlage öffnen, sehen Sie das Design aus der Site-Kit-Demo. Daneben sehen Sie eine Live-Vorschau des Beitragslayouts auf der linken Seite sowie Blöcke und Einstellungen auf der rechten Seite.

Blog-Seitenlayout im SeedProd Drag-and-Drop-Seitenersteller

Die Beiträge auf dieser Seite werden mit dem Block Beiträge angezeigt. Wenn Sie ihn im Page Builder auswählen, öffnet sich ein Einstellungsfenster in der linken Seitenleiste.

SeedProd-Stellenblock-Einstellungsfeld

Hier können Sie festlegen, wie Ihre Beiträge angezeigt werden. Sie können zum Beispiel Inhalte nach Beitragstyp, Kategorie, Tag oder Autor anzeigen und Beiträge nach Datum, Titel und mehr ordnen. Sie können sogar das angezeigte Bild ein- oder ausblenden und seine Höhe ändern.

Weiter unten im Einstellungsbereich finden Sie einen Abschnitt "Layout". Hier können Sie zwischen 4 Blog-Skins wählen: Klassisch, Karte, Kreativ und Minimal.

Beitragsblock-Layout-Optionen mit verschiedenen Skin-Optionen

Darunter befindet sich ein Dropdown-Menü, mit dem Sie das Beitragslayout ändern können. Zu den Optionen, die Sie wählen können, gehören Raster, Mauerwerk und Karussell.

Wie man das Blog-Layout in WordPress mit SeedProds Blog-Layout-Optionen ändert

Klicken Sie anschließend auf die Registerkarte "Erweitert" für den Beitragsblock. In diesem Bereich sehen Sie weitere Anpassungsoptionen für Schriftarten, Abstände, Hintergrundfarben, Rahmen und das Styling der Abzeichentaxonomie.

Erweiterte Blog-Layout-Einstellungen im SeedProd-Posts-Block

Wenn Sie mit Ihrem neuen Blog-Layout zufrieden sind, klicken Sie auf "Speichern" und "Veröffentlichen".

Speichern und veröffentlichen Sie Ihr neues Blog-Layout in SeedProd

Sie müssen auch zu SeedProd " Theme Builder zurückkehren und Ihr WordPress-Theme aktivieren, indem Sie auf den Schalter "SeedProd-Theme aktivieren" klicken.

seedprod-Thema aktivieren

Jetzt können Sie Ihre Blogseite besuchen und das neue Layout in Aktion sehen.

Letztes Beispiel für die Änderung des Blog-Layouts in WordPress mit SeedProd

Pro-Tipp: Sie können ähnliche Schritte für einzelne Blogbeiträge mit SeedProd durchführen. Siehe unsere Anleitung zum Erstellen einer benutzerdefinierten Vorlage für einzelne Beiträge in WordPress.

Alternative Methoden zum Ändern des Blog-Layouts

Ich verstehe vollkommen, dass die Verwendung eines Page Builders nicht für jeden die beste Lösung ist. Deshalb werden wir im Folgenden ein paar weitere Möglichkeiten vorstellen, wie Sie das Layout Ihres Blogs in WordPress ändern können.

Ändern Sie Ihr WordPress-Theme

Eine weitere Möglichkeit, das Layout Ihres Blogs zu ändern, besteht darin, Ihr WordPress-Theme komplett zu wechseln. Da Themes das Farbschema, die Typografie und die Gesamtstruktur Ihrer Website bestimmen, kann der Wechsel zu einem neuen Theme das Layout und das Styling Ihres Blogs verändern.

Sie können ein neues Theme finden, indem Sie das WordPress-Theme-Verzeichnis durchsuchen oder eines von einem renommierten Theme-Entwickler auswählen. Einige unserer besten Themes finden Sie in unserer Zusammenstellung der besten WordPress-Themes.

Wenn Sie ein Theme mit einem Blog-Layout gefunden haben, das Ihnen gefällt, können Sie es ganz einfach installieren. Navigieren Sie in Ihrem WordPress-Dashboard einfach zu Darstellung " Themes und klicken Sie auf die Schaltfläche Neues Theme hinzufügen.

Ein neues WordPress-Theme hinzufügen

Klicken Sie dort auf die Schaltfläche " Thema hochladen " und wählen Sie die Zip-Datei Ihres Themas von Ihrem Computer aus. Klicken Sie dann auf die Schaltfläche "Jetzt installieren" und dann auf "Aktivieren".

Installieren Sie eine neue WordPress-Theme-Datei

In diesem Beispiel verwenden wir das WordPress-Theme Astra, weil es mehrere einfache Einstellungen zur Änderung des Blog-Layouts bietet.

Um sie zu finden, gehen Sie in Ihrem Dashboard auf Darstellung " Einstellungen, was den WordPress-Theme-Customizer öffnet.

Astra WordPress-Theme Customizer Blog-Einstellungen

Klicken Sie als Nächstes auf die Überschrift "Blog" und wählen Sie dann die Registerkarte "Blog/Archiv". Hier sehen Sie mehrere Optionen, darunter Anpassungen für den Blog-Container und das Layout der Seitenleiste.

Wenn Sie weiter nach unten scrollen, können Sie zwischen 4 verschiedenen Blog-Layout-Einstellungen wählen, darunter Klassisch, Raster, Liste und Cover.

Astra-Theme-Blog-Layout-Optionen im WordPress-Customizer

Wählen Sie eine Option, die Ihren Layoutanforderungen entspricht, und klicken Sie dann auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.

Dann können Sie Ihre Website besuchen, um Ihr neues Blog-Layout zu sehen.

Letztes Beispiel für die Änderung des Blog-Layouts durch Änderung des WordPress-Themas

Verwenden Sie den WordPress Full Site Editor

Wenn Sie ein blockbasiertes WordPress-Theme verwenden, finden Sie es vielleicht einfacher, den WordPress Full Site Editor (FSE) zu verwenden, um das Layout Ihres Blogs anzupassen. Der Full Site Editor (FSE) ist ein integriertes WordPress-Tool, mit dem Sie Ihre gesamte Website mithilfe von Blöcken visuell anpassen können.

Sie können praktisch jede Seite bearbeiten, einschließlich Ihrer Titelseite, Kopf- und Fußzeilen und natürlich Ihrer Blogseite.

Rufen Sie dazu in Ihrem WordPress-Dashboard den Bildschirm Erscheinungsbild " Editor auf und klicken Sie in der linken Seitenleiste auf "Seiten".

WordPress vollständige Website-Editor Seiten Option

Klicken Sie dann auf die Seitenoption "Blog" und rechts auf "Vorschau", um Ihre Seite anzupassen und ihr Layout zu ändern.

WordPress vollständige Website-Editor Blog-Seite Option

Nun können Sie auf das Plus-Symbol (+) klicken, um der Seite Blöcke hinzuzufügen, z. B. den Block "Beitragsliste". Sie können auch Farben und Schriftarten auf der Seite ändern, indem Sie in der linken Seitenleiste auf das Symbol "Stile" klicken.

Blog-Layout mit vollständigem Site-Editor ändern

Wenn Ihr Layout fertig ist, klicken Sie auf die Schaltfläche Speichern, um die Änderungen sofort zu speichern. Besuchen Sie dann Ihr Blog-Layout, um zu sehen, wie es aussieht.

Letztes Beispiel für die Änderung des Blog-Layouts mit dem WordPress-Website-Editor

Welche Blog-Layout-Methode sollten Sie verwenden?

Sie sind sich nicht sicher, ob Sie SeedProd verwenden, Ihr Thema ändern oder den Full Site Editor ausprobieren sollen? Im Folgenden finden Sie einen kurzen Vergleich der einzelnen Methoden, um Ihnen die Wahl der besten Option für Ihre Bedürfnisse und Ihr Qualifikationsniveau zu erleichtern.

MethodeAm besten fürQualifikationsniveauErfordert ein Plugin?
SeedProdVolle Kontrolle, Drag-and-Drop-Design, Landing PagesAnfänger✅ Ja
WordPress-Theme ändernVollständige Neugestaltung der Website und neuer Layout-StilAnfänger❌ Nein
Vollständiger Website-Editor (FSE)Optimierung des Layouts in blockbasierten ThemenZwischenbericht❌ Nein

Design-Tipps für ein effektives Blog-Layout

Nun, da Sie wissen, wie Sie das Blog-Layout in WordPress ändern können, lassen Sie uns zu einigen wichtigen Tipps für das Design übergehen.

Visuelle Hierarchie ist der Schlüssel 

Visuelle Hierarchie bedeutet, dass Sie Ihre Seite so gestalten, dass die Besucher die wichtigsten Teile zuerst sehen. Es gibt viele Möglichkeiten, dies zu erreichen. Sie können zum Beispiel mit der Größe, der Farbe und der Position der verschiedenen Elemente spielen.

WPBeginner Blog Layout Beispiel mit visueller Hierarchie

Dieses Blog-Layout-Beispiel von WPBeginner lenkt den Blick auf eines der wichtigsten Elemente: das Opt-in-Formular. Durch die Platzierung des Formulars am oberen Rand in kräftigen, ansprechenden Farben werden die Nutzer zuerst darauf aufmerksam gemacht.

In Lesbarkeit investieren 

Der Inhalt Ihres Blogs ist das Wichtigste - er muss also leicht zu lesen sein. Wählen Sie Schriftarten, die gut lesbar sind, und achten Sie darauf, dass sie mit der Hintergrundfarbe kontrastieren. Wenn der Text schwer zu lesen ist, kann er die Leute abschrecken.

aioseo Blog-Layout-Beispiel mit klarer Typografie

Mir gefällt die Wahl der Schriftart auf der Blog-Seite von AIOSEO. Die Schriftgröße und die Abstände sind leicht zu lesen, ohne dass man schielen muss.

Navigation priorisieren

Eine einfache und klare Navigation macht Ihren Blog benutzerfreundlich. Helfen Sie Ihren Lesern, das zu finden, was sie brauchen, ohne lange nachzudenken. Beseitigen Sie unnötigen Ballast und platzieren Sie die wichtigsten Funktionen an prominenter Stelle.

Smash Balloon Blog Beispiel mit klarer Navigation

Das Blog-Layout von Smash Balloon ist ein gutes Beispiel für eine klare Navigation. Neben einem Abschnitt in voller Breite für den neuesten Blog-Beitrag gibt es eine übersichtliche Navigationsleiste, über die die Nutzer die Produkte, Funktionen, Preise und den Support erkunden können.

Vergessen Sie die mobilen Benutzer nicht 

Das mobile Surfen hat die Desktop-Nutzung überholt, daher ist ein mobiles responsives Design ein Muss. Denken Sie bei der Gestaltung Ihres Blog-Layouts daran, wie es auf kleineren Bildschirmen dargestellt wird. Behalten Sie die Erfahrung Ihrer mobilen Besucher im Auge, um sicherzustellen, dass sie reibungslos und angenehm ist. 

Duplicator mobiles responsives Blog Beispiel

Duplicator hat eine hervorragende Arbeit geleistet, um seinen Blog mobilfreundlich zu gestalten. Egal, ob Sie ein Smartphone, ein Tablet, einen Laptop oder einen Desktop-Computer verwenden, Sie können alle Bereiche ohne Probleme durchsuchen.

Profi-Tipp: Die Website von Duplicator wurde mit dem Website-Builder von SeedProd erstellt.

Starten Sie mit einem neuen Blog-Layout

Ich hoffe, diese Anleitung hat Ihnen geholfen zu lernen, wie Sie das Blog-Layout in WordPress ändern können. Wählen Sie eine Methode, die für Sie geeignet ist, um die Benutzerfreundlichkeit, das Engagement und die Geschwindigkeit Ihres Blogs auf einfache Weise zu verbessern.

Vielleicht interessieren Sie sich auch für die folgenden Tipps und Anleitungen für weitere Blog-Tipps:

Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte hinterlassen Sie einen Kommentar mit Ihren Fragen und Ihrem Feedback.

Sie können uns auch auf YouTube, X (früher Twitter) und Facebook folgen, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.

Autorenavatar
Stacey Corrin Autorin
Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.

Offenlegung: Unser Inhalt wird von den Lesern unterstützt. Das heißt, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie einen Mehrwert für unsere Leser darstellen.