Webflow Hack: Using Snippets For Styles

Save time in Webflow with snippets for class names

In this tutorial we’ll show you how to use snippets to speed up your development in Webflow. You can quickly add styles to the elements on the page by using short 2-3 character snippets in conjunction with Command-Return (Control-Enter on PC).

‍

What you'll need

• Alfred or another tool that supports snippets
• Webflow

‍

Step 1: Getting started

• In this tutorial, we’ll focus on Alfred. If you’re on a PC, try out TextExpander.
• To use Alfred Snippets, you must first download and install the Alfred app. Alfred offers a free version with limited features, but to access the full functionality (including Snippets), you will need to purchase the Powerpack.
• Once you have installed Alfred, a quick way to get going is to download this collection with the snippets we use in the demo. 

‍

Step 2: Setting up your snippets in Alfred (2:30)

1. Go to Alfred Preferences > Features > Snippets 
2. Create a new Collection (or download this one) 
3. You can use an optional prefix or suffix at the Collection level to help differentiate the keywords from other Collections you may have
4. Add class names and a keyword for each snippet

‍

Step 3: Using the snippets to add classes to elements in Webflow (0:23) 

1. Use the keyword in Webflow to quickly add in the corresponding class
2. Customize snippets for frequently used styles like background colors and text sizes.
3. Alternatively, use the built-in Text Replacements feature in Mac OS, but it syncs across all devices.

‍

Alternatives to Alfred (4:10)

• Other apps like Raycast (Mac), TextExpander (Mac + PC), and Keyboard Maestro (Mac) can also be used for snippets.
• Raycast is a free option while Alfred is a paid app.

‍

Last thoughts 

• By using Alfred Snippets in Webflow styles, you can save time and streamline your workflow. Instead of typing out the same code repeatedly, you can create shortcuts for frequently used styles and apply them with just a few keystrokes. 
• With the added bonus of assigning hotkeys, you can further speed up your workflow and focus on designing and developing your website.
• For more tips and tricks, sign up for our email newsletter, subscribe to Insider on YouTube or follow us on Twitter.