Import static HTML design into Lndr in 30 minutes
There are many great, beautiful and free HTML designs that are available on the internet today that you can use to build simple web pages. This post will show you how to take advantages of these designs by importing them into Lndr and templates for your future use.
Step 1. Find an HTML template that you like. There are many of them if you simply perform a google search. In this example, I will use
https://www.free-css.com/free-css-templates/page229/indigo
This is a typical mobile responsive, modern template made for a product or service. I will download the template locally into my machine.
Step 2. Adding the special Lndr template markup.
You can find more complete information on our documentation page. https://lndr.co/docs/. I will start adding markups to the areas that can be edited.
For example, I will change the heading tag to <h2 editable>Indigo Template</h2> in order to mark the heading as an editable area.
You can use any text editor to edit the index.html file that comes with the template.
Additionally, you can add template options such as colors, background, and others.
Step 3. Adding additional assets
Minimally, the Lndr importer requires you to include a screenshot for the template. You can create a screenshot using any screenshot capturing tools. After capturing the screenshots you should have 2 additional files in your template:
- screenshot.jpg
- screenshot-big.jpg
Step 4. Organize your folder structure
Your final folder structure should look like the following, please make sure that the image links and stylesheets are changed in the index.html to reflect this folder structure.
Finally, compress your directory into one .zip file
Step 5. Import your template
Drag and drop your template zip file into the Lndr template importer.
You should be able to see the new template now under “imported templates”
Finally, see your Lndr template in action
Additional Resources
Please refer to our original post on the Lndr importer
https://medium.com/ffwproducts/introducing-the-lndr-importer-6c079f3169a4
Please contact us if you are interested to try out the importer.
