Mastering Webflow Templates

Re-Templating by Site Rebuild

Overview
Choosing a Template for Your Site
100
Re-Designing a Webflow Site
Should I Redesign My Webflow Site?
102
Re-Templating by Site Rebuild
201
Re-Templating by Template Merge
203
No items found.
Published
July 8, 2023
Updated
in lightbox

Buy your template, and then rebuild your new site in the template.

This involves;

  1. Copy-pasting all of your static content
  2. Exporting and re-importing all of your images and videos
  3. Rebuilding your CMS, exporting your old content and importing it into the new CMS.
  4. Mapping old paths to new ones ( for any changes ) with 301 redirects
  5. Setting up new hosting, assigning your domains, and shutting down the old hosting, when you're ready to bring it live.

This is the essentially same approach you'd use if you were rebuilding e.g. a Wordpress site on Webflow.

When is this approach best?

It's most suitable when;

  • Your site overall is relatively small and uncomplicated
  • You do not have much CMS content, and it does not have complex relationships
  • You do not have a ton of images and videos
  • You do not have much custom code
  • You do not have a lot of complex external integration or automations
  • Your want to make major structural and navigational changes to the site, as part of the re-design

Approach

How you approach this depends a lot on the differences between your current site structure and the new site structure. Big differences in the page arrangement, navigation, and CMS structure will require you to adapt.

However here's a basic approach;

  • Do basic static pages first, like About and Contact. That content doesn't change often, and this will give you a feel for working with the new template.
  • Then, do the homepage. This is the most visible page and has important aspects you want to sort out early, as they impact the rest of the site.
  • Migrate initial CMS content- starting with things that won't change much before launch. e.g. blog categories, but not blogs. The reason is that you need real data to work with, but the CSV-export CSV-import process is painful.
  • Create any "test" data as necessary - new CMS collections you need, sample records that look like your real data. You can use CSV export and import for this as well if you want but keep it simple for now.
  • Build out your CMS pages and collection list designs using current data
  • Import all images and video content **

Prepare your 301 redirects map

When the new site is ready...

  • Get a full map of your previous site’s URLs. You can create this from the /sitemap.xml if it’s auto-generated.
  • Load that list of URLs into a Google sheet, column A.
  • Then do the same for your new site in column B.
  • Match them up, page for page for every path that needs to be redirected.
  • Remove the others that will maintain the same path on the new site.
  • For path groups that are changing, such as /blog/ changing to /blogs/, you want to figure out the wildcard redirects to use.
  • Prepare a CSV of all of your redirects, ready to load. Make sure it only contains items that need to be redirected, and contains correct wildcard strings where you're using them.

Configure the 301 redirects on your new site

Add a hosting plan to your new site.

Upload and edit your 301 redirects. Finsweet’s browser extension can help you import a CSV directly.

Test everything on the new site, which is still on a webflow.io subdomain.

Migrate to your new site

When you're ready for migration;

  • "Lock down" the old site, no further content changes are allowed
  • Do your final CMS export and import
  • Do any final 301 redirect updates
  • Test the new site thoroughly
  • Remove the domain from your old site and add it to your new site
  • Cancel hosting on the old site

SEO Tips

  • Use your old site as a guide, particularly regarding page titles, headings and content. You want the same “search value” in terms of what the page delivers to users
  • Match up URLs where it’s easy, e.g. you may be able to do that with main pages like /about and some CMS pages if you’re exporting and importing CMS content e.g. /blog/great-article-102

** Later;

  • Will do a deeper writeup on better ways to export-import CMS-stored images and video. Power importer pro?
  • Scraping - full crawl and download of images & artwork

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.