How I Create My Webflow Templates

Recently I did a video on whether you should become a webflow template designer and talked real numbers about what is involved and how much you can make. Today, I'm going to take you through the step-by-step process that I go through to create my Webflow templates.

I'm going to outline all the stages I go through, including idea generation, looking for inspiration, concepting the design, developing the template, all the admin pages to include, and finally marketing the template. So let's jump right in!

‍

‍Finding Ideas

Idea generation can be one of the easiest or the hardest parts of being a creative. Some weeks you'll have plenty of new ideas and some weeks you'll have none. But there are a couple of ways that I make it easier to find great ideas for new templates.

Firstly I look on other template marketplaces, such as ThemeForest, Creative Market, UI8 or Template Monster, otherwise I browse the templates of other website builders, such as Wordpress, Squarespace, Shopify, Semplice, or Cargo.

When looking through all these marketplaces, I'm jotting down ideas for templates that I haven't seen before on the Webflow marketplace, or just in a style I haven't seen before.

This is because in the marketplace you can either build templates for popular categories where there are already plenty available, such as for portfolio sites, or you can fill a gap in the marketplace where there is a unique need that isn't being filled, which can be a little bit harder to think of and find.

For example, for pets, there are already templates for vets, and for pet insurance, and for adoption shelters, but none for pet food, dog trainers, or dog walkers.

Once I figured out exactly what I want to do the template for, I move onto finding inspiration.

‍

‍Looking for inspiration

Now in some ways this can be similar to looking for ideas, but in this stage I'm looking for real world examples of websites in the category I'm designing for. I'll usually make a new tab group for inspiration and add to it to find great examples.

This is a pretty similar process that you might go through when looking for inspiration for building client sites, but you'll be looking for both design style, and also the actual pages to include in the website.

Restaurant websites will have a certain look to them, but they will also include pages that not many other kinds of websites do, such as a page for their menu and a page to book a reservation.

Through this inspiration process I'll also go on sites such as Dribbble and Behance and take screenshots of designs that might fit the style I'm going for. Then I'll collect them all in a Figma file where I also create assets for the website too.

‍

Designing and developing the template

Once I have enough inspiration, I'll usually throw around some ideas in Figma to test overall ideas and themes without having to build them, but I don't design everything in Figma first like I might do with client projects, and this is usually a waste of time and I can still test out ideas once it's in Webflow anyway.

Once I have a rough idea of what I'm going for I'll get straight onto developing the main pages to see how it looks in Webflow and how it might adapt across the different screen sizes.

Webflow has quite strict guidelines around the naming system used, and so when building each template I always try to make the system inside of Webflow as simple as possible.

Using a system like Finsweets Client First approach doesn't really fit when creating templates as you have to make most of the sections quite multi-purpose, since you can't be exactly sure what content a customer is going to put in a given section.

Because of this, the naming system I'll use in a template is based around the structure of each element rather than the content inside them. So I'll use grids called 2 column grid, 3 column grid, and then I'll also use the 12 column system so that creating new sections or editing sections is super flexible.

I'm also using combo classes for sections, spacers, headings, and paragraphs, so that when someone uses the template, they can select an element, remove the combo class, and then see the other classes available for that item. So for a section, they can remove the colour for the section, and then change to a different colour. Same with the heading, they can remove the size and then change to a different size easily.

All of these styles I'll keep on the style guide page, so when someone uses the template, even if they don't have any instances of a specific combo class across the site, there will still be a copy of it available so they don't need to worry about accidentally deleting the styles when cleaning up classes.

Adding the admin pages

For each template there a couple of admin pages that need to be added to make the template easier for customers to use, which includes the style guide, for keeping all the classes throughout the site in one place to refer back to, a licences page, for where customer can find where the images throughout the template are sourced from.

“Instructions” is for any instructions for the template, such as how to use the 12 column system, and “Changelog” is for if there is ever any changes to the template, which in a couple of months will likely be filled up with template designers adding membership functionality to their templates, including me.

‍

Marketing the template

Once the template has gone through the submission and approval process, it is available for customers to buy. Now as I've said previously, there is a massive surge of sales as the template first becomes available and appears on the top of the template marketplace page, which lasts for about a couple of weeks, and then sales start to taper off after that.

After this happens, I haven't yet found the best way to market templates, but I personally make sure to include them in some of my tutorial videos to help give them some exposure, but past that I've also seem template designers add their templates to socials such as Instagram, Dribbble and Pinterest, and website inspiration sites such as Land-book, Lapa-ninja, and a Landingfolio.