Tips for web designers working in Webflow
Tips for web designers working in Webflow
Webflow is a straightforward website builder tool that produces gorgeous websites. Best of all, you don’t need to have extensive technical knowledge or read a library of documentation to begin creating. Regardless of how well you know the platform, there are numerous pro Webflow tips and tricks that can help improve efficiency and speed up the development process considerably.
To learn more about these Webflow tips and tricks, keep reading!
Webflow Tips and Tricks for Designers
Control the smooth scroll speed
When elements have a defined section ID, you can direct links to anchor down on that component. That means when a user clicks the anchor, the page smoothly scrolls to that ID with an easy in-out mode for over one second, which is a long time with most hover interactions lasting 200 – 350 milliseconds. It makes sense for long scrolls to require more time, but one second is too long. On the other hand, one second for a smooth scroll is too short.
Luckily, the Webflow platform allows you to change the scroll speed using custom attributes. This can be executed two ways, depending on whether you need more granular control or want scroll interaction to share one time.
- Add the data-scroll-time custom attribute to the <body> tag, which affects all scrolling operations on a single page.
- Add the data-scroll-time custom attribute to the anchor-linking individual element, which controls the scroll speed of that specific element.
Duplicate elements with option + drag
Like using Photoshop, when you need to duplicate an element that’s already been designed, click it, then hold option (MAC), alt (Windows) while dragging the element to a different location. This tip eliminates the need for moving the selected element as the software simply duplicates it in the alternate location, including all nested child elements.
Highlight all elements using the same class
Unlike most of the other tips in this review, this trick is well documented and known, but it’s worth mentioning since it’s easily overlooked and those new to the platform may not be aware of this capability. Under the selector filed within the style tab is a label that highlights the number of instances of the current selector that appear on the current and other pages. While this is helpful information, it can also be clicked to highlight all elements that use this selector. As one of many Webflow good practices, you don’t need to individually navigate to each selector location to make an update since they’re all selected with this trick.
Quickly create amazing animations
A regular visitor to your site demands a little eye candy, and animations can take those visuals to the next level. Webflow allows you to create animations fast and easily that pop. By keyframing the popup elements and adjusting the start and end positions, you can create a hover animation. All you need to do is create elements and add settings to them without any coding or stress.
Simplify custom content types
Webflow’s content management system (CMS) allows you to simplify custom content types by using Collection Pages, which are templates for recurring content pieces. For instance, if you’re running a store and want to swap out various products without changing the page design settings, you simply create a new CMS Collection for different product types and define the fields for each that needs to be displayed. These fields include the product name, description, color, and attributes.
Vertically center anchor links with custom attributes
When clicking the anchor link, the anchored section automatically appears at the top of the page or below the navbar. However, if you wish to bring the anchored section to the middle of the viewport, simply add the data-scroll attribute to that section and set the value to mid. To do this, select the element to be anchored, navigate to the settings tab, and click the + icon, which will add a new custom attribute.
Use symbols to hack page layouts
In many instances with website builders, you must create each page individually, which can be incredibly tedious and time-consuming. Webflow utilizes CSS classes, so you can create symbols that are utilized throughout the website. These symbols are saved in a preferred menu and add all edits instantly. The alternative is to copy and paste elements of the site grid, which can also be time-consuming, so symbols can speed up this development!
Utilize non-HTTP links with a backtick
Whenever you need to add a special code to your website that isn’t an HTTP link, simply place a backtick (`) at the beginning of the code, then click out of the field or hit tab to save. This stops Webflow from adding the HTTP in front of the code line.
Paitdigital is a team of SEO experts that utilize Webflow good practices to create an efficient, responsive, and high-ranking website for you. Their professionals are updated on the latest SEO concepts and have the best tools while working on the Webflow platform. To learn more about their offers and discuss your needs, contact Paitdigital today!