WordPress Gutenberg-Tutorial zum Erstellen einer benutzerdefinierten Website mit Blöcken

Dies ist ein WordPress Gutenberg-Tutorial, das von Webentwicklern geschrieben wurde, die über umfangreiche Erfahrung beim Erstellen von WordPress-Websites mit dem neuen Blockeditor verfügen.

In diesem Handbuch zeigen wir Ihnen, wie Sie eine komplexe Website erstellen, die Inhaltsvorlagen, Archive und eine benutzerdefinierte Suche enthält. Wir werden den WordPress Block Editor, bekannt als Gutenberg und Toolset Blocks, verwenden, um die Website zu erstellen.

Warum Gutenberg jetzt eine großartige Möglichkeit ist, Websites zu erstellen

Gutenberg ist seit fast einem Jahr auf dem Markt und so ausgereift, dass es jetzt eine großartige und zuverlässige Möglichkeit ist, genau die von Ihnen geplante Website zu gestalten.

Gutenberg verwendet Blöcke, um Ihre Seiten zu erstellen. Blöcke sind Elemente, die verschiedene Arten von Inhalten enthalten, damit Sie Ihre Layouts erstellen können.

Der Blockeditor befindet sich noch in der Entwicklung, ist aber bereits unglaublich intuitiv und flexibel. Sie müssen kein Programmierexperte sein, um Inhalte zu erstellen. Darüber hinaus können Sie in Kombination mit Plugins wie Toolset Blocks problemlos komplexe Websites erstellen, die gut aussehen.

Gutenberg ist auch auf Mobilgeräten viel einfacher zu bedienen als sein Vorgänger. Angesichts der zunehmenden Arbeit, die wir mit unseren Handys erledigen, ist dies ein wichtiger Schritt in die richtige Richtung.

Die besten Themes für Gutenberg

Es gibt eine Reihe von Premium-WordPress-Themes, die mit dem Gutenberg Block Editor kompatibel sind und auch andere Premium-Plugins unterstützen.

Sie können die besten Themes schnell durchsuchen, indem Sie sich unsere Liste der über 30 WordPress-Themes ansehen, die mit Gutenberg kompatibel sind.

Das beste Block-Plugin zur Verwendung mit Gutenberg

Seit dem Start von Gutenberg vor mehr als einem Jahr wurden eine Reihe hervorragender Plugins veröffentlicht, die den neuen WordPress-Editor ergänzen.

Für unser WordPress Gutenberg-Tutorial verwenden wir Toolset Blocks zusammen mit Gutenberg, um unsere WordPress-Website zu erstellen. Toolset Blocks bietet eine Reihe von Vorteilen, die es sowohl Programmierern als auch Nicht-Programmierern erleichtern, ihre Websites schnell zu entwerfen und zu implementieren:

• Ihr Arbeitsablauf wird viel einfacher . Sie müssen Ihre Seiten jetzt nicht mehr entwerfen und dann implementieren. Sie können sie einfach auf WordPress erstellen und sofort sehen, wie sie aussehen werden.
• Sie müssen nicht zwischen Backend und Frontend wechseln . Stattdessen können Sie Ihre Vorlagen einfach im Backend entwerfen und sofort sehen, wie sie aussehen werden.
• Nicht-Entwickler können ihre Traumwebsites erstellen . Sie müssen kein Programmierexperte mehr sein, um die gewünschte Website zu erstellen. Mit Blöcken können Sie komplexe Elemente ganz einfach selbst ohne HTML oder CSS hinzufügen.
• Verbringen Sie weniger Zeit mit dem Lesen der Dokumentation . Die einfache und intuitive Natur von Toolset Blocks bedeutet, dass Sie nicht jede Menge Dokumentation lesen müssen, um zu verstehen, wie bestimmte Elemente erstellt werden. Viele der Blöcke beschreiben, was Sie erreichen können und können leicht verwendet und experimentiert werden.
• Keine weitere Integration mit Plugins von Drittanbietern . Beim klassischen WordPress-Editor hättest du einen Page Builder und zusätzliche kompatible Plugins installieren müssen. Dies könnte Ihre Website aufblähen und sie erheblich verlangsamen. Sie verlassen sich auch darauf, dass Dritte ihre Plugins aktualisieren und sie sicher halten. Toolset Blocks ist in Gutenberg und WordPress integriert und verursacht daher nicht die gleichen Probleme.
• Folgen Sie dem gleichen Workflow wie der WordPress-Kern . Sie müssen sich keine Sorgen machen, wie Sie mit dem neuen WordPress-Editor arbeiten.

