Wenn Sie wollen Blogseite mit Elementor erstellen„Sie haben je nach Budget ein paar solide Optionen. Eine spezielle Blogseite sorgt für Ordnung in Ihren Beiträgen, hilft Google bei der Indexierung Ihrer Inhalte und gibt Besuchern einen Grund, länger dabei zu bleiben.
Sie brauchen dafür keinen Code zu schreiben Mit der Elementor Posts Widget (Pro) oder ein kostenloses Plugin wie Master-Addons für ElementorSie können einen benutzerdefinierten Elementor-Blogseite Das passt zu Ihrer Marke.
Dieses Tutorial behandelt zwei Methoden Blogseite in WordPress mit Elementor erstellen:
- Methode 1: Verwendung des Elementor Pro Posts-Widgets (bezahlt)
- Methode 2: Verwendung des Master Addons Blog Widgets (kostenlos)
Am Ende gibt es eine Vergleichstabelle, damit ihr genau sehen könnt, was die einzelnen Optionen bieten, ich habe auch einen Video-Walkthrough aufgenommen, falls euch das lieber ist.
Warum Ihre WordPress-Website eine Blog-Seite benötigt
Ihre Blogseite ist der einzige Ort, an dem alle Ihre Beiträge angezeigt werden. Besucher können Artikel, Tutorials, Nachrichten und Updates von einer URL aus durchsuchen. Für Geschäftsinhaber sorgt dies für organischen Suchverkehr. Für Blogger ist es im Grunde der Sinn der Website.
Ein Gut WordPress Blogpage Design Ein paar Dinge für Sie tut:
- SEO-verkehr – Google indiziert frische Inhalte schneller, wenn sie auf einer richtigen Blogseite organisiert sind.
- Längere Sitzungen – Ein Elementor Blog Layout Mit Miniaturansichten, Auszügen und Kategorien klicken Besucher durch mehr Beiträge, anstatt zu springen.
- Behörde – Regelmäßige Veröffentlichungen zu einem Thema machen Sie zur Anlaufstelle in Ihrer Nische.
- Konvertierungen „A-Log-Beiträge führen Leser zu Ihren Produkten, Dienstleistungen oder Ihrer E-Mail-Liste.
Aus dem Kasten heraus stapelt WordPress nur Beiträge in umgekehrter chronologischer Reihenfolge Nicht viel anzuschauen Mit dem rechten Elementor-Blog-Widget„Sie können dies gegen Gitter, Kartenlayouts, Karussells und mehr austauschen, alles ohne Code.
Bevor Sie beginnen: Voraussetzungen
Sie benötigen ein paar Dinge, die Sie vor dem Start fertig haben:
- WordPress installiert auf Ihrem Hosting (jede aktuelle Version funktioniert)
- Elementor-plugin Installiert und aktiviert (Gratisversion von WordPress.org)
- Ein paar Blogbeiträge veröffentlicht (6 Sie benötigen mindestens 3-6 Beiträge, damit die Blogseite Inhalte zur Anzeige hat Fügen Sie jedem Beitrag ausgewählte Bilder hinzu, um das beste visuelle Ergebnis zu erzielen.
- Ein statisches Homepage-Set – Gehen Sie zu Einstellungen > Lesen und wählen Sie “Eine statische Seite” Stellen Sie Ihre Homepage ein und erstellen Sie eine eigene Seite für Beiträge.
Für Methode 1 benötigen Sie Elementor Pro. Für Methode 2 benötigen Sie nur die kostenlose Master Addons Plugin, die mit der kostenlosen Version von Elementor funktioniert.
Video-Tutorial: Erstellen Sie eine Blog-Seite mit Elementor
Wenn Video eher Ihr Ding ist, zeigt dieser Komplettlösung, wie Sie Erstellen Sie eine Blogseite in Elementor Verwenden des Master Addons Blog Widgets von Anfang bis Ende.
OK, weiter zu den beiden Methoden.
Methode 1: Erstellen Sie eine Blog-Seite mit dem Elementor Pro Posts Widget
Wenn Sie haben Elementor ProSie haben bereits die Beiträge Widget (manchmal als Element “Beiträge” im Panel aufgeführt) Es ist das Elementor-eigene Tool, um Blogbeiträge auf jeder Seite anzuzeigen.
Schritt 1: Fügen Sie das Posts-Widget zu Ihrer Seite hinzu
Öffnen Sie die Seite, auf der Ihr Blog im Elementor-Editor erscheinen soll, suchen Sie im Widget-Panel links nach “Posts” und ziehen Sie die Beiträge Widget In Ihren Seitenbereich.
Das Widget wird sofort Ihre veröffentlichten Beiträge eintragen und in einem Standardlayout anzeigen.
Schritt 2: Wählen Sie Ihre Layout-Skin
Elementor Pro bietet Ihnen drei Layout-Skins zur Auswahl:
- Klassisch – Der Standard-Skin Zeigt Beiträge in einem sauberen Raster mit vorgestellten Bildern, Titeln, Metadaten und Auszügen an.
- Karten – Fügt jedem Beitrag ein kartenartiges Kästchen mit einem subtilen Schatteneffekt hinzu.
- Voller Inhalt – Zeigt den vollständigen Postinhalt an, anstatt nur einen Auszug.
Standardmäßig zeigt der Classic-Skin ein 3-Spalten-Raster mit 6 Beiträgen an, das kannst du von 1 bis 6 Spalten anpassen und eine beliebige Zahl für Beiträge pro Seite festlegen.
Schritt 3: Konfigurieren Sie die Layouteinstellungen
Die Layout-tab Ist, wo sie einwählen, wie ihr Elementor-Blogseite Sieht eigentlich aus:
- Bildposition – Platzieren Sie das abgebildete Bild oben, links, rechts oder verstecken Sie es vollständig.
- Bildgröße und -verhältnis – Wählen Sie die richtigen Miniaturabmessungen für Ihren Entwurf aus.
- Titel-tag – Hervorheben Stellen Sie das HTML-Tag (H2, H3, H4 usw) für Posttitel ein. Das ist wichtig für SEO.
- Auszug Länge – Kontrolle, wie viele Wörter des Beitragsauszugs angezeigt werden.
- Metadaten – Wählen Sie aus, welche Metainformationen angezeigt werden sollen: Name, Datum, Uhrzeit und Kommentare des Autors.
- Lesen Sie mehr Text “Auch den “Weiterlesen” - Buttontext anpassen.
Schritt 4: Abfrage und Paginierung einrichten
Die Inhaltsregisterkarte Hat zwei wichtige Abschnitte: Abfrage und Paginierung.
Abfrage Lässt Sie steuern, welche Beiträge auf Ihrer Blogseite erscheinen Sie können nach Posttyp, Kategorien, Tags oder bestimmten Post-IDs filtern Sie können auch bestimmte Beiträge in die Ergebnisse einbinden oder ausschließen.
Paginierung Steuert, wie Benutzer durch mehrere Seiten von Beiträgen navigieren Drei Optionen stehen zur Verfügung:
- Zahlen (1, 2, 3...)
- Vorherige/Nächste Pfeile
- Zahlen + Vorherige/Nächste kombiniert
Schritt 5: Gestalten Sie Ihr Blog-Layout
Die Style-tab Hat vier Abschnitte für visuelle Optimierungen:
- Layout – Spaltenlücke, Zeilenlücke und Inhaltsausrichtung anpassen.
- Kasten – Ränderstil, Ränderradius, Polsterung und Kastenschatten für jede Postkarte festlegen.
- Bild – Definieren Sie den Umrandungsradius und -abstand für die vorgestellten Bilder.
- Inhalt – Ändern Sie Typografie, Farben und Abstände für Posttitel, Metadaten, Auszüge und den Link Weiterlesen.
Tipp: Verwenden Sie konsistente Abstände und Typografie auf Ihrer Blogseite. Legen Sie den gleichen Randradius für Bilder und Karten fest, um einen polierten Look zu erstellen. Passen Sie die Linkfarbe von Read More an die Akzentfarbe Ihrer Marke an.
Das ist der Elementor Pro-Ansatz Funktioniert gut für Basic Elementor-Bloggitter Layouts, aber du wirst ziemlich schnell an Grenzen stoßen: kein Karussell, keine Hover-Effekte, nur 3 Skins.
Wenn Sie mehr Optionen wünschen, ohne für Pro zu bezahlen, ist die nächste Methode einen Blick wert.
Methode 2: Erstellen Sie eine Blog-Seite mit Elementor mithilfe von Master-Addons (kostenlos)
Die Master Addons Blog Widget (im Editor mit “MA Blog” beschriftet) ist kostenlos und packt mehr Layout-Optionen ein als das Elementor Pro Posts Widget. 21 Layout-Variationen, Hover-Animationen, ein eingebautes Karussell, erweiterte Filterung Es ist eines der vollwertigeren Elementor-Blog-Widgets Da draußen.
Schritt 1: Master-Addons installieren und aktivieren
Greifen Master-Addons für Elementor Von WordPress.org (kostenlos).Nach der Aktivierung sehen Sie das Element “MA Blog” in Ihrem Elementor-Widget-Panel angezeigt.
Schritt 2: Fügen Sie das Blog-Widget hinzu und wählen Sie ein Layout
Ziehen Sie die MA-Blog Widget auf Ihre Seite Standardmäßig zeigt es ein klassisches Blog-Layout in einem 4-Spalten-Raster.
Hier wird es interessant Du bekommst Drei Layout-Typen:
- Gitter Standard-Gitterlayout für saubere, organisierte Blogseiten
- Karte – Hochklappendesign mit Schatten und Rändern
- Liste – Horizontales Listenlayout, ideal für Blogs im Nachrichten- oder Zeitschriftenstil
Jeder Layouttyp hat 7 einzigartige StilvariationenSie erhalten insgesamt 21 verschiedene Blogseiten-Designs (plus Mauerwerksunterstützung).Mit einem einzigen Klick können Sie zwischen ihnen wechseln.
Zu den 7 Stilvarianten gehören: Standard, Inhaltsüberlappung, Meta oben links, Karten rechts ausrichten, Karten zentrieren, mit Gradientenhintergrund zentrieren und Bannerkarte. Mischen Sie diese mit Raster-, Karten- oder Listenlayouts, um eine echte Struktur zu erstellen Benutzerdefinierte Blogseite in Elementor.
Schritt 3: Konfigurieren von Anzeigeoptionen
Sie erhalten eine detaillierte Kontrolle darüber, wie Blogbeiträge angezeigt werden:
- Postauftrag – Sortieren nach Datum, Titel, geändertem Datum oder zufällig.
- Spalten 1 bis 6 Spalten festlegen.
- Symbol des Postformats – Symbole für verschiedene Postformate anzeigen (Video, Audio, Galerie).
- Meta-trenner – Wählen Sie das Zeichen, das Metaelemente trennt (Pfeife, Punkt, Strich).
- Titel HTML Tag – Wählen Sie das Überschriftenetikett für Posttitel (H2, H3, H4 usw.).
- Post-typ – Regelmäßige Beiträge, benutzerdefinierte Beitragstypen oder Seiten anzeigen.
- Zeilen- und Spaltenabstand – Stimmen Sie die Lücken zwischen den Beiträgen fein ab.
- Inhaltsangleichung – Links, Mitte oder Rechtsausrichtung Ihres Beitragsinhalts.
- Beiträge pro Seite – Legen Sie fest, wie viele Beiträge pro Seite angezeigt werden sollen.
- Paginierung – Seitennavigation aktivieren oder deaktivieren.
Schritt 4: Thumbnail-Optionen einrichten
Hier ziehen Master Addons vor Elementor Pro. Das Miniaturbild lässt Sie:
- Aktivieren oder deaktivieren Sie die vorgestellten Bilder
- Legen Sie eine benutzerdefinierte Höhe für Miniaturansichten fest
- Wählen Sie die Miniaturansichtsposition (oben, links, rechts)
- Pick von 26 Hover-Animationseffekte (Hängen, Pulsen, Drücken, Knallen, Schweben, Senken und mehr)
- Bewerben 16 Farbeffekte (Flushing, Sepia, Graustufen, Helligkeit usw)
- Wählen Sie aus 5 Miniaturansichtenformen (Standard, abgerundet, Kreis, Gradient Bordered und mehr)
Im Screenshot oben habe ich die “Hang” Hover Animation, “Flushing” Farbeffekt, und “Gradient Bordered” Miniaturansicht Form aufgetragen Kleine Details wie diese trennen eine generisch aussehende Blogseite von einer, die tatsächlich aussieht, als hätte jemand Ihre gestaltet Elementor-Blogseite Mit Absicht.
Schritt 5: Konfigurieren von Post-Metadaten
Unter Beiträge EinstellungenSie steuern, welche Metainformationen bei jedem Blogbeitrag angezeigt werden:
- Beitragstitel (zeigen/ausblenden)
- Autor Avatar Bild
- Autorenname
- Erscheinungsdatum
- Kategorien
- Kommentaranzahl
- Auszugslänge (genaue Wortanzahl festlegen)
- Weiterlesen Text (vollständig anpassbar)
- Vollständigen Inhalt vs. Auszug anzeigen
Schritt 6: Erweiterte Filterung verwenden
Die Erweiterte Einstellungen Panel ist, wo man genau eingrenzt, welche Beiträge erscheinen:
- Bestimmte Beiträge ausschließen – Entfernen Sie bestimmte Beiträge per Ausweis von der Blogseite.
- Nach Tag filtern – Nur Beiträge mit bestimmten Tags anzeigen.
- Filtern nach Autor – Beiträge eines bestimmten Autors anzeigen (nützlich für Blogs mit mehreren Autoren).
- Versatz – Lasst die ersten N-Beiträge aus. Praktisch, wenn ihr einen Beitrag separat vorgestellt habt.
- In neuem Tab öffnen – Lassen Sie Blog-Beitragslinks in einem neuen Browser-Tab öffnen.
Schritt 7: Aktivieren Sie das Blog-Beitragskarussell
Sicherlich hast du schon Seiten gesehen, die ihre neuesten Beiträge in einem Scrollkarussell auf der Startseite zeigen Das Master Addons Blog Widget hat das eingebaut Schalten Sie die Elementorblogkarussell on und konfigurieren Sie es:
- Autoplay – Beiträge scrollen automatisch mit einer von Ihnen festgelegten Geschwindigkeit.
- Navigationsstil – Wählen Sie zwischen Punkten oder Pfeilen.
- Pfeilstellung – Platzieren Sie Navigationspfeile innerhalb oder außerhalb des Karussells.
Kombinieren Sie das Karussell mit Erweiterten Einstellungen, um bestimmte Beiträge (wie “featured” oder “editors pick” Tags zu filtern und platzieren Sie es an einer beliebigen Stelle auf Ihrer Seite, nicht nur auf der Blogseite.
Wichtig: Stellen Sie sicher, dass Sie aktiviert haben “Load Font Awesome 4 Support” Von Elementor > Einstellungen. Andernfalls werden die Pfeilsymbole im Karussell nicht korrekt angezeigt.
Schritt 8: Stylen Sie Ihre Blog-Seite
Die Style-tab Deckt alle visuellen Optimierungen ab:
- Miniaturansicht – Überlagerungsfarbe, CSS-Filter (Helligkeit, Kontrast, Sättigung)
- Titel & Meta – Typografie, Textfarbe und Schwebefarbe
- Inhalt – Textfarbe, Hintergrundfarbe, Typografie, Kastenschatten, Polsterung und Inhaltsrand
- Kasten – Hintergrundfarbe, Rand und Kastenschatten für die gesamte Postkarte
- Paginierung – Typografie, normale Zustandsfarbe, Hover-Zustandsfarbe, Rand und Polsterung
Zwischen diesen Steuerelementen können Sie Ihre Elementor Blog Layout Zum Branding Ihrer Seite bis zum Pixel Farben, Schriftarten, Abstände, Schatten, alles vom Elementor-Panel aus einstellbar.
Elementor Pro Beiträge Widget vs Master Addons Blog Widget
Hier ist alles nebeneinander ausgelegt, damit man sehen kann, welche Elementor-Blog-Widget Zu Ihrer Situation passt.
| Merkmal | Elementor Pro Posts Widget | Master Addons Blog Widget (kostenlos) |
|---|---|---|
| Preis | Benötigt Elementor Pro (59 $/Jahr+) | Kostenlos |
| Layoutvariationen | 3 Skins (Klassisch, Karten, Vollinhalt) | 21 Variationen (7 Stile x 3 Layout-Typen) |
| Layout-typen | Nur Gitter | Gitter, Karte und Liste |
| Mauerwerk | Ja | Ja |
| Thumbnail Hover-Effekte | Keine | 26 Hover-Animationen + 16 Farbeffekte |
| Miniaturformen | Nur Grenzradius | 5 Formen (Standard, abgerundet, Kreis, Gradient Bordered usw) |
| Metadatenoptionen | Name des Autors, Datum, Uhrzeit, Kommentare | Autor Avatar, Autor Name, Datum, Kategorien, Tags, Kommentar Anzahl |
| Abfragefilterung | Beitragstyp, Einschließen/Ausschließen | Beitragstyp, Filtern nach Tag, Filtern nach Autor, Postausschluss, Offset |
| Paginierung | 3 Typen (Zahlen, Vorschau/Weiter, kombiniert) | Zahlen + Vorschau/Weiter mit anpassbarem Text |
| Karussell | Nicht verfügbar | Vollkarussell mit Autoplay, Geschwindigkeitskontrolle, Pfeilen oder Punkten |
| Öffnen Sie in der neuen Registerkarte | Nein | Ja |
| Postformat-Symbole | Nein | Ja |
Für grundlegende Blogseiten erledigt das Widget Elementor Pro Posts die Arbeit Wenn Sie Hover-Effekte, ein Karussell oder einfach mehr benötigen WordPress Blogpagesgestaltung Vielfalt, das Master Addons Blog Widget deckt das alles kostenlos ab.
Tipps für ein besseres Elementor-Bloglayout
Ein paar Dinge, die ich aus dem Aufbau von Blogseiten für Dutzende WordPress-Seiten gelernt habe:
1. Verwenden Sie immer die vorgestellten Bilder
Ein Beitrag ohne Featured Image taucht als leeres Rechteck in deinem Blograster auf, sieht kaputt aus, stelle für jeden Beitrag ein Featured Image ein, auch wenn es eine einfache Markengrafik ist, wenn Dateigrößen ein Anliegen sind, hier unser Ratgeber auf der Beste WordPress Bildoptimierer Plugins.
2. Halten Sie Auszüge kurz
Lange Ausschnitte durcheinander das Raster und Push-Beiträge unterhalb des Falzes 15-25 Wörter reichen aus, um den Lesern zu sagen, was der Beitrag abdecktZiel ist es, sie zum Klicken zu bringen, nicht das Ganze von der Blogseite zu lesen.
3. Verwenden Sie konsistente Spaltenzählungen
Drei Spalten funktionieren am besten für die meisten Blog-Seiten Zwei Spalten sind gut für inhaltslastige Seiten mit längeren Ausschnitten Vier Spalten funktionieren, wenn man viele kurze Beiträge mit starken Featured-Bildern hat Und sobald Leser zu einem vollständigen Artikel durchklicken, helfen sie ihnen, dort zu bleiben Bestes Inhaltsverzeichnis-Plugin für WordPress Fügt Sprunglinks hinzu, damit lange Beiträge leicht zu überfliegen sind.
4. Stellen Sie die richtigen Titel-Tags ein
Ihr Titel auf der Blogseite sollte H1 sein. Posttitel innerhalb des Blograsters sollten H2 oder H3 sein. Dies hilft Suchmaschinen, Ihre Seitenstruktur zu verstehen. Weitere SEO-Tipps finden Sie in unserem Best SEO-Praktiken für Elementor Führung.
5. Fügen Sie Kategorien zu Metadaten hinzu
Das Anzeigen von Kategorien in Ihren Post-Metadaten hilft Besuchern, verwandte Inhalte zu finden Mit dem Master Addons Blog-Widget können Sie Kategorien direkt unter jedem Posttitel anzeigen.
6. Test auf Mobilgeräten
Vorschau auf Ihre Blog-Seite auf Mobil und Tablet, bevor Sie veröffentlichen Ein 3-Spalten-Raster stapelt sich auf kleinen Bildschirmen zu 1 Spalte, was in Ordnung ist, aber manchmal sehen die Abstände oder Schriftgrößen nach dem Zusammenbruch aus Geben Sie ihm einen kurzen Scroll-Through auf Ihrem Handy Für mehr Kontrolle, überprüfen Sie unseren Leitfaden auf Responsive Design mit Elementor-Breakpoints.
7. Verwenden Sie ein Karussell auf Ihrer Homepage
Legen Sie einen Elementor Blog Karussell Auf deiner Homepage neben der Blogseite selbst So sieht jeder Besucher deine neuesten Beiträge genau bei der Landung, auch wenn er im Navi nie auf “Blog” klickt Das Master Addons Blog Widget hat das Karussell eingebaut, so dass die Einrichtung ca. 30 Sekunden dauert.
Häufig gestellte Fragen
Kann ich eine Blogseite mit der kostenlosen Version von Elementor erstellen?
Ja. Während der kostenlose Elementor kein Posts-Widget enthält, können Sie die Master Addons Blog Widget Das funktioniert mit der kostenlosen Version von Elementor. Es bietet Ihnen 21 Layoutvarianten, Hover-Effekte, Karussellunterstützung und erweiterte Filterung ohne Kosten.
Wie füge ich meiner Elementor-Website-Navigation eine Blogseite hinzu?
Eine neue Seite in WordPress erstellen (nennennen Sie sie “Blog”), mit Elementor mit dem Widget Beiträge oder Master Addons Blog Widget gestalten, dann diese Seite über Aussehen > Menüs in Ihr Navigationsmenü aufnehmen, Sie können auch die Master Addons Theme Builder benutzerdefinierten Header mit Ihrer Navigation zu erstellen.
Wie viele Blogbeiträge sollte ich pro Seite anzeigen lassen?
6 bis 12 Beiträge pro Seite sind der Sweet Spot für die meisten Seiten Weniger als 6 können dazu führen, dass sich die Seite leer anfühlt, während mehr als 12 die Ladezeit erhöht und die Besucher überfordert Paginierung aktivieren, damit die Leser ältere Beiträge durchsuchen können.
Kann ich auf meiner Elementor-Blogseite Blogbeiträge aus einer bestimmten Kategorie anzeigen?
Ja. Sowohl Elementor Pro als auch Master Addons unterstützen das Filtern von Beiträgen nach Kategorien Verwenden Sie in Master Addons das Erweiterte Einstellungsfeld, um nach Tag, Autor oder bestimmten Beiträgen zu filtern. Dadurch können Sie mehrere Blogseiten für verschiedene Themen erstellen.
Was ist das beste Elementor Blog Layout für SEO?
Ein Rasterlayout mit vorgestellten Bildern, Posttiteln mit H2/H3-Tags, kurzen Auszügen, Kategoriemetadaten und richtiger Paginierung eignet sich am besten für SEO. Stellen Sie sicher, dass Ihre Blogseite schnell geladen wird, indem Sie Bilder optimieren und a verwenden Leichtes Elementorthema.
Letzte Gedanken
Gebäude ein Benutzerdefinierte Blogseite in Elementor Dauert bei beiden Methoden ca. 10-15 Minuten Das Elementor Pro Posts Widget geht gut mit den Grundlagen um, wenn man bereits eine Pro Lizenz besitzt.
Für weitere Layoutoptionen bietet die Master Addons Blog Widget Gibt Ihnen 21 Layout-Variationen, 26 Hover-Animationen, 16 Farbeffekte, ein Karussell, und erweiterte Post-Filterung Das reicht aus, um Blogseite mit Elementor erstellen Das sieht so aus, als hätten Sie einen Designer engagiert.
Es funktioniert auch mit der kostenlosen Version von Elementor. Master Addons herunterladen Und testen Sie es aus.
Wenn etwas während der Einrichtung nicht richtig funktioniert, Lassen Sie uns eine Nachricht zukommen Und wir werden es regeln.
Verwandte Lektüre:
