So erstellen Sie eine benutzerdefinierte Vorlage für Elementor-Blogbeiträge (einfache Anleitung)

Suchen Sie nach dem einfachsten Tutorial zum Erstellen einer benutzerdefinierten Vorlage für Elementor-Blogbeiträge?

Blogs sind eine der beliebtesten und effektivsten Methoden, um Aufmerksamkeit für Ihr Produkt zu schaffen. Wenn Sie jedoch den größten Nutzen aus dem Content-Marketing ziehen möchten, müssen Sie sicherstellen, dass Ihre Blog-Seite ein fesselndes Aussehen und die richtigen Informationen hat.

Um Ihren Blog-Beitrag ansprechend zu gestalten, müssen Sie Ihre eigene benutzerdefinierte Blog-Vorlage erstellen. Und Sie können mit Elementor eine hervorragende Blog-Post-Vorlage erstellen, um Ihr Publikum anzusprechen. Sie können eine benutzerdefinierte Elementor-Blogseite von Grund auf neu erstellen oder eine mit vorgefertigten Vorlagen erstellen.

In diesem Artikel erfahren Sie, wie Sie mit zwei Methoden auf einfachste Weise eine Elementor-Blogbeitragsvorlage erstellen . Also, lesen Sie weiter…

Plugins, die Sie installieren müssen, um eine benutzerdefinierte Vorlage für Elementor-Blogposts zu erstellen

Um mühelos einen Blog-Beitrag in WordPress mit Elementor Page Builder zu erstellen, benötigen Sie beides

• Elementar (kostenlos)

• und ElementorPro.

So erstellen Sie eine benutzerdefinierte Elementor-Blogseitenvorlage von Grund auf neu

Elementor Pro bietet alle notwendigen Widgets, die Sie benötigen, um eine beeindruckende benutzerdefinierte Blog-Post-Vorlage von Grund auf neu zu erstellen. Befolgen Sie einfach die unten aufgeführten Schritte, um Ihre einzelne Elementor-Beitragsvorlage zu erstellen:

Schritt 1: Erstellen Sie eine neue Single-Blog-Vorlage

Zunächst müssen Sie eine einzelne Blog-Vorlage erstellen. Gehen Sie dazu zum WordPress Dashboard und navigieren Sie dann zu Vorlagen ⇒ Neu hinzufügen

und klicken Sie auf die Schaltfläche Neu hinzufügen . Sobald sich das neue Fenster öffnet, wählen Sie Einzelbeitrag als Vorlagentyp aus der Dropdown-Liste aus, geben Sie einen Namen Ihrer Wahl ein und klicken Sie dann auf Vorlage erstellen .

Jetzt sollten Sie die vorgefertigten Layouts sehen (wie Sie diese verwenden, wird später behandelt). Da wir eine Blog-Vorlage von Grund auf neu erstellen werden, klicken Sie auf die Kreuzschaltfläche in der oberen rechten Ecke , um dieses Fenster zu schließen.

Schritt 2: Wählen Sie eine Struktur/ein Layout für die Blogbeitragsvorlage aus

Jetzt müssen Sie eine Struktur für Ihr Blog-Template auswählen, es wird empfohlen, nicht die gesamte Breite einer Seite zu verwenden, da es für den Benutzer schwierig wird, sie zu lesen. Um eine Struktur für Ihre benutzerdefinierte Elementor-Blogseitenvorlage auszuwählen, klicken Sie auf das +-Symbol und wählen Sie die gewünschte aus und klicken Sie einfach auf die Struktur, um sie einzufügen.

Hinweis: Um zu sehen, wie ein Blog mit der von Ihnen erstellten Vorlage aussehen wird, wählen Sie einen vorhandenen Blog aus der Option „ Vorschau dynamischer Inhalte “ aus. Um dies einzustellen, klicken Sie auf die Option Einstellungen in der unteren linken Ecke.

Wählen Sie dann Post aus der Dropdown-Liste Vorschau dynamischer Inhalte aus und geben Sie den Namen des Blogs ein, den Sie in der zweiten Dropdown-Liste unten auswählen möchten. Klicken Sie abschließend auf Apply & Preview .

Schritt 3: Fügen Sie das Widget „Vorgestelltes Bild“ hinzu und passen Sie die Optionen für den Bildstil an

