Introducing the Lndr Importer

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 index.html.

HTML Directory Structure Example

Optionally, you can add a screenshot.jpg and 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.

Adding parameters to HTML tags lets Lndr know how to interpret them

We wrote detailed documentation to explain how to do this:

Lndr Documentation: Getting Started

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 node_modules, gulp, grunt or 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 .git folder.

Now you are ready to send your folder to a zip archive like in the image below.

Compress your template into a zip file.

Upload

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.

Import template button

Drag-and-drop the zip archive to import it into Lndr.

Drag-and-drop file 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.