So erstellen Sie eine benutzerdefinierte Elementor-Blogpost-Vorlage (einfachste Methode)

Blogs sind eine der beliebtesten und effektivsten Methoden, um auf Ihr Produkt aufmerksam zu machen. Wenn Sie jedoch den größtmöglichen Nutzen aus Content-Marketing ziehen möchten, müssen Sie sicherstellen, dass Ihre Blog-Seite ein ansprechendes 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 erstellen von Grund auf neu erstellen oder eines mit vorgefertigten Vorlagen erstellen.

In diesem Artikel erfahren Sie es So erstellen Sie eine benutzerdefinierte Elementor-Blogpost-Vorlage mit zwei Methoden auf möglichst einfache Art und Weise. Lesen Sie also weiter …

Was sind benutzerdefinierte Blog-Post-Vorlagen?

Benutzerdefinierte Blog-Beitragsvorlagen sind vorgefertigte Layouts, die erstellt wurden, um das visuelle Erscheinungsbild und die Struktur einzelner Blog-Beiträge auf einer Website zu verbessern. Anstatt Standardvorlagen zu verwenden, können Sie das Design Ihrer Blogbeiträge anpassen. Es verleiht Ihrer gesamten Website ein einheitliches und einzigartiges Erscheinungsbild. 

Sie können zum Beispiel nutzen Elementor und Add-ons z.B ElementKit in WordPress, um eine benutzerdefinierte Blog-Beitragsvorlage zu erstellen. Eine Elementor-Einzelbeitragsvorlage kann eine bestimmte Anordnung von enthalten Text, Bilder, Überschriften, Schaltflächen und andere Elemente. Für die Drag-and-Drop-Funktion von Elementor wird es ein Kinderspiel sein, ein zusammenhängendes Erscheinungsbild über verschiedene Blogbeiträge hinweg aufrechtzuerhalten.

Warum Sie Ihre benutzerdefinierte Elementor-Blogpost-Vorlage entwerfen müssen

Nicht nur das Hinzufügen von Elementor-Blogpost-Vorlagen steigert die Ästhetik Ihrer Inhalte. Es spielt auch eine entscheidende Rolle bei der Etablierung eines einzigartige Markenidentität. 

Bevor wir mit dem Tutorial zum Erstellen einzelner Post-Vorlagen in Elementor beginnen, wollen wir uns mit der Bedeutung des Entwerfens benutzerdefinierter Elementor-Blog-Post-Vorlagen befassen. 

✨ Einzigartiges Branding

Durch das Entwerfen einer benutzerdefinierten Elementor-Blogpost-Vorlage können Sie dies tun Einbindung einzigartiger Markenelemente.  Sie können Farben, Logos und Typografie hinzufügen und so eine einheitliche visuelle Identität für Ihre Inhalte schaffen.

Sie können zum Beispiel Ihre verwenden Markentypisches Farbschema und Logo Platzierung innerhalb der Vorlage, um die Markenbekanntheit zu stärken.

👌Professioneller Auftritt

Benutzerdefinierte Elementor-Vorlagen tragen zu einem professionelleren Erscheinungsbild Ihrer Blogbeiträge bei. Durchdachte Designelemente können die Ästhetik verbessern und Ihre Inhalte für die Leser optisch ansprechend machen.

Hierfür sollten Sie sich für a entscheiden klares und modernes Design mit gut ausgewählten Schriftarten und Bildern, um Ihrer Elementor-Einzelbeitragsvorlage ein professionelles Aussehen zu verleihen.

🚀 Verbesserte Benutzererfahrung

Eine gut gestaltete Elementor-Vorlage verbessert das gesamte Benutzererlebnis. Wie? 

Nun, eine benutzerdefinierte Elementor-Artikelvorlage bietet Konsistenz in Layout und Design. Außerdem werden die Navigation und der Konsum von Inhalten dadurch intuitiver.

Dazu müssen Sie auf klare Überschriften, organisierte Inhalte und eine einfache Navigation innerhalb der Vorlage achten, um das Leseerlebnis für Ihr Publikum insgesamt zu verbessern.

🤩 Anpassungsfähigkeit für verschiedene Inhaltstypen

Benutzerdefinierte Elementor-Blogpost-Vorlagen bieten Flexibilität Außerdem können Sie das Design an die Art des von Ihnen präsentierten Inhalts anpassen.

Sie müssen in Elementor einzelne Beitragsvorlagen entwerfen, die verschiedene Inhaltsformate aufnehmen können. Sie können beispielsweise eine Elementor-Blogseite mit vorgefertigten, visuell ansprechenden Layouts, Multimedia-Beiträgen oder einem gut strukturierten Format für lange Artikel entwerfen.

