Springe zum Hauptinhalt

So exportieren und importieren Sie Gutenberg-Blöcke in WordPress

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Anfangs hatten WordPress-Benutzer eine süße und bittere Beziehung zum Blockgenerator. Dann, wie wir in unserem entdeckt haben gutenberg FührerDer neue Editor verfügt über erstaunliche Funktionen, die das Erstellen schöner Inhalte einfach und unterhaltsam machen. Jetzt können manche nicht mehr darauf verzichten.

Gutenberg bietet Ihnen genügend Funktionen, um großartige Seiten und Artikel zu erstellen, ohne Code schreiben zu müssen. Egal welchen Inhalt Sie hinzufügen möchten, Gutenberg hat genau den richtigen Block.

Möchten Sie jeden Inhaltsblock detailliert ändern und anpassen? Gutenberg bietet hierfür eine Reihe von Anpassungsoptionen.

Möchten Sie noch mehr Blöcke als im Standardeditor verfügbar? dort eine Menge WordPress-Plugin für Gutenberg

Deshalb ist es traurig, dass viele Benutzer das nicht kennen Wiederverwendbare Blöcke, eine von Gutenbergs brillanten Eigenschaften. Wenn Sie keine Ahnung haben, wovon wir sprechen, sind wiederverwendbare Blöcke gerecht Blöcke Inhalt dass Sie erstellen, speichern und wiederverwenden nach Belieben.

Angenommen, Sie möchten der aufgerufenen Aktionsschaltfläche einen Aufruf hinzufügen danke notiz, Unterschrift, Formular oder irgendetwas anderes am Ende jedes Beitrags oder jeder Seite.

In der Vergangenheit mussten Sie die Funktion in einer Textdatei auf Ihrem Computer speichern. Wenn Sie es brauchen, kopieren Sie es und fügen es in Ihren Beitrag oder Ihre Seite ein. Gutenberg reduzierte dieses Problem. Jetzt müssen Sie nicht mehr jedes Mal Textdateien verwenden oder dieselben Blöcke von Grund auf neu erstellen.

Sie können einen einzelnen wiederverwendbaren Block erstellen und ihn nicht nur in Ihren Posts und Seiten, sondern auch auf anderen WordPress-Websites verwenden.

Unabhängig davon, ob Sie viele Websites erstellen oder jedem Beitrag / jeder Seite spezielle Inhalte hinzufügen müssen, können Sie mit den wiederverwendbaren Blöcken von Gutenberg viel Zeit sparen.

Und im heutigen Artikel zeigen wir Ihnen genau, wie Sie wiederverwendbare Blöcke von Gutenberg nach WordPress erstellen und exportieren. Unser Ziel ist es, Ihnen dabei zu helfen, benutzerdefinierte Inhaltsblöcke auf mehreren WordPress-Posts / Seiten / Websites einfach zu verschieben und wiederzuverwenden.

Aber vorher, wenn Sie WordPress noch nie installiert haben, lassen Sie es uns herausfinden Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind. 

Außer : Wenn Sie einen Block mit einem WordPress-Plugin wie z Getwid, Sie müssen dieses Plugin beispielsweise auf den anderen WordPress-Websites installieren, auf denen Sie diesen Block wiederverwenden möchten. Beachten Sie auch, dass Ihre Blöcke von Thema zu Thema leicht unterschiedlich aussehen können, aber das ist alles gut, weil Gutenberg Ihnen viel Anpassungsmöglichkeiten bietet.

Zunächst benötigen Sie wiederverwendbare Blöcke

Leider können Sie nicht exportieren oder importieren Blöcke regulär. Um Gutenberg-Blöcke zu exportieren und zu importieren, müssen Sie zuerst erstellen Blöcke wiederverwendbar.

Zur Veranschaulichung erstellen wir eine danke notiz Dies möchte ich am Ende jedes Artikels, den wir veröffentlichen, hinzufügen, ohne die Notiz jedes Mal neu schreiben zu müssen, wenn ich sie einem Artikel hinzufügen muss.

