Last August our team got together in Copenhagen to discuss ways to make Lndr more valuable and scalable for our growing number of users.
We spent a few days scribbling down lists of features onto drawing boards and discussed each of them at length. “The importer” was one of the more ambitious, yet very useful features we have come up with.
Our goal with the importer is to give our users the ability to import their own designs into Lndr. It works as the following: take any HTML design, drag-and-drop it inside Lndr and it becomes a Lndr compatible template.
The imported template will appear in the user’s library of templates and become instantly available with the same editing capabilities as any template created by the Lndr team.
We didn’t know how we were going to do it, we only knew that we had to do it for our customers. Proudly, and without further ado, I would like to show you how it works.
Ready to get started?
To make things easier, we have created an empty starter template which you can use to implement your HTML design. The template is meant to be a quick starting point to get your design into Lndr.
Your main file should be in the root of your template directory and should be called
Optionally, you can add a
favicon.ico in your root directory like in the image above.
Specify your editables
The next step is to give your editable elements attributes to let Lndr know how you’d like them treated.
Zip archive the template directory
To upload a template into Lndr you must create a zip archive first. Make sure you delete anything that’s not needed for the template.
If you are using modern front-end workflows, make sure you delete your
webpack and leave only the essential files necessary for your template to render locally. If you use
git for source control, make sure to delete the
Now you are ready to send your folder to a zip archive like in the image below.
Now you are ready to upload the template to Lndr. If you have the importer feature enabled on your account, you should see the import icon in the top right corner next to your name.
Drag-and-drop the zip archive to import it into Lndr.
If all goes well, you will see your imported design when you create a new landing page.
We are actively using and testing the importer and have noticed a few bugs here and there. Overall, it has made our template design and implementation on Lndr much faster!
To learn more about the importer, read through our documentation.