⏰ Zeiteffizienz

Benutzerdefinierte Vorlagen Zeit sparen, insbesondere für häufige Content-Ersteller. Sie können mit Elementor ganz einfach eine Blog-Seite in WordPress erstellen und bearbeiten und dabei ein elegantes Erscheinungsbild beibehalten, ohne bei Null anfangen zu müssen.

Sie können sie auch herstellen wiederverwendbare Vorlagen einschließlich Ihrer bevorzugten Formatierung, Stilisierung und Strukturelemente.

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

Um mühelos einen benutzerdefinierten Blog-Beitrag in WordPress mit dem Elementor-Seitenersteller zu erstellen, benötigen Sie:

• Elementor (kostenlos)

• Elementor Pro.

So erstellen Sie eine benutzerdefinierte Elementor-Blogpost-Vorlage: Schritt-für-Schritt-Anleitung

Elementor Pro bietet alle notwendigen Widgets, die Sie zum Erstellen einer atemberaubenden benutzerdefinierten Blog-Beitragsvorlage von Grund auf benötigen. Befolgen Sie einfach die unten aufgeführten Schritte zum Hinzufügen eines Blog-Beitrags in WordPress mit Elementor.🤩

Schritt 1: Erstellen Sie eine neue einzelne Blog-Vorlage

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

Klicken Sie anschließend auf die Schaltfläche „Neu hinzufügen“.. Sobald das neue Fenster geöffnet wird, wählen Sie aus Einzelner Beitrag als Typ der Vorlage aus der Dropdown-Liste, einen Namen angeben Ihrer Wahl und klicken Sie dann auf Vorlage erstellen.

Jetzt sollten Sie die vorgefertigten Layouts sehen (wie Sie diese verwenden, erfahren Sie später). Da wir eine Elementor-Blog-Vorlage von Grund auf erstellen werden, klicken Sie auf 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  

Jetzt müssen Sie eine Struktur für Ihre Blog-Vorlage auswählen. Es wird empfohlen, nicht die gesamte Breite einer Seite zu nutzen, da es für den Benutzer dann schwierig wird, sie zu lesen.

Um eine Struktur für Ihre benutzerdefinierte Blog-Seitenvorlage in Elementor auszuwählen, Klicken Sie auf das +-Symbol Wählen Sie das aus, das Ihnen gefällt, und einfach Klicken Sie auf die Struktur, um sie einzufügen.

Notiz: Um zu sehen, wie ein Blog mit der von Ihnen erstellten Vorlage aussehen wird, wählen Sie ein vorhandenes Blog aus der aus Vorschau dynamischer Inhalte anzeigen Möglichkeit. Um dies festzulegen, klicken Sie auf Einstellungen Option in der unteren linken Ecke.

Dann wähle Post von dem Vorschau dynamischer Inhalte als Dropdown-Liste und geben Sie im zweiten Dropdown-Menü unten den Namen des Blogs ein, den Sie auswählen möchten. Klicken Sie abschließend auf Anwenden und Vorschau anzeigen.

Schritt 3: Fügen Sie das Widget „Ausgewähltes Bild“ hinzu und passen Sie die Bildstiloptionen an

Sobald Sie das Layout erstellt haben, suchen Sie in der linken Editorleiste nach dem Widget „Ausgewähltes Bild“. 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, Beschriftung, den Link und die Lightbox-Option an.

Um die Stileinstellungen zu ändern, navigieren Sie zu Registerkarte „Stil“.. Hier können Sie i ändernHöhe, Breite, Deckkraft, Rand, Radius usw.

👉👉 Sie können auch unseren Blog auf besuchen So erstellen Sie ein Mega-Menü mit Elementor

Schritt 4: Fügen Sie das Elementor-Blogpost-Info-Widget hinzu und passen Sie es an

Nach dem Feature-Bild sollten Sie die beitragsbezogenen Informationen anzeigen, die Sie mit dem bearbeiten können Post-Info-Widget. Genau wie das abgebildete Bild, zunächst Suchen Sie nach den Beitragsinformationen Widget dann einfach Drag & Drop unter dem Widget „Ausgewähltes Bild“.