Sobald Sie das Layout haben, suchen Sie in der linken Editorleiste nach dem Featured Image-Widget. Nachdem Sie das Widget gefunden haben, ziehen Sie es per Drag & Drop an die gewünschte Stelle.

Passen Sie nach dem Laden des Widgets die Bildgröße, Ausrichtung, Bildunterschrift, den Link und die Lightbox-Option an.

Navigieren Sie zum Ändern der Stileinstellungen zur Registerkarte „Stil“ . Hier können Sie Bildhöhe, Breite, Deckkraft, Rand, Radius usw. ändern.

Schritt 4: Elementor Post Info-Widget hinzufügen und anpassen

Nach dem Feature-Bild sollten Sie die postbezogenen Informationen anzeigen, die Sie mit dem Post-Info-Widget tun können. Genau wie beim Beitragsbild suchen Sie zunächst nach dem Post-Info- Widget und ziehen es dann einfach per Drag-and-Drop unter das Beitragsbild-Widget.

Auf der Registerkarte Inhalt des Elementor-Editors können Sie das Layout als Standard oder Inline festlegen. Sie können Optionen für Autor, Datum, Uhrzeit und Kommentare bearbeiten/löschen . Sie können dem Post-Info-Widget auch ein benutzerdefiniertes Feld hinzufügen , indem Sie auf die Schaltfläche + NEU HINZUFÜGEN klicken.

Wechseln Sie erneut zur Registerkarte Stil, um die Stileinstellungen wie Abstand zwischen Listen, Ausrichtung, Symbolfarbe und -größe, Textfarbe und Typografie anzupassen.

Schritt 5: Ziehen Sie das Beitragstitel-Widget per Drag-and-Drop und passen Sie es an

Suchen Sie nun nach dem Post-Titel- Widget und ziehen Sie es unter das Post-Info-Widget und legen Sie es dort ab.

Sie können die Größe, das HTML-Tag und die Ausrichtung des Beitragstitel-Tags anpassen.

Auf der Registerkarte Stil finden Sie Optionen zum Anpassen von Textfarbe, Typografie, Textstrich, Textschatten und Mischmodus.

Schritt 6: Fügen Sie das Post-Content-Widget hinzu und passen Sie es an

Ziehen Sie nun das Post-Content-Widget per Drag-and-Drop . Post-Content-Widget von ElementsKit stellt den Hauptteil (Hauptinhalt) des Blog-Posts dar.

Schritt 7: Ziehen Sie das Social Icons-Widget per Drag-and-Drop, um eine Social-Share-Option hinzuzufügen

Fügen Sie nach dem Beitragsinhalt das Social Icons-Widget per Drag & Drop hinzu . Soziale Symbole bieten Optionen zum Teilen Ihres Blogs auf verschiedenen sozialen Plattformen.

Sie können beliebig viele soziale Symbole hinzufügen/löschen . Darüber hinaus können Sie die Form der Symbole, die Anzahl der anzuzeigenden Spalten und die Ausrichtung anpassen. Sie können auch das Symbol, die Farbe und den Link für die soziale Plattform für jedes der sozialen Symbole anpassen.

Navigieren Sie zur Registerkarte Stil, um die Größe, Farbe, Füllung, Abstände und den Rahmentyp des Symbols zu ändern.

Schritt 8: Fügen Sie das Autorenbox-Widget hinzu und passen Sie die Einstellungen des Widgets an

Suchen Sie nach Author Box und ziehen Sie das Widget per Drag-and-Drop hinter die Social Icons. Sie können auch einen benutzerdefinierten Autor hinzufügen, wenn Sie möchten, aus dem Quellen-Dropdown. Sie können das Profilbild, den Anzeigenamen und die Biografie ein-/ausblenden . Sie können auch andere Einstellungen wie HTML-Tag, Link, Layout, Ausrichtung anpassen.

Navigieren Sie zur Registerkarte Stil, um Optionen wie Bildgröße, Rahmen, Farbe und Typografie des Autorennamens, der Biografie usw. anzupassen.

Schritt 9: Fügen Sie das Post-Navigations-Widget für die Paginierungsoption hinzu