Ma danke notiz tat nichts komplexes; Nur ein einfacher Absatzblock mit Links zu Twitter und Facebook. Denken Sie daran, dass Ihr Block alles sein kann, was Sie wollen - ein WerbebannerInn Bildschieberegler, ein Zitat, eine Liste, die neuesten Veröffentlichungen, ein MailChimp-Formular usw.

Später zeigen wir Ihnen, wie Sie dies exportieren können danke notiz in einer zweiten WordPress-Website.

So erstellen Sie einen wiederverwendbaren Block

Das Erstellen eines wiederverwendbaren Blocks ist unglaublich einfach. Gehe zu Artikel> Hinzufügen So starten Sie den Gutenberg-Editor:

So fügen Sie einen neuen Blogpascher-Artikel hinzu

Klicken Sie dann auf das Symbol Block hinzufügen (+), Wählen Sie dann Ihren Inhaltsblock. In unserem Fall haben wir den Absatzblock wie in der folgenden Abbildung gezeigt hinzugefügt.

So fügen Sie gutenberg Blogpascher Block hinzu

Passen Sie danach Ihren Block an Ihre Bedürfnisse an. Wir haben Text, Links zu Social Media-Profilen und Hintergrundfarben hinzugefügt. So nannte unser neuer Notizblock wenden sieht aus wie in unserem Gutenberg-Editor:

Verwendung des Blogpascher-Absatzblocks

Zu diesem Zeitpunkt ist der obige Hinweis a Block regulär. Wir müssen daraus eins machen Block wiederverwendbar dass wir exportieren und importieren können. Klicken Sie dazu auf das Symbol Mehr Optionen, dann zu wiederverwendbaren Blöcken hinzufügen, Wie nachfolgend dargestellt.

Erstellen Sie einen wiederverwendbaren Block-Blogpascher

Geben Sie Ihrem wiederverwendbaren Block einen Namen und drücken Sie die Taste Aufzeichnung, wie unten zu sehen ist.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Nennen Sie den wiederverwendbaren Block-Blogpascher

Und das war's, Sie haben gerade Ihren ersten wiederverwendbaren Block erstellt. 

Verwendung wiederverwendbarer Blöcke

Das Hinzufügen des soeben erstellten wiederverwendbaren Blocks zu Ihren Posts oder Seiten ist äußerst einfach. Wenn Sie Ihrem Beitrag oder Ihrer Seite den erforderlichen Inhalt hinzugefügt haben, klicken Sie auf das Symbol Fügen Sie einen Block hinzu (+), Scrollen Sie zur Registerkarte Wiederverwendbare Blöcke und wählen Sie Ihren Block (Vielen Dank in unserem Fall), Wie nachfolgend dargestellt.

Fügen Sie einen wiederverwendbaren Block-Blogpascher hinzu

Drücken Sie die Taste, nachdem Sie den wiederverwendbaren Block zu Ihrem Beitrag oder Ihrer Seite hinzugefügt haben Vorschau / Veröffentlichung um Ihre Ergebnisse im Frontend anzuzeigen. Folgendes haben wir:

So fügen Sie einen neuen Blog-Postpascher hinzu 1

Das Beste daran ist, dass wir unseren Block wiederverwenden können danke notiz jederzeit, ohne es von Grund auf neu erstellen zu müssen. Wir können es auch zu allen Beitragstypen hinzufügen, die Gutenberg-Blöcke unterstützen.

entdecken Sie auch So fügen Sie einem Bild auf Gutenberg eine Beschriftung hinzu

Nachdem Sie nun wissen, wie Sie wiederverwendbare Blöcke erstellen und verwenden, erfahren Sie mehr über den Export dieser Blöcke auf eine andere WordPress-Website. Um Verwirrung zu vermeiden, verwenden wir denselben Block, den wir gerade erstellt haben.

So exportieren Sie Gutenberg-Blöcke nach WordPress

Das Exportieren eines wiederverwendbaren Gutenberg-Blocks ist einfach. Sie erledigen dies in kürzester Zeit.