WordPress Gutenberg-Tutorial zum Erstellen einer benutzerdefinierten Website mit Blöcken

Wir können jetzt mit der Erstellung unserer benutzerdefinierten Website beginnen. Als Beispiel erstellen wir eine Demo-Website, auf der Sie nach dem besten Fitnessstudio oder Personal Trainer in Ihrer Nähe suchen können.

Folgendes werden wir in diesem WordPress Gutenberg-Tutorial behandeln:

• Blöcke hinzufügen, bearbeiten, verschieben und löschen
• Inhalte nebeneinander anzeigen
• Durch deine Blöcke navigieren
• Anzeigen von Feldern in Ihren Blockeditor-Designs
• Anzeigen einer Bildergalerie
• Toolset-Blöcke im Editor gestalten
• Typografie-Steuerelemente
• Erstellen einer Vorlage
• Aufbau Ihrer Archivseiten
• Erstellen von benutzerdefinierten Inhaltslisten
• Hinzufügen einer benutzerdefinierten Suche

Lass uns anfangen!

Blöcke hinzufügen, bearbeiten, verschieben und löschen

Das Wichtigste zuerst, lassen Sie uns die Grundlagen zum Erstellen und Entfernen Ihrer Blöcke durchgehen. Blöcke sind eine völlig neue Art, Websites zu erstellen, aber es sollte nur wenige Minuten dauern, sich daran zu gewöhnen.

1. Klicken Sie auf einer Seite oder einem Beitrag auf die Schaltfläche +.
2. Suchen Sie nach dem Block, den Sie verwenden möchten, und klicken Sie darauf, um ihn einzufügen.

3. Geben Sie Ihre Inhaltsinformationen für den Block ein. Hier haben wir zum Beispiel den Block „Überschrift“ hinzugefügt und werden einen Titel dafür einfügen.
4. Auf der linken Seite jedes Blocks sehen Sie eine Reihe von Steuerelementen, mit denen Sie Ihre Blöcke verschieben können.

5. Verwenden Sie die rechte Seitenleiste, um die Optionen für den ausgewählten Block zu ändern. Sie können beispielsweise die Schriftfarbe, die Bildgröße oder die Textausrichtung ändern.
6. Wenn Sie auf die Drei-Punkte-Option klicken, sehen Sie zusätzliche Optionen wie den Block entfernen

So zeigen Sie Ihre Inhalte nebeneinander an

Sie können Ihre Inhalte auf Ihrer Seite einfach nebeneinander anzeigen, indem Sie den Spaltenblock verwenden.

1. Wählen Sie die Schaltfläche + aus.
2. Suchen Sie nach dem Spaltenblock und fügen Sie ihn ein.

3. Sie sehen nun zwei Spalten, zu denen Sie wie gewohnt Blöcke hinzufügen können.

4. Erhöhen Sie die Anzahl der Spalten, indem Sie den Spaltenblock auswählen und die Zahl in der rechten Leiste umschalten.

Durch deine Blöcke navigieren

Während Sie Ihre Website erstellen, enthalten einige Ihrer Designs und Vorlagen viele Blöcke. Eine der einfachsten Möglichkeiten, den zu bearbeitenden Block auszuwählen, besteht darin, die Blocknavigationsschaltfläche oben im Editor zu verwenden und den Block auszuwählen, mit dem Sie arbeiten möchten.

Anzeigen von Feldern in Ihren Blockeditor-Designs

Sie können Informationen aus Post-Feldern (Titel, Text usw.) oder aus benutzerdefinierten Feldern anzeigen, die Sie möglicherweise mit Toolset-Blöcken erstellt haben.

Sie haben drei Möglichkeiten, Ihre Felder anzuzeigen, die wir im Folgenden im Rahmen des WordPress Gutenberg-Tutorials skizzieren:

1. Legen Sie fest, dass der Blockinhalt aus Feldwerten stammt

Jeder Block in der Toolset Blocks-Bibliothek ermöglicht es Ihnen, seinen Inhalt aus Feldern festzulegen. Sie können beispielsweise festlegen, dass jeder Überschriftentext aus einem Beitragsfeld oder einem benutzerdefinierten Toolset-Feld stammt.

Sehen wir uns unten an, wie es funktioniert, indem wir Überschriftentext aus einem Beitragsfeld zum Toolset-Überschriftsblock für unsere Personal Trainer hinzufügen.

1. Erstellen Sie eine neue Inhaltsvorlage und wählen Sie aus, welchen benutzerdefinierten Beitragstyp Sie anzeigen möchten.
2. Wählen Sie die Schaltfläche + aus.
3. Fügen Sie den Toolset-Überschriftsblock hinzu .

4. Aktivieren Sie den dynamischen Überschriftstext.

5. Wählen Sie das Beitragsfeld aus, das Sie anzeigen möchten. Unten habe ich die Post - Titel ausgewählt.

Sie können jetzt den richtigen Titel für jeden der Beiträge sehen, die sich auf einen bestimmten benutzerdefinierten Beitragstyp beziehen.

2. Felder als einzelne Blöcke anzeigen

Sie können jedes mit Toolset erstellte Post-Feld oder individuelle benutzerdefinierte Feld als Block anzeigen. Im Folgenden fügen wir beispielsweise den Inhalt des Hauptbeitrags zu unserer Vorlage für unsere Fitnessstudios hinzu.

1. Wählen Sie den Block Einzelfeld aus .
2. Auf der rechten Seite Leiste unter Feldtyp, wählen Sie die Standard - Feld.
3. Wählen Sie unter Post-Feld die Option Post-Inhalt (Text) aus .

Die Beschreibung für jedes der Fitnessstudios wird nun in den jeweiligen Beiträgen erscheinen.

3. Kombinieren Sie Felder mit Text in einem Block

Möglicherweise müssen Sie Ihren Designs eine Mischung aus Feldern und Texten hinzufügen. Beispielsweise müssen Sie möglicherweise Beschriftungen neben Ihren benutzerdefinierten Feldern hinzufügen.

1. Wählen Sie den Block Felder und Text aus.

2. Geben Sie das Label ein, das Sie hinzufügen möchten. Zum Beispiel habe ich "Bewertung" hinzugefügt, weil ich die Ergebnisse für das benutzerdefinierte Bewertungsfeld anzeigen möchte, das die Punktzahl für jedes Fitnessstudio von 5 anzeigt.

3. Wählen Sie aus den Symbolen aus, welche Art von Inhalt Sie hinzufügen möchten. Sie können ein Feld, ein Formular oder eine bedingte Ausgabe hinzufügen. In unserem Fall möchten wir ein Feld hinzufügen.

4. Wählen Sie den Inhalt aus, den Sie hinzufügen möchten (in meinem Fall ist es das Bewertungsfeld ) und klicken Sie auf Shortcode einfügen .

Zeigen Sie eine Bildergalerie an

Sie können Ihren Beiträgen auch mehrere Bilder mithilfe von Blöcken hinzufügen.

1. Wählen Sie das Wiederholungsfeld/Galerieblock aus.

2. Wählen Sie die benutzerdefinierte Feldgruppe aus, die Sie anzeigen möchten.
3. Wählen Sie das benutzerdefinierte Feld aus, das Sie anzeigen möchten.

Gestalten Sie Ihre Blöcke im Editor

Wenn Sie die Website erstellen, die Sie im Sinn hatten, müssen Sie Ihre Blöcke gestalten. Sie möchten beispielsweise die Schriftart, die Farben, den Hintergrund oder die Ränder Ihrer Blöcke ändern.

Es gibt zwei Möglichkeiten, wie Sie Ihre Blöcke stylen können:

1. Elemente über die Benutzeroberfläche gestalten

