Kostenlos starten
Dokumentationsmenü

Aus Adobe XD konvertieren

Schritt für Schritt: Verwandle eine Adobe-XD-Datei (.xd) in WordPress-Inhalt. Ab dem Pro-Tarif verfügbar.

Der Import von .xd-Dateien ist ab dem Pro-Tarif verfügbar (Pro, Agency und Studio). Du lädst die Datei selbst hoch – ein Exportschritt ist nicht nötig.

Free- und Starter-Konten

Wenn du eine .xd-Datei auswählst, lehnt Tapeto sie mit „Ihr Tarif enthält diese Quelle nicht“ ab. 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.

Alle Zeichenflächen (Artboards) der Datei werden gelesen und zu aufeinanderfolgenden Abschnitten einer einzigen konvertierten Seite. Für eine Website mit mehreren Seiten nutze eine Datei pro Seite oder eine andere Quelle.

Bevor du beginnst

  • Ein Pro-, Agency- oder Studio-Konto.
  • Die .xd-Datei mit bis zu 5–200 MB (je nach Tarif).
  • Deine WordPress-Website, falls du veröffentlichst: siehe die ZIP- / HTML-Anleitung.

Schritt 1 — Design in Adobe XD vorbereiten

  1. Lege die Seite auf Zeichenflächen in Desktop-Breite an, in der Reihenfolge, in der sie erscheinen sollen (von oben nach unten).
  2. Benenne Zeichenflächen und Ebenen nach ihrer Funktion – Header, Hero, Footer, Card.
  3. Verwende echte Textobjekte und Schriften, die bei Google Fonts verfügbar sind.
  4. Behalte Bilder und SVGs in der Datei: Sie reisen im .xd-Paket mit und werden als Ressourcen erkannt.
  5. Lösche Zeichenflächen, die nicht konvertiert werden sollen.

Schritt 2 — Projekt erstellen

  1. Klicke in Tapeto auf Neues Projekt und gib einen Namen ein.
  2. Bleibe im Tab Datei (derselbe wie für ZIP / HTML).
  3. Ziehe die .xd-Datei in den Bereich. Tapeto erkennt sie an der Dateiendung.
  4. Klicke auf Projekt erstellen und warte, bis der Status „verarbeitet“ lautet.

Lässt sich die Datei nicht als XD-Paket öffnen, endet das Projekt mit „Fehler“ und der Begründung.

Schritt 3 — 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.
  3. Kontrolliere die Bilder und ersetze fehlende nach dem Import über die Mediathek.

Schritt 4 — Das Ergebnis in WordPress übernehmen

  1. Dateien herunterladen oder Kopieren im Tab Inhalt und von Hand importieren – der Tab Anleitung zeigt die Schritte für deinen Builder.
  2. Oder WXR exportieren und über Werkzeuge → Daten importieren → WordPress einlesen (ohne Plugin).
  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.