Auf der Registerkarte Inhalt des Elementor-Editors können Sie dies tun Legen Sie das Layout als Standard oder Inline fest. Du kannst Bearbeiten/Löschen der Optionen „Autor“, „Datum“, „Uhrzeit“ und „Kommentare“.. Du kannst auch Fügen Sie ein benutzerdefiniertes Feld hinzu zum Post-Info-Widget von Klicken Sie auf die Schaltfläche + NEU HINZUFÜGEN.

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

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

Jetzt, Suchen Sie nach dem Beitragstitel Widget und Drag & Drop unterhalb des Blogbeitrag-Info-Widgets.

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

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

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

Jetzt, Ziehen Sie das Beitragsinhalts-Widget per Drag & Drop. Das Blogpost-Inhalts-Widget von ElementsKit stellt den Hauptinhalt (Hauptinhalt) des Blogposts dar.

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

Nach dem Beitragsinhalt, Fügen Sie das Widget „Social Icons“ hinzu durch Ziehen und Ablegen. Social Icons bieten Optionen zum Teilen Ihres Blogs auf verschiedenen sozialen Plattformen.

Du kannst Fügen Sie beliebig viele soziale Symbole hinzu bzw. löschen Sie sie wie du willst. Darüber hinaus können Sie die anpassen Form der Symbole, Anzahl der Spalten, die angezeigt werden sollen, und Ausrichtung. Du kannst auch Passen Sie das Symbol, die Farbe und den Link der sozialen Plattform für jedes soziale Symbol an.

Navigieren Sie zur Registerkarte „Stil“, um die zu ändern Symbolgröße, Farbe, Abstand, Abstand und Rahmentyp.

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

Suchen Sie nach dem Klicken Sie auf das Autorenfeld und ziehen Sie das Widget per Drag-and-Drop nach den sozialen Symbolen. Sie können bei Bedarf auch einen benutzerdefinierten Autor über das Quellen-Dropdown hinzufügen. Sie können wählen, ob Sie Profilbilder, Anzeigenamen und Biografie ein-/ausblenden möchten. Sie können auch andere Einstellungen wie HTML-Tag, Link, Layout usw. anpassen Ausrichtung.

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

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

Elementor Post-Navigations-Widget bietet den Lesern Navigationsoptionen, damit sie zu verschiedenen Blogs wechseln können. Um das Beitragsnavigations-Widget hinzuzufügen, suchen Sie zunächst im Editor und ziehen Sie es dann per Drag-and-Drop nach dem Autorenbox-Widget.

Du kannst entweder Blenden Sie die Paginierungsbezeichnung ein oder aus oder Pfeilzeichen. Du kommst herum 8+ Designoptionen für Pfeile. Du kannst auch Passen Sie den Text der vorherigen und nächsten Ebene an.

Sie können das c ändernFarbe und Typografie des Etiketts, des Titels, des Pfeils und der Ränder sowohl für die normale als auch für die Hover-Ansicht.

Schritt 10: Ziehen Sie das Beitrags-Widget per Drag-and-Drop, um verwandte Beiträge anzuzeigen

Um die entsprechenden Beiträge zu präsentieren, verwenden wir die Elementor-Beiträge-Widget. Ziehen Sie also das Beitrags-Widget per Drag-and-Drop nach dem Beitrags-Navigations-Widget. Mit diesem Widget können Sie Ändern Sie die Hautfarbe, legen Sie die Anzahl der Spalten, die Anzahl der Beiträge pro Seite und die Bildposition fest. und viele weitere Einstellungen. Sie können auch das d ändernVerschiedene Layoutstile, Boxen, Bilder und Inhalte.

Schritt 11: Widget „Post-Kommentare“ hinzufügen

Um Ihren Benutzern die Möglichkeit zu geben, Ihre Beiträge zu kommentieren, müssen Sie die Beitragskommentar-Widgets hinzufügen. Suchen Sie nach dem Widget „Beiträge Kommentare“ und ziehen Sie es per Drag-and-Drop unter das Widget „Blog-Beiträge“.

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

Nachdem nun 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-Blogvorlage, die wir gerade erstellt haben.

Wenn Ihnen die oben beschriebene Methode zu zeitaufwendig ist, können Sie sich für die unten genannte Methode entscheiden, bei der Sie nicht jeden Abschnitt von Grund auf neu erstellen und gestalten müssen, um Ihre Elementor-Blog-Vorlage zu erstellen.

👉👉 Sie können auch unseren Blog auf lesen So fügen Sie in 5 einfachen Schritten ein mehrstufiges Formular in Elementor hinzu

So erstellen Sie die einzelne Beitragsseite mit der vorgefertigten Elementor-Blogvorlage

