So erstellen Sie eine Blogseite mit Elementor (kostenlos, nicht erforderlich)

Free Elementor kann Ihre Beiträge nicht auflisten Das Posts-Widget, Archivbeiträge, Posttitel und die restlichen Post-Widgets sind alle Elementor Pro. Bei einer kostenlosen Installation zeigen sie im Widget-Panel mit einem Vorhängeschloss und sonst nichts an, um eine Blogseite zu erstellen, ohne für Pro zu bezahlen, installieren Sie das kostenlose Master Addons Plugin und verwenden Sie das Blog Posts-Widget, das Beiträge in Raster, Liste oder Mauerwerk auflistet und im normalen Elementor-Editor funktioniert.

Diese Anleitung erstellt einen Start zum Ende, mit Screenshots von Elementor 4.2.4 und Master Addons 3.2 auf einer kostenlosen Installation. Sie behandelt die Layout-Auswahl, die Abfragefilter, die Kategorienfilter-Tabs, die die meisten Tutorials übersehen, und die beiden Einstellungen, die entscheiden, ob Ihr Raster aufgeräumt oder zerlumpt aussieht.

Verfügt Elementor kostenlos über ein Blog- oder Post-Widget?

Nein. Suchen Sie im Widget-Panel nach “Beitrag” auf einer kostenlosen Installation und das kommt zurück.

Blog-Beiträge und Zeitleisten tragen das lila Master-Add-ons-Emblem und sind zum Ziehen bereit. Beiträge, Beitragstitel, Beitragsauszug, Archivbeiträge, Beitragskommentare, Postnavigation und Postinformationen tragen alle ein Vorhängeschloss, bei dem es sich um Elementor-Werbung Pro aus dem Inneren des kostenlosen Plugins handelt.

Sie haben also vier Möglichkeiten:

Der Rest dieser Anleitung verwendet das kostenlose Master Addons Widget Jedes unten angezeigte Steuerelement befindet sich im kostenlosen Plugin Nichts im Blog Posts Widget ist gesperrt.

Was Sie brauchen, bevor Sie beginnen

• WordPress mit Elementor Installiert Die kostenlose Version ist in Ordnung.
• Das kostenlose Master Addons Plugin. Installationsnotizen finden Sie hier Wenn Sie sie wollen.
• Ein paar veröffentlichte Beiträge Sechs oder mehr erleichtern die Beurteilung des Layouts.
• Ein Featured Image auf jedem Beitrag Ein Beitrag ohne hinterlässt eine Lücke im Raster, und keine Layouteinstellung behebt das.

So erstellen Sie Schritt für Schritt kostenlos eine Elementor-Blogseite

Schritt 1: Erstellen Sie die Seite

Gehe zu Seiten → Neue Seite hinzufügenTitel es Blog, dann klicken Sie auf Mit Elementor bearbeiten. Lassen Sie den WordPress-Inhaltsbereich leer Alles passiert in der Elementor-Leinwand.

Legen Sie diese Seite nicht als WordPress Posts-Seite unter Einstellungen → Lesen fest. Das gibt die URL an Ihr Theme weiter und verwirft das Elementor-Design. Es gibt einen Abschnitt über die richtige Art, dies weiter unten zu tun.

Schritt 2: Fügen Sie das Blog-Beiträge-Widget hinzu

Durchsuchen Sie das Widget-Panel nach Blog Und ziehen Blogbeiträge Auf die Leinwand Es rendert gleich deine neuesten Beiträge, so kannst du beim Ändern sehen, was du veränderst.

Schritt 3: Wählen Sie ein Layout

Offen Anzeigeoptionen. Die Bedienelemente hier legen die Form der Seite fest.

Die beiden Bedienelemente, auf die es am meisten ankommt, sitzen oben:

• Blog-layout: Classic oder Cards. Classic setzt den Text auf den Seitenhintergrund Karten umschließen jeden Beitrag in einem eigenen Panel.
• Blog-typ: Gitterlayout, Listenlayout oder Mauerwerkslayout.

Darunter, setzen Anzahl der Spalten. Es ist eine responsive Steuerung, so dass Sie Desktop drei Spalten geben können und mobile eine, indem Sie das Gerät am oberen Rand des Editors wechseln Drei ist die sichere Voreinstellung für einen Blog mit Bildern.

