Anleitung · Elementor
Elementor-Kit und Child-Theme installieren
Der Elementor-Export bringt die Gestaltungsebene: ein Child-Theme mit Schriften, Tokens und CSS und ein Kit mit globalen Farben und Schriften. Fertige Seitenvorlagen sind nicht dabei, die Abschnitte baust du in Elementor auf.
Im Beispiel heißt das Design Fieldnote (kostenlos, Kurzname fieldnote). Bei deinem Design steht dort sein Kurzname.
Was du brauchst
- WordPress 6.6 oder neuer mit dem kostenlosen Plugin Elementor.
- Das Theme Hello Elementor als Eltern-Theme (kostenlos im Theme-Verzeichnis).
- Für den Export: Node.js 22 und Git.
Was im Export liegt
Ordner fieldnote-elementor/
fieldnote-child.zip- Das Child-Theme zum Hochladen. Schriften, Tokens, Abschnitts-CSS, Bilder.
fieldnote-kit.zip- Das Kit zum Importieren: globale Farben und globale Schriften.
fieldnote-child/- Das Child-Theme entpackt, für FTP oder Änderungen.
elementor-kit/- Der Inhalt des Kits entpackt.
GLOBALS.md- Alle Farben (Hex) und Schriften (Größen für Desktop, Tablet, Mobil) zum Eintragen von Hand.
EXPORT.md- Export-Bericht.
Von Hand
-
Fertigen Export herunterladen
Kostenlose Designs lädst du auf der Designseite, gekaufte auf der Download-Seite mit deinem Lizenzschlüssel. Danach wählst du, was du laden willst: Elementor-Kit, alles in einem ZIP oder nur das Designpaket. Entpackt liegt der Export in
fieldnote/exports/elementor/, mitINSTALL.mdundEXPORT.md. Das ist derselbe Inhalt wiefieldnote-elementor/in den Schritten unten. -
Oder selbst erzeugen
Wer den Export aus einem geänderten Designpaket neu bauen will, nimmt das Kiekkist-Werkzeug
kk. Es ist Open Source, läuft lokal und braucht Node.js 22 oder neuer. Lege es neben den Designordner (im Download „Nur Designpaket“ heißt erfieldnote/). Der Befehl schreibtfieldnote-elementor/;--no-checklässt die Bildvergleichs-Prüfung weg (dafür einmalnpx playwright install chromium).git clone https://github.com/tillheidrich/kiekkist cd kiekkist && npm ci && cd .. node kiekkist/cli/kk.js export ./fieldnote --target elementor --no-check -
Elementor und Hello Elementor installieren
Plugins → Hinzufügen, „Elementor“ suchen, installieren, aktivieren. Design → Themes → Hinzufügen, „Hello Elementor“ suchen, installieren. Aktivieren musst du es nicht.
-
Child-Theme hochladen
Design → Themes → Hinzufügen → Theme hochladen,
fieldnote-elementor/fieldnote-child.zipwählen, installieren, aktivieren. WordPress prüft dabei, ob Hello Elementor vorhanden ist. Das Theme heißt in der Liste wie das Design. -
Kit importieren
Elementor → Werkzeuge, Reiter Website Templates (der Name kann je nach Version und Sprache leicht abweichen), bei „Apply a Website Template“ auf Import beziehungsweise „Upload .zip file“.
fieldnote-kit.zipwählen. Das Kit enthält nur Website-Einstellungen, keine Seiten und keine Plugins. -
Globale Werte prüfen
Im Elementor-Editor: Website-Einstellungen → Globale Farben und Globale Schriftarten. Dort stehen jetzt die Farben und Schriftrollen des Designs, etwa
ink,accent,poster,body. Fehlen sie, trag sie von Hand ausGLOBALS.mdein. -
Seiten aufbauen
Baue die Abschnitte in Elementor nach, mit den globalen Farben und Schriften. Als Vorlage dienen die Seiten im Paket (
fieldnote/pages/*.html) undDESIGN.md. Die CSS-Klassen des Designs aussite.csssind geladen: Du kannst sie im Reiter „Erweitert“ eines Containers unter „CSS-Klassen“ eintragen. Für einen Abschnitt, den niemand bearbeiten muss, geht auch ein HTML-Widget mit dem Markup aus der Paketseite. -
Schriften
Die Schriften liefert das Child-Theme aus. In der Schriftauswahl von Elementor stehen sie in einer eigenen Gruppe mit dem Namen des Designs. Das Child-Theme schaltet das Laden von Google Fonts ab.
Mit KI-Assistent
Dein KI-Coding-Assistent kann den Export erzeugen, die Beispielinhalte ersetzen und dir sagen, was du noch selbst tun musst. Gib ihm den entpackten Designordner und diese Dateien zu lesen:
fieldnote/DESIGN.md: Gestaltungsregeln, Farben, Schriften, was man nicht ändern solltefieldnote/tokens.jsonundtokens.css: alle Farb-, Schrift- und Abstandswertefieldnote/README.md: Inhalt des Pakets und was vor dem Start ersetzt werden mussfieldnote/LICENSE.md: was du mit Code, Texten und Fotos darfstfieldnote/UEBERGABE/: Vorlagen für die Übergabe an deinen Kunden (Deutsch und Englisch)- im Export
fieldnote-elementor/GLOBALS.mdundEXPORT.md
Prompt zum Kopieren. Ersetze die Angaben in eckigen Klammern. Statt fieldnote setzt du den Kurznamen deines Designs ein.
Im Ordner ./fieldnote liegt ein Website-Design als Paket. Ich will es in WordPress mit Elementor umsetzen.
1. Lies zuerst fieldnote/DESIGN.md, README.md und LICENSE.md.
2. Hol das Kiekkist-Werkzeug (git clone https://github.com/tillheidrich/kiekkist, darin npm ci) und erzeuge den Export: node kiekkist/cli/kk.js export ./fieldnote --target elementor --no-check. Lies danach fieldnote-elementor/GLOBALS.md und EXPORT.md.
3. Erklär mir Schritt für Schritt, wie ich Hello Elementor, das Child-Theme fieldnote-child.zip und das Kit fieldnote-kit.zip installiere.
4. Geh dann die Startseite fieldnote/pages/index.html Abschnitt für Abschnitt durch und beschreib für jeden: welche Elementor-Container und Widgets, welche globale Farbe und Schriftrolle, welche CSS-Klasse aus site.css. Keine Farben außerhalb der globalen Farben.
5. Ersetze dabei alle Beispielinhalte durch meine Angaben: [Name, Adresse, Leistungen].Lass dir jede Änderung zeigen, bevor sie auf die Live-Website geht. Zugangsdaten und Lizenzschlüssel gehören nicht in den Chat und nicht ins Repository.
Inhalte, Bilder und Logo ersetzen
Texte schreibst du direkt in Elementor. Die Texte im Paket sind Beispiele, alle Namen und Zahlen sind erfunden.
Bilder: Lade eigene Bilder in die Mediathek. Die Bilder des Designs liegen im Child-Theme unter assets/img/, falls du sie verwenden darfst (siehe Lizenz).
Logo: in Elementor über das Website-Logo in den Website-Einstellungen oder als Bild-Widget im Kopfbereich.
Farben und Schriften anpassen
Farben und Schriften änderst du in Elementor unter Website-Einstellungen → Globale Farben und Globale Schriftarten. Das wirkt auf jedes Element, das die globalen Werte nutzt.
Das CSS des Child-Themes liest assets/css/tokens.css. Wenn du dort einen Wert änderst, ändere ihn auch in den globalen Farben, damit beide gleich bleiben.
Die Werte im Kit sind Hex-Farben und feste Pixelgrößen für Desktop, Tablet und Mobil. Das Original nutzt OKLCH und fließende Größen. GLOBALS.md nennt die Unterschiede.
Dein Kunde kann globale Farben selbst ändern. Sag ihm, dass das die ganze Seite betrifft.
Was die Lizenz erlaubt
Gekauftes Design: Du darfst damit beliebig viele Websites bauen, eigene und für Kunden, und sie mit allen Rechten übergeben. Dein Kunde darf die Seite ohne dich weiterbetreiben. Nicht erlaubt ist, das Design selbst weiterzugeben oder zu verkaufen, auch nicht als Vorlage, Theme oder Kit. Der volle Text steht in der Lizenz.
Kostenloses Design: Es gilt LICENSE.md im Paket. Bei Fieldnote ist das CC BY 4.0: Nutzung auch für Kunden und kommerziell, mit einer kurzen Namensnennung im Quelltext oder auf einer Credits-Seite.
Fotos aus dem Paket darfst du nur als Teil der Website verwenden, die du damit baust. Nicht einzeln weitergeben, nicht als Stockfotos.
Schriften stehen unter der SIL Open Font License. Die Lizenzdateien LICENSE-*.txt bleiben neben den Schriftdateien liegen.
Deinen Lizenzschlüssel legst du nie ins Repository oder in Theme-Dateien. KIEKKIST-LICENCE.txt im Paket nennt nur Lizenz-ID und Projekt.
Häufige Probleme
„Das übergeordnete Theme fehlt“ beim Hochladen des Child-Themes.
Erst Hello Elementor installieren, dann das Child-Theme hochladen.
Der Kit-Import bricht ab oder ist nicht zu finden.
Trag die Werte von Hand ein: GLOBALS.md listet jede Farbe mit ID und Hex-Wert und jede Schriftrolle mit Größen. Das dauert ein paar Minuten und führt zum selben Ergebnis.
Elementor zeigt eine andere Schrift.
Wähl die Schrift aus der Gruppe mit dem Namen des Designs, nicht aus den Google-Schriften. Prüf, ob das Child-Theme aktiv ist, nicht Hello Elementor selbst.
Upload zu groß.
Das Child-Theme ist wegen der Bilder und Schriften einige Megabyte groß. Upload-Limit beim Hoster erhöhen (upload_max_filesize, post_max_size) oder fieldnote-child/ per SFTP nach wp-content/themes/ laden.
Ich finde keine fertigen Seiten.
Der Export enthält bewusst keine Seitenvorlagen, nur die Gestaltungsebene. Fertige Seiten bekommst du mit dem WordPress-Block-Theme-Export.
Der Export bricht mit „export refused“ ab.
kk prüft das Design vor dem Export und nennt jeden Fehler mit Datei und Zeile, zum Beispiel einen Abschnitt ohne Namen. Das passiert, wenn du die HTML-Seiten im Paket vorher umgebaut hast. Behebe die genannte Stelle oder exportiere aus dem unveränderten Paket und ändere danach. Prüfe auch die Node-Version mit node -v: Unter 22 läuft das Werkzeug nicht.
Was wir geprüft haben
Geprüft mit Fieldnote in einer lokalen WordPress-Testinstanz (WordPress 7.1, Elementor 4.3, Hello Elementor 3.5): Child-Theme über „Theme hochladen“ installiert und aktiviert, Kit über Elementors Import-Funktion eingespielt, alle 9 Farben und 9 Schriftrollen kamen an.