Tag Archives: cms

Rich text – Web design tutorial

Rich Text is a one-stop shop for a ton of content: headings, paragraphs, links, lists, blockquotes, images, or videos. Often, we want super precise control over each and every element and class. But Rich Text Elements (or RTEs as they’re affectionately abbreviated) can chunk a lot of this into just one place. This is huge… Read More »

How to add a page loading animation — After Effects & Lottie in Webflow

With a fast enough connection, page load animations should look like this. That according to Grimur, was a single frame. The animation was made in After Effects, we exported it using the Bodymovin plug-in. Now we’re going to add it to our project so it shows up on the screen and disappears once the page… Read More »

Connecting a custom domain — Webflow tutorial

Custom domains, like bluethesaurus.com. Not only does a custom domain really set up a brand for professionalism, but it does something else: it makes publishing as simple as pressing a single button. (And then one more button.) There are a few ways to set up custom domains, but we’ve discovered that going through these five… Read More »

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 »

How to create content to boost your e-commerce traffic

How to create content to boost your e-commerce traffic When you create content for your audience, it needs to have a purpose. You can’t just create content for its own sake and expect it to have an impact. Find the right content 1-Start with your product All content should be linked in some way to… 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 »