Zwei weitere, die es wert sind, jetzt eingestellt zu werden. Titel HTML Tag Standardmäßig H2, was für einen Blog-Index richtig ist, da die Seitenüberschrift die H1 ist und jeder Beitragstitel darunter sitzt Und Quelle Wählt zwischen Neueste Beiträge und Aktuelle Abfrage Lassen Sie es auf Neueste Beiträge für eine normale Blogseite; Aktuelle Abfrage ist für Archivvorlagen, wobei das Widget der Kategorie oder dem Autor folgen sollte, die angezeigt werden, und nicht seinen eigenen Einstellungen.

Schritt 4: Wählen Sie einen Karten - oder Listenstil

Stellen Sie das Blog-Layout auf Karten und a ein Kartenlayout Kontrolle erscheint mit sieben Designs.

Standard, Inhaltsüberlappung, Meta oben links, Karten rechts ausrichten, Karten mit Mittelausrichtung, Farbverlauf BG mit Mittelausrichtung und Bannerkarte. Inhaltsüberlappung und Bannerkarte legen den Text über das Bild, sodass sie Fotos mit Platz darin benötigen Standard- und Karten rechtsausrichten sind die sichereren Optionen für einen gemischten Satz vorgelegter Bilder.

Wechseln Sie den Blogtyp in die Liste und die Kartensteuerung wird ersetzt durch Listenlayout-Typ, mit sieben weiteren.

Das sind insgesamt 14 fertige Designs, sieben für Gitter und sieben für Listen, zusätzlich zu den drei Layout-Typen, sodass man eine Karte selten von Grund auf neu stylen muss.

Schritt 5: Stellen Sie die Miniaturbildgröße und den Hover-Effekt ein

Offen Miniaturansichten. Hier wird meist eine zerlumpte Blogseite fixiert.

Standardmäßig hält das Widget jedes vorgestellte Bild in seinem eigenen Verhältnis, sodass ein Porträtfoto in einer Reihe von Landschaften diese Karte auf der Seite nach unten drückt Drehen Benutzerdefinierte Höhe Ein und stellen Sie die min und max auf den gleichen Wert, etwa 200 bis 240 px, und jedes Miniaturbild wird auf das gleiche Feld gesetzt. Miniaturansicht Set to Cover verhindert, dass die Ernte etwas zerquetscht.

Unter dem Hover-Animation Elementors eigene Animationen verwendet, und Farbeffekt Fügt einen von sechzehn Overlay-Effekten hinzu: Vergrößern und Verkleinern, Drehen und Zoomen, Verschieben, Graustufen, Unschärfe, Sepia, die beiden Unschärfe-Kombinationen, zwei Deckkraft-Ausblendungen, Spülen, Glanz und Kreis. Miniaturformen Fügt oben fünf Rahmen hinzu: Gerahmt, Diagonal, begrenzt, Gradient Bordered und Quadrate.

Wählen Sie einen Effekt aus und verwenden Sie ihn überall. Drei verschiedene auf einer Seite werden als Rauschen gelesen.

Schritt 6: Wählen Sie aus, welche Meta angezeigt werden soll

Offen Beiträge Einstellungen und alles abschalten, was der Leser nicht braucht.

Auszug Länge Standardmäßig auf 55 Wörter, was für eine Karte lang ist. Lassen Sie es auf 15 bis 25 fallen, damit das Raster scannbar bleibt und der Klick zum Beitrag statt zur Zusammenfassung geht. Lesen Sie mehr Text Freitext ist, so dass “Lesen Sie den Leitfaden” genauso gut funktioniert wie “Weiterlesen”.

Die Kipphebel unterhalb von Kontrollposttitel, Autorenavatar, Autorenname, Datum, Kategorien, Tags und Kommentar zählen unabhängig voneinanderDrehen Anzeigekategorien? on lohnt sich in der Regel, da es den Lesern einen zweiten Weg in verwandte Beiträge bietet.

Schritt 7: Filtern Sie, welche Beiträge erscheinen

Offen Erweiterte Einstellungen. Dies ist der Abschnitt Abfrage.

• Nach Kategorie filtern, Nach Tag filtern und Nach Autor filtern Enge die Abfrage Jeder akzeptiert mehrere Werte.
• Beiträge zum Ausschließen Verfällt bestimmte Beiträge namentlich, sodass Sie eine angeheftete Ansage aus dem Hauptraster heraushalten.
• Offset-Postanzahl Überspringt die ersten N-Beiträge Setze ein Featured-Widget über dem Raster, um die letzten drei anzuzeigen, dann versetze das Raster um drei, und kein Beitrag erscheint zweimal.
• Links in New Tab Tut, was es sagt.

Schritt 8: Veröffentlichen und überprüfen Sie das Ergebnis