Was ist zu tun?

Klicken Sie im Gutenberg-Editor auf das Symbol Weitere Tools und Optionen, puis Verwalten Sie alle wiederverwendbaren Blöcke, wie wir unten hervorheben:

Verwalten Sie wiederverwendbare Block-Blogpascher

Dies bringt Sie zum Bildschirm Blöcke Hier können Sie alle wiederverwendbaren Blöcke anzeigen und verwalten:

Importieren Sie wiederverwendbaren Block-Blogpascher

Wir haben nur den Block Vielen Dank, Der obige Bildschirm wird jedoch ausgefüllt, wenn Sie weitere erstellen. Bewegen Sie den Mauszeiger über den Titel und klicken Sie auf den Link Export nach JSON angezeigt. Siehe das Bild unten.

Importieren Sie wiederverwendbaren Block-Blogpascher 1

Speichern Sie dann die JSON-Datei auf Ihrem Computer:

Speichern Sie den wiederverwendbaren Block Json Blogpascher

Nachdem wir die JSON-Datei auf unserem Computer haben, ist es Zeit, den Block auf unsere zweite Website zu importieren.

So importieren Sie Gutenberg-Blöcke in WordPress

Das Importieren Ihrer wiederverwendbaren Blöcke ist so einfach wie A, B, C. Öffnen Sie zunächst den Gutenberg-Editor. Zweitens klicken Sie auf das Symbol Weitere Tools und Optionen, dann Verwalten Sie alle wiederverwendbaren Blöcke, Wie nachfolgend dargestellt.

Importieren Sie wiederverwendbaren Block-Blogpascher 2

Auf dem Bildschirm Blöcke Klicken Sie anschließend auf Import aus JSONWählen Sie die zuvor heruntergeladene Datei aus und drücken Sie die Taste. Import in dieser Reihenfolge :

Importieren Sie wiederverwendbaren Block-Blogpascher 3

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Und das ist alles ! So haben Sie erfolgreich einen wiederverwendbaren Gutenberg-Block in Ihre zweite WordPress-Website importiert.

lesen Sie auch So fügen Sie einem Bild auf Gutenberg eine Beschriftung hinzu

War es nicht einfach? Anschließend können Sie Ihren Gutenberg-Block auf der zweiten Website beliebig oft verwenden und wiederverwenden.

Gibt es WordPress-Plugins zum Exportieren von Gutenberg-Blöcken?

Oh ja, und ich habe einen auf ThemeIsle gefunden, einem seriösen WordPress-Entwickler. Dies ist ein kostenloses Plugin namens Blockiert Export Import. Mit dem Plugin können Sie im Wesentlichen das gesamte Tutorial überspringen. Ja, es ist wahr; Sie müssen nicht einmal wiederverwendbare Blöcke erstellen.

Siehe auch unseren Leitfaden auf So fügen Sie Ihrem Gutenberg-Artikel einen animierten Block hinzu

Installieren und aktivieren Sie das Plugin und öffnen Sie den Gutenberg-Editor. Entwerfen Sie Ihren Block nach Ihren Wünschen und klicken Sie dann auf Je mehr Optionen Symbol. Dann klick Als JSON exportieren, Wie nachfolgend dargestellt :

Wiederverwendbarer Block WordPress Plugin Blogpascher

Dadurch wird die JSON-Datei auf Ihren Computer heruntergeladen. Öffnen Sie den Gutenberg-Editor, um die JSON-Datei mit dem Plugin zu importieren. Klicken Sie dann auf das Symbol Fügen Sie einen Block hinzu, puis Blöcke aus JSON importieren unter der Registerkarte Widgets :

Importieren Sie wiederverwendbaren Block-Blogpascher 4

Danach klicken Sie auf Datei wählen um die Datei von Ihrem Computer auszuwählen und die Taste zu drücken. Hochladen :

Importieren Sie wiederverwendbaren Block-Blogpascher 5

