Block Designer – Erstelle eigene Blöcke für den Gutenberg Editor

Beschreibung

Gestalte deine eigenen individuellen Blöcke für den WordPress Gutenberg Block Editor, ohne eine einzige Zeile Code zu schreiben.

Schnellste Methode, um einen eigenen Block für Gutenberg zu erstellen
✔ Unglaublich einfach und intuitiv zu benutzen
✔ Deine individuellen Blöcke sind vollständig WYSIWYG (kein Formular)

Tutorial (Adressblock für Gutenberg erstellen):

Tutorial auf YouTube öffnen

Live-Vorschau

Neuste Version hier testen:
> > > LIVE PREVIEW öffnen < < <

Verfügbare Elemente

  • HTML-Element
  • Symbol
  • Statischer Text
  • Bearbeitbares Bild
  • Bearbeitbarer Link
  • Bearbeitbarer Text mit Formatierungen
  • Innere Blöcke

Verfügbare Styles

  • Anzeigemodus (block, flex, inline-block, inline, none)
  • Flex (direction, reverse, align, justify, gap, wrap)
  • Flex Child (shrink, grow, align self)
  • Abstände (margin, padding)
  • Grösse (width, height, min-width, min-height, max-width, max-height)
  • Überlauf (visible, hidden, scroll, auto)
  • Typografie (font-weight, font-style, font-size, line-height, color, text-align, text-decoration)
  • Rahmen (radius, style, width, color)
  • Hintergrund (color, linear-gradient, radial-gradient)
  • Effekte (box-shadow)

So funktioniert es

  1. Gestalte deinen Block

    Zuerst gestaltest du deinen Block im Block Designer mit verschiedenen HTML-Elementen und Styles.

    Du kannst Bereiche definieren, wo Autoren im WordPress Block Editor Bilder und Texte einfügen können.

    Nachdem du deinen Block gestaltet hast, musst du ihn nur noch aktivieren und speichern.

  2. Deinen Block benutzen

    Falls du deinen Block aktiviert und gespeichert hast, findest du ihn im Block-Inserter des WordPress Block Editors.

    Füge ihn genau so ein, wie du das von Standardblöcken her kennst.

    Falls du Bereiche definiert hast, wo ein Autor Eingaben machen kann, dann kannst du nun deinen Content erfassen.

    Speichere deine Seite bzw. deinen Beitrag und freue dich am Resultat auf deiner Website 😉

More from the same author

If you are interested in more plugins by this author, you could have a look at the Gridzy.Gallery.

Screenshots

  • Das ist die Übersicht über alle Blöcke, die du erstellt hast.
  • Das ist die Ansicht bei der Gestaltung deines eigenen Blocks.
  • Im WordPress Block Editor kannst du dir jederzeit eine Vorschau deines Blocks anzeigen lassen, indem du den Mauszeiger auf dem Blocksymbol platzierst.
  • Nutze deinen Block so oft du möchtest.

Rezensionen

24. Januar 2023
With its intuitive interface and many customizable options, I was able to easily create my own blocks for the Gutenberg editor and make my WordPress website more appealing. The support is fast and helpful. I highly recommend it to anyone who wants to make their WordPress sites more customized. 5 stars!
19. September 2022
If you have tried Lazy Blocks or Genesis Custom Blocks and are looking for a more visual way to both create and use custom blocks, this plugin is for you: Creating a custom block is very much like building a post in the Gutenberg block editor (no coding required), and using your custom block is completely WYSIWYG (no form).
Alle 3 Rezensionen lesen

Mitwirkende & Entwickler

„Block Designer – Erstelle eigene Blöcke für den Gutenberg Editor“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Block Designer – Erstelle eigene Blöcke für den Gutenberg Editor“ wurde in 3 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „Block Designer – Erstelle eigene Blöcke für den Gutenberg Editor“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

1.10.0 – 2023-11-01

  • Make block content translatable via WPML plugin

1.9.5 – 2023-07-12

  • Hilfe-Text für das Hinzufügen benutzerdefinierter CSS-Klassen eingefügt

