Guide · Elementor
Install the Elementor kit and child theme
The Elementor export brings the design layer: a child theme with fonts, tokens and CSS, and a kit with global colours and fonts. Ready page templates are not included; you build the sections in Elementor.
In the example the design is Fieldnote (free, short name fieldnote). For your design, use its short name.
What you need
- WordPress 6.6 or later with the free Elementor plugin.
- The Hello Elementor theme as parent theme (free in the theme directory).
- For the export: Node.js 22 and Git.
What is in the export
Folder fieldnote-elementor/
fieldnote-child.zip- The child theme to upload. Fonts, tokens, section CSS, images.
fieldnote-kit.zip- The kit to import: global colours and global fonts.
fieldnote-child/- The child theme unpacked, for FTP or edits.
elementor-kit/- The kit contents unpacked.
GLOBALS.md- Every colour (hex) and font (sizes for desktop, tablet, mobile) to enter by hand.
EXPORT.md- Export report.
By hand
-
Download the ready export
Free designs download from the design page, purchased ones from the download page with your licence key. Then choose what to load: Elementor kit, everything in one ZIP, or the design package only. Unpacked, the export sits in
fieldnote/exports/elementor/, withINSTALL.mdandEXPORT.md. It is the same content asfieldnote-elementor/in the steps below. -
Or create it yourself
To rebuild the export from a changed design package, use the Kiekkist tool
kk. It is open source, runs locally and needs Node.js 22 or later. Put it next to the design folder (in the “design package only” download it isfieldnote/). The command writesfieldnote-elementor/;--no-checkskips the visual comparison (for it, runnpx playwright install chromiumonce).git clone https://github.com/tillheidrich/kiekkist cd kiekkist && npm ci && cd .. node kiekkist/cli/kk.js export ./fieldnote --target elementor --no-check -
Install Elementor and Hello Elementor
Plugins → Add New Plugin, search for “Elementor”, install, activate. Appearance → Themes → Add New Theme, search for “Hello Elementor”, install. You do not need to activate it.
-
Upload the child theme
Appearance → Themes → Add New Theme → Upload Theme, choose
fieldnote-elementor/fieldnote-child.zip, install, activate. WordPress checks that Hello Elementor is there. In the list the theme carries the design’s name. -
Import the kit
Elementor → Tools, tab Website Templates (the name can differ slightly by version and language), under “Apply a Website Template” click Import or “Upload .zip file”. Choose
fieldnote-kit.zip. The kit only holds site settings, no pages and no plugins. -
Check the global values
In the Elementor editor: Site Settings → Global Colors and Global Fonts. They now list the design’s colours and type roles, such as
ink,accent,poster,body. If they are missing, enter them by hand fromGLOBALS.md. -
Build the pages
Rebuild the sections in Elementor with the global colours and fonts. Use the pages in the package (
fieldnote/pages/*.html) andDESIGN.mdas reference. The design’s CSS classes fromsite.cssare loaded: you can add them on a container under Advanced → CSS Classes. For a section nobody needs to edit, an HTML widget with the markup from the package page also works. -
Fonts
The child theme serves the fonts. In Elementor’s font picker they appear in a group named after the design. The child theme switches off loading Google Fonts.
With an AI assistant
Your AI coding assistant can create the export, replace the sample content and tell you what is left for you to do. Give it the unpacked design folder and have it read these files:
fieldnote/DESIGN.md: design rules, colours, fonts, what not to changefieldnote/tokens.jsonandtokens.css: every colour, type and spacing valuefieldnote/README.md: what is in the package and what to replace before launchfieldnote/LICENSE.md: what you may do with code, copy and photosfieldnote/UEBERGABE/: handover templates for your client (German and English)- in the export
fieldnote-elementor/GLOBALS.mdandEXPORT.md
Prompt to copy. Replace the details in square brackets. Instead of fieldnote, use your design’s short name.
The folder ./fieldnote holds a website design as a package. I want to build it in WordPress with Elementor.
1. Read fieldnote/DESIGN.md, README.md and LICENSE.md first.
2. Get the Kiekkist tool (git clone https://github.com/tillheidrich/kiekkist, then npm ci inside it) and create the export: node kiekkist/cli/kk.js export ./fieldnote --target elementor --no-check. Then read fieldnote-elementor/GLOBALS.md and EXPORT.md.
3. Explain step by step how I install Hello Elementor, the child theme fieldnote-child.zip and the kit fieldnote-kit.zip.
4. Then go through the home page fieldnote/pages/index.html section by section and describe for each: which Elementor containers and widgets, which global colour and type role, which CSS class from site.css. No colours outside the global colours.
5. Replace all sample content with my details as you go: [name, address, services].Have every change shown to you before it goes onto the live site. Passwords and licence keys do not belong in the chat or in the repository.
Replace content, images and logo
Copy you write directly in Elementor. The copy in the package is sample content; every name and figure is made up.
Images: upload your own to the media library. The design’s images sit in the child theme under assets/img/ if you may use them (see licence).
Logo: in Elementor through the site logo in Site Settings, or as an image widget in the header.
Adapt colours and fonts
You change colours and fonts in Elementor under Site Settings → Global Colors and Global Fonts. That affects every element using the global values.
The child theme’s CSS reads assets/css/tokens.css. If you change a value there, change it in the global colours too so both stay the same.
The values in the kit are hex colours and fixed pixel sizes for desktop, tablet and mobile. The original uses OKLCH and fluid sizes. GLOBALS.md names the differences.
Your client can change global colours. Tell them it affects the whole site.
What the licence allows
Purchased design: you may build unlimited websites with it, your own and your clients’, and hand them over with all rights. Your client may keep running the site without you. What is not allowed: passing on or selling the design itself, also not as a template, theme or kit. The full text is in the licence.
Free design: LICENSE.md in the package applies. For Fieldnote that is CC BY 4.0: use for clients and commercial work is fine, with a short credit in the source or on a credits page.
Photos from the package may only be used as part of the website you build with it. Do not pass them on separately or use them as stock.
Fonts are under the SIL Open Font License. Keep the licence files LICENSE-*.txt next to the font files.
Never put your licence key into a repository or theme files. KIEKKIST-LICENCE.txt in the package only names the licence ID and project.
Common problems
“The parent theme is missing” when uploading the child theme.
Install Hello Elementor first, then upload the child theme.
The kit import fails or cannot be found.
Enter the values by hand: GLOBALS.md lists every colour with ID and hex value and every type role with sizes. It takes a few minutes and gives the same result.
Elementor shows a different font.
Pick the font from the group named after the design, not from Google Fonts. Check that the child theme is active, not Hello Elementor itself.
Upload too large.
The child theme is a few megabytes because of images and fonts. Raise the host’s upload limit (upload_max_filesize, post_max_size) or upload fieldnote-child/ by SFTP into wp-content/themes/.
I cannot find any ready pages.
The export deliberately contains no page templates, only the design layer. For ready pages, use the WordPress block theme export.
The export stops with “export refused”.
kk checks the design before exporting and names every error with file and line, for example a section without a name. That happens when you changed the HTML pages in the package first. Fix the named spot, or export from the untouched package and change things afterwards. Also check your Node version with node -v: below 22 the tool does not run.
What we checked
Checked with Fieldnote on a local WordPress test instance (WordPress 7.1, Elementor 4.3, Hello Elementor 3.5): child theme installed and activated through “Upload Theme”, kit applied through Elementor’s import function, all 9 colours and 9 type roles arrived.