Das Widget Elementor Post Navigation bietet den Lesern Navigationsoptionen, damit sie zu verschiedenen Blogs wechseln können. Um das Post-Navigations-Widget hinzuzufügen, suchen Sie wie zuvor im Editor und ziehen Sie es dann per Drag & Drop nach dem Autorenbox-Widget.

Sie können die Paginierungsbeschriftung oder das Pfeilzeichen entweder ein- oder ausblenden . Sie erhalten etwa 8+ Designoptionen für Pfeile. Sie können auch den Text der vorherigen und nächsten Ebene anpassen.

Sie können die Farbe und Typografie von Beschriftung, Titel, Pfeil und Rahmen sowohl für die normale Ansicht als auch für die Hover-Ansicht ändern.

Schritt 10: Ziehen Sie das Posts-Widget per Drag-and-Drop, um verwandte Posts anzuzeigen

Um die zugehörigen Posts zu präsentieren, verwenden wir das Elementor Posts-Widget . Ziehen Sie also das Posts-Widget nach dem Post-Navigations-Widget und legen Sie es dort ab. Mit diesem Widget können Sie die Hautfarbe ändern, die Anzahl der Spalten, die Anzahl der Beiträge pro Seite, die Bildposition und viele weitere Einstellungen festlegen . Sie können auch die verschiedenen Stile von Layout, Box, Bild und Inhalt ändern.

Schritt 11: Fügen Sie das Widget „Beitragskommentare“ hinzu

Um Ihren Benutzern die Möglichkeit zu geben, Ihre Posts zu kommentieren, müssen Sie die Posts Comments Widgets hinzufügen. Suchen Sie nach dem Widget „Posts Comments“ und ziehen Sie es unter das Posts-Widget.

Schritt 12: Aktualisieren und sehen Sie die benutzerdefinierte Blog-Seitenvorlage von Elementor

Nachdem das gesamte Design fertig ist, klicken Sie auf die Schaltfläche „Aktualisieren“ . Wenn das Fenster mit den Veröffentlichungseinstellungen angezeigt wird, klicken Sie auf Speichern und schließen.

Hier ist die Vorschau der benutzerdefinierten Elementor-Blogbeitragsvorlage, die wir gerade erstellt haben.

Wenn Sie die oben beschriebene Methode zu zeitaufwändig fanden, können Sie sich für die unten erwähnte Methode entscheiden, bei der Sie nicht jeden Abschnitt von Grund auf neu erstellen und entwerfen müssen.

So erstellen Sie die einzelne Beitragsseite mit einer vorgefertigten Elementor-Vorlage

Wenn Sie vorhaben, eine vorgefertigte Vorlage für Ihre benutzerdefinierte Elementor-Blogseite zu verwenden, können Sie dies in nur 3 Schritten tun. Lassen Sie uns überprüfen, wie:

Schritt 1: Erstellen Sie über das Dashboard eine neue Vorlage für einzelne Blogbeiträge

Wie bei der ersten Methode müssen Sie eine neue einzelne Blog-Vorlage erstellen. Für weitere Details zum Erstellen der neuen Vorlage scrollen Sie ein wenig nach oben und sehen Sie sich den ersten Schritt der ersten Methode an (wie man eine Blog-Vorlage von Grund auf neu erstellt).

Schritt 2: Wählen Sie eine vorgefertigte Elementor Single Post-Vorlage

Sobald Sie auf Vorlage erstellen klicken, sehen Sie das Elementor-Bibliotheksfenster mit vielen benutzerdefinierten Einzelpostvorlagen. Hier können Sie einen beliebigen Einzelpostblock auswählen. Bewegen Sie den Mauszeiger über die Vorlage Ihrer Wahl und klicken Sie auf Einfügen.

Schritt 3: Wählen Sie eine vorgefertigte Elementor Single Post-Vorlage

Sobald die Vorlage geladen ist, klicken Sie auf die Schaltfläche „Veröffentlichen“ , um alle neuen Blog-Vorlagen zu speichern.

Hier ist ein endgültiges Aussehen eines Blog-Posts mit einem Elementor-Blog-Post unter Verwendung einer vorgefertigten Vorlage für einen einzelnen Post.

So erstellen Sie mit ElementsKit eine Seite mit den neuesten Beiträgen von Elementor