1.9.4 – 2023-07-12

  • Kleines Problem bei Stil-Implementierung behoben

1.9.3 – 2023-04-09

  • Behebung eines kleinen Kompatibilitätsproblems mit WP 6.2

1.9.2 – 2023-04-09

  • Behebung kleiner Kompatibilitätsprobleme mit WP 6.2

1.9.1 – 2022-11-02

  • Behebung eines kleinen Kompatibilitätsproblems mit WP 6.1

1.9.0 – 2022-10-04

  • Problem beim Theme-Style-Umschalter behoben
  • Plugin übersetzbar gemacht
  • Verschiedene kleine Dinge optimiert

1.8.2 – 2022-09-29

  • Kleines Problem beim Einfügen behoben

1.8.1 – 2022-09-29

  • Kleines Problem beim Kopieren, Ausschneiden und Einfügen behoben

1.8.0 – 2022-09-29

  • Bessere Methode für das Kopieren, Ausschneiden und Einfügen implementiert

1.7.5 – 2022-09-28

  • Problem beim Kopieren eines bearbeitbaren Links, der anderen bearbeitbare Elemente enthält, behoben

1.7.4 – 2022-09-16

  • Zwei kleine Probleme im Site Editor behoben

1.7.3 – 2022-09-16

  • Behoben: Style-Einstellungen für Tablet und Mobile hatten keine Wirkung im Backend

1.7.2 – 2022-09-15

  • Behoben: Vorschau der Übersicht funktionierte in Multisite-Installationen nicht

1.7.1 – 2022-09-15

  • Behoben: Canvas funktionierte in Multisite-Installationen nicht

1.7.0 – 2022-09-13

  • Unterstützung der Block-Ausrichtung „Weite Breite“ und „Gesamte Breite“
  • Neues Element „Bearbeitbarer Link“ („authorlink“)

1.6.5 – 2022-08-30

  • Problem beim Kopieren, Ausschneiden und Löschen von Elementen behoben

1.6.4 – 2022-08-25

  • Problem mit Safari behoben

1.6.3 – 2022-08-24

  • Zwei kleine Probleme behoben

1.6.2 – 2022-08-23

  • Kleines Problem behoben

1.6.1 – 2022-08-22

  • Verschiedene kleine Probleme behoben

1.6.0 – 2022-08-17

  • Indikator anzeigen, wenn Styles gesetzt sind
  • Neues Element „Symbol“ („Icon“)

1.5.1 – 2022-08-10

  • Anpassung für ältere PHP-Versionen

1.5.0 – 2022-08-10

  • CSS-Klassen statt Style-Attribute verwenden
  • Responsive Styles für Desktop, Tablet und Mobile hinzugefügt

1.4.0 – 2022-07-31

  • Drag-and-drop im Elementebaum hinzufügen

1.3.1 – 2022-07-26

  • Behoben: BD stürzte ab, wenn ein neuer Block gespeichert wurde, während ein Element angewählt war

1.3.0 – 2022-07-25

  • Unterstützung für zahlreiche weitere HTML-Tags hinzugefügt
  • Unterstützung für individuelle HTML-Attribute hinzugefügt
  • Kleine Optimierungen

1.2.1 – 2022-07-20

  • Behoben: Höhe des Canvas war zu gross
  • Behoben: Berechtigungsproblem

1.2.0 – 2022-07-19

  • Optionen zum Ändern der Canvas-Ansicht hinzugefügt

1.1.1 – 2022-07-17

  • Einstellmöglichkeiten für box-shadow optimiert, um verschiedene Einheiten zu unterstützen

1.1.0 – 2022-07-16

  • Optionen für Hintergrundverläufe hinzugefügt
  • Optionen für box-shadow hinzugefügt
  • Feedback-Möglichkeit hinzugefügt

1.0.1 – 2022-07-16

  • Behoben: Höhe des Canvas war zu gering für Firefox

1.0.0 – 2022-07-15

  • Erste Version