1. Wählen Sie den Block aus, den Sie stylen möchten. Ich habe beispielsweise den zuvor hinzugefügten Bewertungsblock ausgewählt.
2. Erweitern Sie den Abschnitt Stileinstellungen in der Seitenleiste.
3. Hier können Sie Hintergrundfarbe, Padding, Rand und vieles mehr anpassen.

Natürlich bietet jeder Block unterschiedliche Styling-Optionen. Der Bildblock enthält beispielsweise eine Reihe zusätzlicher Anpassungsfunktionen wie die Möglichkeit, die Position des Bildes, die Unschärfe oder die Drehung des Bildes anzupassen.

2. Verwenden des Container-Blocks

Der Container Block ist ein Block, den Sie ausschließlich mit Toolset Blocks finden können. Verwenden Sie den Container-Block, um bestimmte Blöcke zu gruppieren und jedem von ihnen bestimmte Stile zuzuordnen, die für jeden der Beiträge angezeigt werden.

Ich habe zum Beispiel einen Container Block hinzugefügt, um alle relevanten Informationen für einen Personal Trainer zusammen in einem einheitlichen Bereich anzuzeigen, einschließlich Bild, Titel, Bewertung und vielem mehr. Ich kann den Container-Block jetzt so gestalten, dass jeder meiner Personal Trainer-Posts die gleichen Stile aufweist.

Ich kann dies wieder tun, indem ich die Seitenleiste auf der rechten Seite verwende.

Typografie-Steuerelemente

Mit Toolset Blocks können Sie Ihren Text mithilfe des Abschnitts Typografie ganz einfach formatieren und formatieren.

Hier ist eine Liste, was Sie anpassen können:

• Schriftart – wählen Sie aus einer riesigen Auswahl an Schriftarten
• Schriftgröße, Zeilenhöhe und Buchstabenabstand
• Schriftstil
• Texttransformation – Groß-/Kleinschreibung, Großbuchstaben, Kleinbuchstaben
• Textfarbe
• Textschatten

So erstellen Sie Vorlagen zum Anzeigen von benutzerdefinierten Beiträgen

Eine der wichtigsten Funktionen, die Sie für eine benutzerdefinierte Website erstellen müssen, ist die Vorlage. Wenn Sie eine Vorlage erstellen, bedeutet dies, dass alle Beiträge für denselben benutzerdefinierten Beitragstyp das gleiche Layout und Design haben.

Beispielsweise können wir für jedes Fitnessstudio, das wir als Teil unseres benutzerdefinierten Beitragstyps „Fitnessstudios“ anzeigen möchten, eine Vorlage erstellen.

1. Gehen Sie zu Toolset->Dashboard und klicken Sie auf die Option Inhaltsvorlage erstellen für den Beitragstyp, für den Sie eine Vorlage erstellen möchten.

2. Genau wie wir es zuvor getan haben, können Sie Ihrer Vorlage Felder hinzufügen. Unten habe ich eine Reihe verschiedener Blöcke hinzugefügt, einschließlich des Überschrift-, Bild- und Einzelfeldblocks, die alle Felder enthalten.

3. Sobald Sie Ihre Vorlage gespeichert und veröffentlicht haben, zeigt jeder Ihrer Beiträge für diesen benutzerdefinierten Beitragstyp dasselbe Layout und denselben Stil an.

Aufbau Ihrer Archivseiten

Archive sind die Inhaltsliste für jeden benutzerdefinierten Beitragstyp, den WordPress für Sie generiert. Sie können Toolset Blocks und Gutenberg verwenden, um das Aussehen jeder Ihrer Archivseiten anzupassen.

Im Folgenden habe ich als Teil des WordPress Gutenberg-Tutorials ein Archiv für meinen benutzerdefinierten Beitragstyp „Gyms“ erstellt.

1. Gehen Sie zu Toolset->Dashboard und klicken Sie auf die Option Archiv erstellen neben dem Beitragstyp, für den Sie ein Archiv erstellen möchten.

2. Im Blockeditor können Sie nun die verschiedenen Elemente hinzufügen, die Sie für jeden Ihrer Beiträge anzeigen möchten. Sie können beispielsweise alle Ihre Standard- und benutzerdefinierten Felder (wie die Bewertungen, Adresse und Beitragstitel, die ich für meine benutzerdefinierten Beitragstypen „Gyms“ erstellt habe) mithilfe von Toolset-Blöcken anzeigen.

