Aug 7, 2021

How to Turn a Webflow Website into a Drag & Drop System

Nikolai Bain Profile Picture

By Nikolai Bain

How to Turn a Webflow Website into a Drag & Drop System
How to Turn a Webflow Website into a Drag & Drop System

Prefer video?

Watch the video version of this blog post on my Youtube channel.

Watch Video 

Websites like Squarespace and Wix boast about the ease of creating a website in a small amount of time. Yet, the websites that you generate from these platforms often look too templated from a cookie cutter design because of the restrictions of their systems.

There is truth in the fact that building from a drag and drop builder helps to save time and money, but when the system you’re using isn't crafted around the design style of your organisation, it won't end up being a good fit in the long term.

To combat this, what if you had your own drag and drop platform that is built using components from your organisation's design system? With Webflow's symbols and symbol overrides, you can do exactly that.


Finding your reused components

If you were to look at some of the pages you've already built for your website (whether that be a fully custom build or built in Webflow), you'll notice that the sections you've developed have some similarities and could even be standardised.

A common example of a component section like this is a featured section with an image to the left, and a title, paragraph, and cta button on the right. This is a simple layout that gets reused countless times throughout a website, so why not standardise it into a symbol?

When creating a new page, consider how you can transform common sections like tab sections, slider sections, and banner sections into symbols, to then implement into that new page.






Turning components into symbols with overrides

Once you’ve identified the components you want to reuse to build new pages, you can turn them into symbols by selecting the main parent of the component (usually the section div), and hitting Command + Shift + A to turn it into a Webflow symbol.

For components such as call-to-action banners, you might not need to change the text for different pages, but for most other components you will need to change the text, links, and images depending on the page. This is why you add symbol overrides to dictate different content for different sections.


Adding a symbol override is simple. First, double click on the symbol you've just created to edit the main symbol. Then, click on the text, image, or link that you want to change across different pages and link the text to a new field. After giving it a name, you can go out of the symbol, and then re-select it to see the instant  override to the right that you've just created.



Building your own drag and drop system

When you've turned enough sections into reusable symbols, building a new page can be as easy as using any other drag and drop website builder. Simply go into symbols and drag and drop all the components you will use throughout the new page and then update the copy in each symbol using the overrides.

Once your system is built like this, it becomes easier to let designers and copywriters build and edit new pages without worrying about them knowing how to code or develop websites. You also save plenty of time that you would have wasted recreating the same sections over and over again.

Summary

If designing and developing a brand new page every time you need to add to your website takes up too much time, but you still want the freedom to use a system that is based around your organisation’s design style, then using reusable components is the perfect solution.

Think of it as starting from building blocks that are crafted perfectly to suit your brand, and building blocks that you can edit or add to if they ever feel too restricting.

Building in this way saves time and money by speeding up the process of creating a new page tenfold but still leaves the flexibility of changing the style or system at any time.



Webflow Templates Cover

Don't want to build from scratch?

Start with a Webflow template and have your new website up in no time.

Nikolai Bain Profile Picture

Written by

Nikolai Bain

I'm a Webflow professional partner and template designer who helps users learn to use Webflow better.

More about me

Written by

Uday Tank

Uday Tank is a serial entrepreneur and content marketing leader who serves the international community at Rankwisely. He enjoys writing, including marketing, productivity, business, health, diversity, and management.

More about Rankwisely

Ready to learn more?

I've worked with countless businesses around the world. Maybe you'll be next.

Get in Touch