ç

Workshops

Episode #

93

—

August 29, 2017

Migrating a WordPress site to Webflow CMS

In this workshop, we'll show you how to migrate a WordPress site into the Webflow CMS.

Big thanks to Charli Marie for allowing us to use her WordPress CSV export for this workshop.

Charli Marie is a Graphic designer, YouTuber, concert-goer and fashion-lover living in London. Check out her YouTube channel.

Discuss this episode

Clone this project

Timestamps

00:03:13 - Starting the visual breakdown of the blog page

00:05:28 - Starting the rebuild with the static navbar and logo row

00:16:11 - Creating a collection for the blog categories

00:19:13 - Using Flexbox to properly space out the category links

00:21:19 - Building out the "about me" row with flexbox

00:25:43 - Using Font Awesome to add social icons and links

00:29:28 - Importing a WordPress database into the Webflow CMS

00:41:20 - Adding the imported WordPress data to the Webflow site and designing with it in real-time

00:56:18 - Q&A and site reviews

01:06:00 - Creating a simple lightbox with Webflow interactions

01:13:15 - Finishing up the blog page and footer content

01:22:16 - Making sure that all elements are responsive for smaller breakpoints

01:31:55 - Starting on the blog post template rebuild

01:38:28 - Adding a dynamic embed for dynamic social sharing

01:40:02 - Making sure all elements are responsive for smaller breakpoints

01:42:29 - Q&A and site reviews

Past Workshops

How Webflow onboards new users

How Webflow onboards new users

The brand design process at Webflow with Ryan Morrison and JP Teixeira

Webflow Ecommerce: new features, and what's ahead

Webflow Ecommerce: new features, and what's ahead

Building responsive footers with CSS grid

Building responsive footers with CSS grid

Live Q&A with Vlad, CEO of Webflow (End of 2018)

Live Q&A with Vlad, CEO of Webflow (End of 2018)

Creating a split page layout in Webflow

Creating a split page layout in Webflow

A sneak peek at Grid in Webflow

A sneak peek at Grid in Webflow

Creating full screen menus in Webflow

Creating full screen menus in Webflow

View All Past Workshops