Das einzige Problem mit der Plugin-Methode ist, dass Ihre Blöcke nicht auf Ihrer WordPress-Website gespeichert werden. Um Blöcke in Ihrer WordPress-Datenbank zu speichern, müssen Sie die manuelle Methode verwenden. Vielleicht ändert sich das in Zukunft.

Entdecken Woher wissen Sie, ob Ihr Plugin mit Gutenberg kompatibel ist?

Leider konnte ich kein anderes Plugin finden. Trotzdem kann das Plugin Ihnen viel Zeit sparen, wenn Sie sich keine Gedanken über das Speichern wiederverwendbarer Blöcke auf Ihrer Website machen. 

Gutenbergs wiederverwendbare Blöcke retten Leben. Mit ihnen können Sie Modelle schnell reproduzieren, da Sie nicht bei Null anfangen. Wenn Sie viele Posts / Seiten und / oder Websites erstellen, ist es hilfreich zu lernen, wie Sie Gutenberg-Blöcke exportieren.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Team Showcase

Team Showcase ist das perfekte Addon, um Ihre Teammitglieder in einem schönen Raster oder einem ansprechenden Karussell anzuzeigen. Sie können Ihre Mitglieder verwalten, indem Sie sie in separate Teams gruppieren. Wählen Sie dazu einfach die Optionen aus, die Sie anzeigen möchten, wählen Sie ein WordPress-Thema und wenden Sie eine vordefinierte Farbe darauf an.

Team-Schaufenster für das WordPress-Plugin für visuelle Komponisten

Für diese Aktion ist daher keine Codezeile erforderlich. Zu den Funktionen gehören: 10 spezielle Themen, 10 Farbsets, 10 Anzeigeoptionen, CSS3-Animationseffekte, die Möglichkeit, in eine Seite eingefügt zu werden, ein voll ansprechendes Design, etc ...

Download | Demo | Web-Hosting

2. ARPrice

ARPrice ist das flexibelste und umfassendste WordPress-Premium-Plugin zum Erstellen von Preisnetzen. Es enthält mehr als 300 Preisraster-Modelle und bietet alle Tools, die Sie zum Erstellen eindeutiger und reaktionsschneller Preisraster sowie Vergleichstabellen benötigen. Sie können auch ganz einfach eine schöne Präsentation für Ihr Team erstellen.

Arprice Responsive WordPress Preistabelle Plugin

Es ist ein wunderschönes, intuitives und einzigartiges WordPress-Plugin mit einem beeindruckenden visuellen Editor und einer Echtzeitvorschau von Anpassungen.

Siehe auch Wie man einen Service auf Ihrem Blog zu laden?

Wählen Sie eine Vorlage aus und ziehen Sie sie per Drag & Drop, um Ihr Preisraster bis ins kleinste Detail zu personalisieren. Sie können eine unbegrenzte Anzahl von Spalten hinzufügen, Farben, Schriftarten und Symbole ändern und eigene Bilder und Bänder für hinzufügen einen Rabatt ankündigenBeispielsweise.

Download Demo | Web-Hosting

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

3. Premium SEO Pack

Premium SEO Pack ist ein WordPress-Plugin, das Ihre SEO optimiert und CSS komprimiert, um die Ladegeschwindigkeit Ihrer Website zu verbessern. Das Plugin kann auch das Design Ihrer Website mit wenigen Klicks verwalten.

Premium SEO Pack - WordPress Plugin

Seine Funktionen sind unter anderem: Komprimierung von CSS und JS, Video-Sitemap-Integration und Snippet, die Formatierung von HTLM- und XML-Dateien, Umleitung von 404- und 301-Seiten, Teilen in sozialen Netzwerken, Bereitstellen des ALT-Labels, hochgradig anpassbares Layout.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Hier ! Das war's für dieses Tutorial. Wir hoffen, dass Sie damit Gutenberg-Blöcke in WordPress exportieren und importieren können. Haben Sie noch Fragen oder Anregungen zu Gutenberg-Blöcken? Bitte lassen Sie es uns wissen commentaires unten.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden zu WordPress-Blog-Erstellung.

Zögere nicht zu Teile es mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren