Kostenlos starten
Dokumentationsmenü

Aus Penpot konvertieren

Schritt für Schritt: Verwandle ein Penpot-Design mit dem JSON-Export in WordPress-Inhalt. Ab dem Pro-Tarif verfügbar.

Der Import aus Penpot ist ab dem Pro-Tarif verfügbar (Pro, Agency und Studio). Tapeto liest das JSON der Penpot-Datei.

Free- und Starter-Konten

Der Tab Penpot zeigt ein Pro-Badge, und das Erstellen des Projekts wird mit „Ihr Tarif enthält diese Quelle nicht“ abgelehnt. Mit Free oder Starter kannst du stattdessen eine ZIP- / HTML-Website oder Figma nutzen oder den Tarif unter Einstellungen → Tarif und Abrechnung wechseln. Sobald du Pro hast, folge den Schritten unten.

Tapeto konvertiert die erste Seite der Penpot-Datei. Für eine Website mit mehreren Seiten lege ein Projekt pro Seite an (jedes zählt auf dein Monatslimit).

Bevor du beginnst

  • Ein Pro-, Agency- oder Studio-Konto.
  • Die Penpot-Datei als JSON (.json, bis zu 5–200 MB (je nach Tarif)). Das binäre .penpot-Paket wird nicht direkt akzeptiert.
  • Deine WordPress-Website, falls du veröffentlichst: siehe die ZIP- / HTML-Anleitung.

Schritt 1 — Design in Penpot vorbereiten

  1. Baue jeden Abschnitt als Board und nutze Flex-Layout (Zeile oder Spalte, mit Abständen und Innenabständen): Es wird zu echten Flex-Containern.
  2. Benenne Boards und Ebenen nach ihrer Funktion – Header, Hero, Footer, Card, Button.
  3. Verwende echte Textebenen und Schriften, die bei Google Fonts verfügbar sind.
  4. Entferne von der zu konvertierenden Seite, was du nicht brauchst.

Schritt 2 — JSON beschaffen

Tapeto benötigt die Dateidaten als JSON: ein Objekt, das pages-index (oder pages / objects) enthält. Eine Möglichkeit ist die Penpot-API mit einem Zugriffstoken (Profil → Access tokens): Du fragst die Dateidaten ab und speicherst die Antwort als .json-Datei.

Schritt 3 — Projekt erstellen

  1. Klicke in Tapeto auf Neues Projekt und gib einen Namen ein.
  2. Öffne den Tab Penpot.
  3. Ziehe die .json-Datei in den Bereich (oder klicke, um sie auszuwählen).
  4. Klicke auf Projekt erstellen und warte, bis der Status „verarbeitet“ lautet.

Hat das JSON keine erkennbare Penpot-Struktur, endet das Projekt mit „Fehler“ und einer entsprechenden Meldung.

Schritt 4 — Builder wählen und konvertieren

  1. Öffne das Projekt und wähle Gutenberg oder Elementor.
  2. Klicke auf Konvertieren, warte, bis die Konvertierung abgeschlossen ist, und prüfe Vorschau und Fidelity Score.

Schritt 5 — Das Ergebnis in WordPress übernehmen

Penpot ist eine Pro-Funktion, dein Konto kann also alle Ausgabewege nutzen:

  1. Dateien herunterladen oder Kopieren im Tab Inhalt und von Hand importieren – siehe den Tab Anleitung für deinen Builder.
  2. Oder WXR exportieren und über Werkzeuge → Daten importieren → WordPress einlesen.
  3. Oder In WordPress veröffentlichen: Mit installiertem Plugin und der unter WP-Verbindungen hinzugefügten Website (3 Websites in Pro, 10 in Agency, unbegrenzt in Studio) wird die Seite als Entwurf angelegt. Das vollständige Vorgehen steht in der ZIP- / HTML-Anleitung.
  4. Bei Agency und Studio kann das WXR zusätzlich Custom Post Types und Loops enthalten.

Nächster Schritt

Siehe Ergebnisse exportieren und WordPress verbinden.