Issue 5
Another good week of content. Are there every down weeks? Not yet.
Check out the new University articles that help you sync your Ecommerce products/inventory to Facebook, Instagram, and Google Merchant. Then there were a ton of good showcases for sites built in Webflow. Then Dram's custom cursor is a great method for using a custom cursor effect built with interactions. Lastly a couple of resources for color fonts and a design checklist.
Enjoy!
Webflow
Here's some content from Webflow's official channels.
Facebook, Instagram, and Google product catalog integrations
If you haven’t already noticed, we’ve added a new set of integration options to your ecommerce settings that make it easier to run ad campaigns and create interactive social posts on Facebook, Instagram, and Google.
Syncing products to Google Merchant Center
Integrating your store’s product set to Google Merchant Center [↗] lets you keep product data, images, inventory count, and more in sync as you run advertisements on Google Shopping.
Syncing products to Facebook Catalog Manager
Integrating your store’s product set to Facebook’s Catalog Manager [↗] lets you keep product data, images, inventory count, and more in sync as you run advertisements and posts on Facebook and Instagram.
Setting up Google Analytics
Google Analytics gives valuable information about user behavior and interaction.
Facebook Pixel
To embed a Facebook pixel in your Webflow project, paste the pixel ID in project settings → integrations → Facebook pixel. If you host websites that collect personal data from EU residents, you need to comply with GDPR.
Setting up Instagram Shopping
Instagram shopping [↗] allows you to tag products in posts and link directly to those products on your Webflow Ecommerce store. Posts with tagged products will also show up in the shopping section of Instagram’s discover section, to be shown to potential new customers.
Horizontal Movement On Scroll
Page goes ⬇️ title goes ⬅️➡️
GRAPHIC DESIGN ARCHIVE
Brought to you by Webflow Explore key moments in graphic design history like the middle ages, punk publishing, and swiss design, meet the makers, and see how design has shaped culture.
I 💙 this so much!
Showcases
Here's a sample of great sites built in Webflow. #MadeInWebflow
newcircle - Webflow
by newcircleinc
Professional, clean with interactions
Y'all - Webflow
by Y'all
Look below the fold
Onion Oakley - Webflow
by Kael
Scroll effects
Poulos Collective - Webflow
by Stefan
It's like taking a master class in grid. Definitely open in the Designer.
Kontora Media - Webflow
by KONTORA
Castup - Webflow
by Castup
3D interactive balls - Webflow
by Eli
Zestful - The Ultimate Employee Perk
by Zestful
Lemon-aide - Webflow
by tiffany
Creativería Website - Webflow
by Creativería Design
Makerpad
by Ben Tossell
Portfolio - Webflow
by Sam Reiss
Finsweet Websites - Webflow
by Finsweet
Fast Eddies Fabrication - Webflow
by James Gidoomal
Zigzag /\/\/\/
Tips, Tricks, & Tutorials
Take some time to learn something new.
Daily Interaction #31 | 180° Flip Effect on Hover | WebDev For You | Made in Webflow
Duration - 0:22:4
Simple way to create Diagonal Section / by minimal custom code (Step by Step)
by Ezra Siton
Very in-depth guide
Sketch File Preparation - Part 2 (Design Landing Page in Sketch and Bring to Life in Webflow)
Duration - 0:16:3
Dram's Custom Cursor - Webflow
by Alex Dram
This is so brilliantly simple and simply brilliant!!!
Resources
Here are a collection of great resources that you can use on your next project.
Colorfonts! WTF? ? - Webflow
by Fontself
The name says it all.
Design Checklist - Webflow
by Tibor
Stay on track. This list recommends tools for each step too.
Misc
Random things get put here because I didn't know where else to put them.
Thanks for making it to the end. I hope these sources give you inspiration or head start on your next Webflow project. Did I miss something? Let me know about it on Twitter and you might see it in the next Webflow Weekly issue.
Until next week, happy designing!
Your clients will love this.