Drücken Sie Veröffentlichen und öffnen Sie die Seite in einem normalen Browser-Tab. Hier ist das fertige Raster: drei Spalten, Karten, einheitliche Miniaturansichten, Kategorien-Tabs über die Oberseite.

Die Gesamtzeit beträgt weniger als zehn Minuten, sobald Sie wissen, wo sich die Steuerung befindet.

Kategoriefilter-Tabulatoren zur Blogseite hinzufügen

Die Filterregisterkarten oben auf diesem Screenshot sind kostenlos und sie sind der Teil, den die Leute verpassen. Leser können das Raster nach Kategorien eingrenzen, ohne die Seite zu verlassen.

Einschalten Kategorie Filter Tabs In Erweiterte Einstellungen. dann im Feld Filter Nach Kategorie die gewünschten Kategorien als Tabs auswählen, Die Tabs werden aus dieser Auswahl aufgebaut, nicht aus den Kategorien der Beiträge auf der Seite Lassen Sie das Feld leer und Sie erhalten einen einzigen Alle Tab und sonst nichts, was kaputt aussieht, aber so funktioniert, wie es entworfen wurde.

Alle Texte Benennt die erste Registerkarte um und Ausrichtung Verschiebt die Reihe nach links, in die Mitte oder nach rechts Filterlaschen und das Karussell schließen sich gegenseitig aus, wenn Sie also das Karussell aktivieren, hören die Laschen auf zu rendern.

Gitter, Liste oder Mauerwerk: welches Layout verwendet werden soll

Gitter Ist die Voreinstellung und passt zu den meisten Blogs Gleichwertige Karten, drei quer, scannbar Verwenden Sie es mit einer benutzerdefinierten Miniaturansichtshöhe, damit die Zeilen aufgereiht werden.

Liste Legt einen Beitrag pro Zeile mit dem Miniaturbild neben den TextStellen Sie die Anzahl der Spalten auf 1 Spalte ein, wenn Sie zu Liste wechseln, oder Sie erhalten drei Listenelemente, die nebeneinander zusammengepfercht sind.

List gibt dem Auszug Raum zum Atmen, sodass er für Blogs im Essay-Stil funktioniert, bei denen die Zusammenfassung den Verkauf übernimmt.

Mauerwerk Behält die Spalten, lässt aber die feste Zeilenhöhe fallen, sodass die Karten nach Inhalt gestapelt werden und sich die Lücken schließen.

Mauerwerk ist der einzige Fall, in dem Sie die benutzerdefinierte Höhe weglassen sollten, da die unebenen Höhen dafür sorgen, dass es funktioniert. Es passt zu fotogeführten Blogs und zerfällt, wenn jedes vorgestellte Bild die gleiche Form hat.

Machen Sie aus dem Blograster ein Karussell

Das gleiche Widget dient gleichzeitig als Postkarussell, was Sie sich auf einer Startseite und nicht auf der Blogseite selbst wünschen.

Schalter Karussell aktivieren? Ein und der Abschnitt Karusselleinstellungen öffnet sich: Autoplay - und Autoplay-Geschwindigkeit, Pause beim Hover, Dias zum Scrollen pro Gerät, Mittelfolie, Greifcursor, Drag Free-Modus, Schleife, und Animationsgeschwindigkeit Die Layoutsteuerung bietet auch einen Coverflow-Effekt mit eigenen Einstellungen für Drehen, Dehnen, Modifizieren und Tiefe.

Beobachter Ja sein sollte, wenn das Karussell in einer Lasche, einem Akkordeon oder etwas anderem sitzt, das auf Seitenlast versteckt ist, andernfalls misst es sich selbst auf Nullbreite und rendert als Stapel.

Zeigt das geänderte Datum anstelle des veröffentlichten Datums an

Das Blog-Posts-Widget kann Sortieren Nach geändertem Datum: eingestellt Bestellung von Zuletzt geändert in Anzeigeoptionen und kürzlich aktualisierte Beiträge steigen nach oben Das allein ist oft das, was die Leute eigentlich wollen, denn es hält aktualisierte Inhalte sichtbar.

Das geänderte Datum als sichtbaren Text anzeigen ist anders Das Widget gibt das veröffentlichte Datum in der Karte aus, während das zugrunde liegende <time datetime> Attribut trägt das geänderte Datum Suchmaschinen lesen das Attribut, so dass Ihre aktualisierten Daten veröffentlicht werden, auch wenn die Karte etwas anderes sagt, aber ein Leser sieht das ursprüngliche Datum.