Wenn Sie planen, eine vorgefertigte Vorlage für Ihre benutzerdefinierte Elementor-Blogseite zu verwenden, können Sie dies in nur drei Schritten tun. Schauen wir uns an, wie:

Schritt 1: Erstellen Sie eine neue Vorlage für einen einzelnen Blogbeitrag über das Dashboard

Wie bei der ersten Methode müssen Sie eine neue einzelne Blog-Vorlage erstellen. Weitere Informationen zum Erstellen der neuen Vorlage finden Sie hier Scrollen Sie ein wenig nach oben und überprüfen Sie den ersten Schritt der ersten Methode (wie man eine Blog-Vorlage von Grund auf erstellt).

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

Sobald Sie auf „Vorlage erstellen“ klicken, wird das Elementor-Bibliotheksfenster mit vielen benutzerdefinierten Vorlagen für einzelne Beiträge angezeigt. Hier können Sie einen beliebigen Einzelpfostenblock 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 letzter Blick auf einen Blog-Beitrag, der einen Elementor-Blog-Beitrag mit einer vorgefertigten Vorlage für einen einzelnen Beitrag verwendet.

👉👉 Du kannst auch zur Kasse gehen So fügen Sie der Elementor WooCommerce-Website einen Multi-Währungsumschalter hinzu

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

Nachdem Sie nun über eine attraktive Vorlage für einen einzelnen Blogbeitrag verfügen, 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 benutzerdefinierte Elementor-Neueste-Beiträge erstellen können.

Schritt 1: ElementsKit installieren und aktivieren

Um eine beeindruckende Blog-Listing-Seite zu erstellen, benötigen Sie neben dem Elementor-Seitenersteller ElementsKit. ElementsKit ist ein All-in-One-Plugin für Elementor Mit über 85 Widgets und Modulen wird die Webentwicklung einfacher als je zuvor.

Schritt 2: Aktivieren Sie das Widget für die Beitragsliste

Nach der Aktivierung müssen Sie das beitragsbezogene Widget aktivieren, um die Seite mit der Beitragsliste zu erstellen. ElementsKit bietet mehrere Widgets zum Anzeigen Ihrer Blog-Listen, darunter Blog-Beiträge, Beitragsraster, Beitragslisten und Beitrags-Tab-Widgets, usw.  Sie können das Widget aktivieren, das Sie verwenden möchten.

👉👉 Schauen Sie sich an, wie Sie ein schönes schaffen können Elementor-One-Page-Scroll-Navigation mit ElementsKit

Schritt 3: Widget hinzufügen und anpassen

Gehen Sie nun zur Blog-Listenseite, 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 Blog-Listenseite zu personalisieren. 

Schauen wir uns an, wie eine Blog-Listenseite mit einigen der ElementsKit-Widgets und ihren Anpassungsoptionen aussehen wird.

Blogeinträge: 

Mit dem Blog-Post-Widget können Sie Ihre Blogs anzeigen Blockformat, Raster mit Daumen und Raster ohne Daumendesign. Sie können auch die Anzahl der Beiträge festlegen, die pro Zeile angezeigt werden sollen, die Paginierung aktivieren/deaktivieren und viele weitere Optionen. Weitere Einzelheiten finden Sie in unserem Blog unter So zeigen Sie aktuelle Blog-Beiträge an.

Beitragsraster:

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 Informationen finden Sie in unserem Dokumentation.

Beitragsregisterkarte:

Mit einem Beitragsregisterkarte Widget erhalten Sie alle Anpassungsoptionen wie Post Grid sowie eine zusätzliche Kategorieregisterkarte. Mit dieser Option können Benutzer einfach Bewegen Sie den Mauszeiger über eine beliebige Kategorieregisterkarte und sehen Sie nur die Blogs aus dieser bestimmten Kategorie.

Sobald Sie Ihr Widget ausgewählt und nach Ihren Wünschen 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 verlockend angezeigt werden.

Fazit: Erstellen Sie eine benutzerdefinierte Elementor-Blogpost-Vorlage

Wir haben unser Bestes getan, um Ihnen ein einfaches Tutorial zur Verfügung zu stellen So erstellen Sie benutzerdefinierte Elementor-Blogpost-Vorlagen. Wir hoffen, dass Sie den Blog beim Erstellen Ihrer benutzerdefinierten Blog-Vorlage auf der WordPress-Site hilfreich fanden. Sie können den Schritten folgen und die Layouts sowie Designs nach Ihren Wünschen ä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 die Zeit, alle tollen Widgets auszuprobieren, die dieses Add-on zu bieten hat.