Category: Tutorials

Add code into the head of the page: Where it says “correct text”, replace with the answer you want. This where you also edit the style of it. Then in the body where you want to input to occur. Add the “Code Embed” module under the “Advanced” section. Then add the following code: This is…

First, add the form block, then put in the Checkbox module. Then click the Checkbox Field, and then click on the gear icon next to the Checkbox. Then choose “Custom” in the style section. Then click the Checkbox itself. Go the style panel on the right side, and then edit the style however you want,…

Surprisingly, this isn’t intuitive in Illustrator. Usually, when you rotate, the box only change and the text stay in the same place. That’s fine for some projects, but generally we want the text to rotate too. Finally, Click on the handle on in the corner and then rotate with your mouse That’s it have a…

When adding animations to a dropdown element in WebFlow, you might encounter a ‘double click’ issue, where the element requires two clicks to function correctly. SOLUTION 1 In the Dropdown settings panel, locate the ‘Close Delay’ option. Set this value to match the duration of your animation. This adjustment should help resolve the issue. SOLUTION…

Auto Layouts Using Auto Layouts and frames in Figma significantly simplifies moving elements within a layout. For designs with distinct sections, like a newsletter, Auto Layouts can be particularly helpful. Here is a video tutorial for more useful ways to use Auto Layouts Shortcuts to Remember My most used Shortcuts are the following: K When…

Thanks to Timothy Ricks for the Code and Tutorial. However, I noticed the code he provided is different from what’s in the video. This is the correct code: His code on his website is different near the bottom, his old code has this: There is a second tutorial I was also successful in using to…

Finsweet to the rescue again! They create unique code to help supplement WebFlow where it lacks. What you need is the CMS Nest for WebFlow. CLICK HERE TO GET CODE AND TUTORIAL I found the written tutorial wasn’t enough, and this walkthrough they did was super helpful. WORD OF CAUTION: LOAD TIMES Unfortunately, Finsweet is…

You might have seen this tutorial on WebFlow titled “How to animate a video on scroll –  After Effects & Lottie in Webflow” At the end he says that you can check out the project on WebFlow University but alas, you can’t seem to find the project anywhere on that page. Googling it will lead…

Truthfully, you cannot do this natively with a single collection in WebFlow. You need a bit of code to make this work. Here’s two ways to do it: Number 1: Thanks to jasondark on the WebFlow forum for this solution. Insert the following code in the head of the page where the CMS collection lives.…

Click the Polygon tool on the toolbar. Then Double Click with your mouse. The following setting will pop up. Put 3 for “Number of Sides”, and 0% for “Start Inset” Then place on the document. Viola! You have a triangle. Alternate Way A second way to do a vector triangle, and other vector elements with…