Um das geänderte Datum als Text anzuzeigen, benötigen Sie die dynamischen Tags von Elementor Pro, wobei das Post Date-Tag eine geänderte Option hat, die in einem Pro Posts- oder Loop Grid-Widget verwendet wird. Es gibt kein kostenloses Elementor-Äquivalent, da dynamische Tags in erster Linie ein Pro-Feature sind. Die kostenlose Alternative ist ein kleines Snippet, das filtert get_the_time Für Ihre Blogvorlage.

Blogseite oder Postseite? richtig einstellen

WordPress hat eine eigene Postseite, gesetzt unter Einstellungen → Lesen. Die Seite, die Sie gerade erstellt haben, ist eine normale Seite, und die beiden verhalten sich unterschiedlich.

Wenn Sie Ihre Elementor-Seite als Posts-Seite in Einstellungen → Lesen zuweisen, gibt WordPress die URL an die Archivvorlage des Themes und Ihr Elementor-Design wird ignoriert. Das ist der häufigste Grund, warum eine fertige Blog-Seite stattdessen die Standardliste des Themes anzeigt.

Zwei Möglichkeiten, es richtig zu machen:

• Behalte es eine normale Seite. Lassen Sie Einstellungen → Lesen in Ruhe und fügen Sie Ihre Blog-Seite dem Menü unter Aussehen → Menüs hinzu. Die Seite rendert Ihr Elementor-Design, was Sie möchten.
• Bauen Sie das echte Archiv auf. Wenn Sie möchten, dass die WordPress-Archiv-URL selbst Ihr Design verwendet, erstellen Sie eine Archivvorlage in der Master Addons Theme Builder Und stellen Sie die Quelle des Blog-Posts-Widgets auf aktuelle Abfrage ein, sodass es dem angezeigten Archiv folgt.

Master Addons Blog Beiträge vs das Elementor Pro Beiträge Widget

Elementor Pro gewinnt auf dynamischen Tags, lade-mehr und unendlich scrollen Das kostenlose Master Addons Widget gewinnt auf Layout-Vielfalt, Hover-Effekte, Filter-Tab und das eingebaute KarussellWenn Popups, Formulare und Theme-Building Sie bereits in Richtung Pro ziehen, kaufen Sie Pro. Wenn die Blog-Seite der einzige Grund ist, warum Sie darüber nachgedacht haben, deckt dies sie umsonst ab, und die Master Addons-Lizenz Ist nur einen Blick wert, wenn Sie die Pro-Widgets woanders haben möchten.

Sieben Korrekturen für ein Blog-Layout, das falsch aussieht

1. Zerrissene Kartenhöhen. Schalten Sie die benutzerdefinierte Höhe in den Miniaturansichten ein und stellen Sie min und max auf den gleichen Wert ein. Dies ist der Fix neun von zehn Mal.
2. Ein leeres Rechteck im Gitter. Dieser Beitrag hat kein Bild. Fügen Sie eines hinzu, sogar eine einfache Markengrafik.
3. Auszüge beim Schlucken der Karte. Drop-Auszug Länge von 55 bis etwa 20 Wörter.
4. Drei Listenelemente nebeneinander. Anforderungen an das Listenlayout Anzahl der auf 1 Spalte gesetzten Spalten.
5. Filterregisterkarten, die nur alle anzeigen. Wählen Sie die Kategorien in Filter Nach Kategorie Die Registerkarten stammen aus diesem Feld.
6. Alles mobil in einer langen Spalte gestapelt. Das ist in der Regel richtig Prüfen Sie es mit dem Geräteumschalter und setzen Sie mobile Spalten bewusst, anstatt es dem Zufall zu überlassen Unser Leitfaden zum Elementor-bruchpunkte Den Rest deckt.
7. Langsame Blogseite. Überprüfen Sie die Größe Ihrer vorgestellten Bilder, bevor Sie dem Widget die Schuld geben Komprimieren Sie sie zuerst; sehen Sie sich unsere an Bildoptimierer-Rundung und die Anmerkungen zu Beschleunigung von Elementor-Sites.

Häufig gestellte Fragen

Verwandte Lektüre

• Blog Beiträge Widget, die Feature-Seite mit jeder aufgeführten Einstellung
• Blog-Element-Dokumentation
• So erstellen Sie einen Sticky-Header in Elementor
• So bearbeiten Sie die Fußzeile in WordPress mit Elementor
• Master Addons Vorlagenbibliothek‘wenn Sie lieber eine fertige Seite importieren möchten
• Master-Addons auf WordPress.org