Tag Archives: webflow

Embed custom HTML – Webflow tutorial

The Embed element lets us integrate code right into our project. And to demonstrate this, we’ll use a custom form embed from Typeform, but this process is similar for most third-party embeds: they’ll usually provide code that looks something like this. Or this. Or even this. We simply right click to copy the embeddable code… Read More »

Horizontal Movement on Scroll – Webflow interactions and animations tutorial

Text. Mountain. Text. Da Vinci called these the three components of any great design. We’ll animate the text to move horizontally based on our scroll position. Now we covered this example earlier in the Interactions course when we covered triggers and animations. But we’ll build this interaction from scratch. Our goal (as we scroll) is… Read More »

Embed Typeform into Webflow – Webflow tutorial

So there are four ways we’re going to cover adding Typeform to your Webflow project. The first is really straightforward — it links out from a link in your project to Typeform’s website. Second is a full-page option, this embeds a Typeform on a dedicated page INSIDE your project (that takes up the whole page).… Read More »

Add Facebook, Twitter, and Myspace buttons to your site – Webflow tutorial

As we know, social proof is the idea that others endorse you or your business. And to demonstrate that, and to better connect people with social accounts on your site, we’re going to cover Facebook, Twitter, and Myspace. Let’s start with Facebook. You can access the Facebook element the same place all elements are listed… Read More »

Reveal elements on hover — Webflow interactions and animations tutorial

In this video lesson, we’ll cover using a trigger element, like this link block, to affect the animation of its child elements (the heart icon and the obscene donut prices). We’ll do this in 3 steps. Building the animation used when hovering in, doing the same for hovering out, then applying it to all the… Read More »

Styling a responsive navigation bar – Web design tutorial

The Navbar element is very flexible when it comes to styling, and we’re going to focus on five of the biggest areas that give us that control: size, positioning, typography, backgrounds, and transitions. Let’s start with size. Our Navbar’s height is being determined by the content inside. That means if we select the Navbar itself,… Read More »

Flexbox layouts for beginners – Web design tutorial (using the Old UI)

Flexbox — which we’ll often refer to as “flex”, “flexible box layout”, or “magic” — is an extremely powerful layout tool which gives us precise control over elements in a box. This lesson is an intro to Flexbox, which is why we’ve named it Intro to Flexbox. Instead of going step-by-step right through the detailed… Read More »

Webflow CMS for beginners

The CMS is how we control and work with our dynamic content. In the Webflow CMS, the data structure is very straightforward, and we’ll build from the bottom up: At the very bottom, we have our content fields. These fields let us capture or input content – whether we’re doing this one-by-one, or by importing… Read More »

Parallax Movement on Scroll – Webflow interactions and animations tutorial

As we know, a parallax effect is one where objects which are closer appear to move faster relative to objects farther away. And, by extension of the same logic, objects which are farther away appear to move more slowly. In this project, we have a section containing several images. And our goal here is to… Read More »

The box model for beginners web design tutorial

This is a basic webpage. It’s plain, and we can obviously see it’s made of up a heading, some filler paragraphs, a few images, and some illegibly small buttons. The box model is the simple idea that each of these HTML elements is treated as a box — you can imagine a boundary on each… Read More »