Faster coding in Webflow

Webflow is a great time saver without any shadow of a doubt BUT… I am certain it could be even better. Dragging elements and positioning them within the Navigator hierarchy does take time (and precise mouse movement and clicking effort, as well), even more so when the hierarchy becomes quite deep.

I’ve been thinking, what could be faster than drag’n’drop then? Well, what came to mind is the king of usability in my humble opinion - AutoCAD. After working with AutoCAD, which is set to solve really complex user interaction challenges, every other piece of interface, either online or desktop, has looked dumb and wooden to me… So, how they speed up the work process in AutoCAD is by having a command field and typing commands (which are usually one or two letters long).

It sounds like a lot of hassle - memorizing commands, but it is not. By not having to use the mouse and drag and targer and hit anything, the work process is times faster! Just picture this - instead of dragging an empty div and positioning it somewhere in a deep Navigator hierarchy, you typed something like “ins div” and immediately, a div appeared under the currently selected branch.

Well, you could say you could achieve the same thing with keyboard combinations. Keyboard combinations are not exactly the same as commands, but if this helps you get the idea, you can think of it as this way, too.

Another reference points (which I have not used myself, though, is VIM (http://www.vim.org)).

So, please, please do not disregard this suggestion as far-fetched, because we are talking about huge savings of time here. Do talk to people who work with AutoCAD to confirm the usefulness of commands! :slight_smile:

3 Likes

As far as adding elements, i’m sure you realize you can drag them directly into the canvas right? Additionally, you can select any element in the canvas or navigator that you want a new element to either be inside, or below and simply click the element you want to create in the add pane. It will create the new element instantly without dragging at all. You can be on the body element and click navbar, section then container and it will nest the container inside the seciton. Then hit the down arrow and it will be ready to add another section or whatever you want below the section. Doing this, you can have your whole page structure done in 30 seconds.

2 Likes

As far as adding elements, i’m sure you realize you can drag them directly into the canvas right?

I do, but again, with too many elements over each other it’s an annoying game of “hitting and missing”.

It will create the new element instantly without dragging at all.

Not that useful because it always positions the new element at the bottom - what if I need it in between upper elements or on top? Further more, as soon as the new element is created, Webflow automatically switches to the Style pane and I need to go back to position the element where I want it first and then go to the Style pane.

By the way your post just inspired me to hint Webflow that they could prepare a special tutorial on productivity basics for Webflow. For example, it is only now that I noticed that could switch from Navigator pane to Style pane by just hitting the “S” key! Handy shortcuts like these should be introduced to Webflow users from the very beggining.

(To return the favour, another handy tip: by clicking Shift+Alt and dragging padding or margins you can adjust all paddings or margins with equal distance.)

There was a video with a ton of shortcuts back when webflow first launched. I can’t find it now though but I did find this Intro to the Designer | Webflow University

I think it would be super cool to have a youtube web series of short clips on productivity tips for sure! @thesergie @PixelGeek any ideas?

The option click for padding/margins is probably my most used keyboard shortcut of everything in Webflow but still a great tip for anyone who doesn’t know that, super powerful!

If you select the element you want it to be after or inside, it will create it there when clicked. I know, not a perfect solution but definitely a time saver.

As @DFink said. Use the shortcuts and you’ll be much more productive. For example

  1. Click A on your keyboard and the Elements pane will appear.

  2. Click on the element you want. i.e. Section – and it will appear at the bottom of your page and automatically scrolls to it for you.

  3. Click F on your keyboard and it will switch to the Navigator panel.

  4. In the Navigator panel – drag your element up the list to wherever you want it to sit in the page structure.

  5. Click S on your keyboard – which will change you to the Style panel

  6. Add your class name and style your element.

  7. Rinse and Repeat with all other elements.

  8. Job done.

So learn the shortcuts and you’ll never even have to drag anything on the visual view, and you’ll breeze through building the structure.

3 Likes