Nachdem Sie nun eine ansprechende Vorlage für einzelne Posts haben, ist es an der Zeit, eine benutzerdefinierte Blog-Listenseite zu erstellen, damit alle Ihre Blogs auf ansprechende und benutzerfreundliche Weise angezeigt werden. Schauen wir uns an, wie Sie mit ElementsKit ein benutzerdefiniertes Element oder die neuesten Beiträge erstellen können.

Schritt 1: ElementsKit installieren und aktivieren

Um zusammen mit dem Elementor-Seitenersteller eine beeindruckende Blog-Listing-Seite zu erstellen, benötigen Sie ElementsKit. ElementsKit ist ein All-in-One-Plugin für Elementor mit über 85 Widgets und Modulen, um die Webentwicklung einfacher denn je zu machen.

Schritt 2: Aktivieren Sie das auf die Beitragsliste bezogene Widget

Nach der Aktivierung müssen Sie das beitragsbezogene Widget aktivieren, um die Seite mit der Beitragsliste zu erstellen. ElementsKit bietet eine Reihe von Widgets zum Anzeigen Ihrer Blog-Listen, darunter Blog-Posts, Post-Raster, Post-Liste, Post-Tab-Widget usw. Sie können das Widget aktivieren, das Sie verwenden möchten.

Schritt 3: Fügen Sie das Widget hinzu und passen Sie es an

Gehen Sie jetzt zur Bloglistenseite, suchen Sie nach dem Widget und ziehen Sie es einfach per Drag & Drop. Sobald das Widget geladen ist, können Sie die zugehörigen Einstellungen anpassen, um Ihre Bloglistenseite zu personalisieren. Werfen wir einen Blick darauf, wie eine Blog-Listenseite mit einigen ElementsKit-Widgets und ihren Anpassungsoptionen aussehen wird.

Blogeinträge:

Mit dem Blogpost-Widget können Sie Ihre Blogs im Blockformat, Raster mit Daumen und Raster ohne Daumen anzeigen. Sie können auch die Anzahl der Beiträge festlegen, die pro Zeile angezeigt werden sollen, Paginierung aktivieren/deaktivieren und viele weitere Optionen. Weitere Informationen finden Sie in unserem Blog zum Anzeigen aktueller Blogbeiträge.

Pfostenraster:

Mit dem Post-Grid-Plugin können Sie anpassen, welche Kategorie-Blogs Sie in Ihrer Blog-Liste anzeigen möchten. Sie können auch die Anzahl der anzuzeigenden Beiträge und die Spaltennummern auswählen, die jede Zeile haben soll. Weitere Einzelheiten finden Sie in unserer Dokumentation.

Post-Tab-Widget

Mit einem Post-Tab -Widget erhalten Sie alle Anpassungsoptionen wie Post Grid zusammen mit einem zusätzlichen Kategorie-Tab. Mit dieser Option können Benutzer einfach auf eine beliebige Kategorie-Registerkarte zeigen und nur die Blogs aus dieser bestimmten Kategorie sehen.

Nachdem Sie Ihr Widget ausgewählt und Ihren Wünschen entsprechend angepasst haben, klicken Sie zum Veröffentlichen auf die Schaltfläche „Aktualisieren“. Jetzt sollten Sie eine Seite haben, auf der die neuesten Beiträge von Elementor auf ansprechende Weise angezeigt werden.

Letzte Worte

Wir haben unser Bestes gegeben, um Ihnen ein einfaches Tutorial zur Verfügung zu stellen, wie Sie auf zwei Arten eine benutzerdefinierte Elementor-Blogbeitragsvorlage erstellen können. Wir hoffen, Sie fanden den Blog hilfreich, um Ihre benutzerdefinierte Elementor-Blogvorlage zu erstellen. Sie können den Schritten folgen und die Layouts sowie Designs nach Ihrer Wahl ändern.

Und vergessen Sie nicht, Ihrer Blog-Listenseite mit ElementsKit-Widgets eine außergewöhnliche Note zu verleihen. ElementsKit ist die perfekte Ergänzung zu Elementor, nehmen Sie sich Zeit, um sich all die erstaunlichen Widgets anzusehen, die dieses Addon zu bieten hat.