3. Um die Anzahl der Spalten auf der Option Block - Navigation zu ändern und die Wordpress - Archiv Schleife wählen.
4. Unter Loop Style können Sie die Anzahl der Spalten anpassen.

5. Außerdem können Sie unter dem WordPress-Archivblock eine Reihe von Änderungen an den Standardeinstellungen für Archive vornehmen, wie z. B. die Paginierung, Reihenfolge und vieles mehr.

6. Sie können auch benutzerdefinierte Texte und andere Blöcke vor oder nach der Hauptarchivschleife hinzufügen, die Ihre Beiträge anzeigt. Klicken Sie einfach auf das +-Symbol vor oder nach der Schleife, um Ihre Blöcke oder Ihren Text hinzuzufügen.

Benutzerdefinierte Inhaltslisten anzeigen

Sie können Toolset Blocks und Gutenberg verwenden, um jeden Ihrer Beiträge als Liste in beliebiger Reihenfolge anzuzeigen. Sie können die Liste auch beliebig gestalten, z. B. in einem Raster, einfachem HTML, einer Tabelle oder auf andere Weise. Im Toolset wird dieser Listentyp als Ansicht bezeichnet.

Diese Liste kann dann zu jeder Seite hinzugefügt werden. Zum Beispiel habe ich unten eine Liste der empfohlenen Fitnessstudios zur Homepage hinzugefügt.

1. Klicken Sie auf der Seite, zu der Sie Ihre Ansicht hinzufügen möchten, auf die Schaltfläche +.
2. Fügen Sie den Block Ansichten hinzu und benennen Sie ihn.
3. Wählen Sie den Inhalt aus, den Ihre Ansicht anzeigen soll. Zum Beispiel möchte ich meine Fitnessstudios anzeigen.

4. Fügen Sie die Blöcke hinzu, die Sie als Teil Ihrer Ansicht anzeigen möchten.
5. Sie können die Reihenfolge, den angezeigten Inhalt und mehr bearbeiten, indem Sie auf Navigation blockieren klicken, Ihre Ansicht auswählen und die Seitenleiste verwenden.

6. Unter Ansichtsschleife können Sie eine Reihe von Einstellungen für die gesamte Ansicht einschließlich der Anzahl der Spalten ändern.

Benutzerdefinierte Suche hinzufügen

Sie können Ihre eigene Suche zu Ihrer Ansicht hinzufügen, die es Ihren Benutzern ermöglicht, die für sie interessanten Inhalte im Frontend einzugrenzen. Sie können beispielsweise eine Suche für Ihre Benutzer erstellen, um das beste Fitnessstudio in Ihrer Nähe zu finden.

1. Fügen Sie den Ansichtsblock auf Ihrer Seite ein.
2. Aktivieren Sie die Option Suchen im Assistenten zum Erstellen von Ansichten.

3. Anschließend können Sie im Bearbeitungsbereich Ansichten Suchfelder, Suchschaltflächen und vieles mehr hinzufügen.

4. Sie können die rechte Seitenleiste verwenden, um die Optionen für dieses Suchfeld zu optimieren. Dazu gehören die wichtigsten Feldeinstellungen sowie Beschriftungs- und Stiloptionen.

So sieht unsere benutzerdefinierte Suche nach dem besten Fitnessstudio im Frontend aus.

Beginnen Sie noch heute mit der Erstellung Ihrer benutzerdefinierten Website!

Nachdem Sie dieses WordPress Gutenberg-Tutorial gelesen haben, kennen Sie nun die Grundlagen und können mit dem Entwerfen und Erstellen Ihrer eigenen benutzerdefinierten Website beginnen. Sie können WordPress und Toolset Blocks noch heute herunterladen, um zu sehen, wie einfach es für Sie ist, Ihre eigene Website zu erstellen.

Wenn Sie irgendwelche Gedanken oder Fragen haben, teilen Sie uns dies bitte in den Kommentaren unten mit!