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

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.