![Webflow](/img/default-banner.jpg)
- 838
- 125 274 162
Webflow
United States
Приєднався 29 тра 2014
Design and develop for the web - visually. Build dynamic, responsive websites without writing code. Launch with a click, and enjoy the fastest, most reliable hosting on the web. Or export clean, semantic code to hand off to your devs.
Shared Libraries to use components & variables across a Workspace — Webflow tutorial
Shared Libraries in Webflow enable you to share and update components and variables across your entire Workspace, ensuring consistent brand alignment across all your sites. One Webflow site can serve as your design system - the central source of truth for your components and variables - which can then be shared across your Workspace. Whether you're managing one site or many, Shared Libraries keep everything in sync, streamlining your web design process.
00:00 - Shared Libraries in Webflow
00:47 - Share a library
01:40 - Install a library
02:31 - Push and accept updates to a library
03:39 - Convert to a site component
05:35 - Uninstall a library
06:01 - Unshare a library
Read about it → university.webflow.com/lesson/libraries?topics=layout-design
Check out the Marketplace Libraries → webflow.com/libraries
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
webflow
webflow
webflow
00:00 - Shared Libraries in Webflow
00:47 - Share a library
01:40 - Install a library
02:31 - Push and accept updates to a library
03:39 - Convert to a site component
05:35 - Uninstall a library
06:01 - Unshare a library
Read about it → university.webflow.com/lesson/libraries?topics=layout-design
Check out the Marketplace Libraries → webflow.com/libraries
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
webflow
webflow
webflow
Переглядів: 3 152
Відео
Website design and accessibility review - Webflow 101 (Part 9 of 10)
Переглядів 2,3 тис.Місяць тому
In this lesson, we review the design and accessibility of our site, and tune it to make sure it’s fully accessible - so all site visitors, including those who are Blind, low vision, visually disabled, Deaf, hard of hearing, or who have cognitive, learning, or mobility disabilities, can use our site. Learn more about how to make your site accessible and follow our Webflow Accessibility checklist...
Create your own custom interactions - Webflow 101 (Part 8 of 10)
Переглядів 2,2 тис.Місяць тому
In this lesson, we make our site more dynamic and engaging with interactions. With Webflow, you can create awesome interactions - here we’ll show you how to create a button hover interaction using states, and a page load interaction using the Webflow Interactions panel. Share your progress #Webflow101 on Twitter 00:00 - Introduction 00:23 - Button hover 05:16 - Page load interaction 13:17 - Rec...
Intro to responsive web design - Webflow 101 (Part 7 of 10)
Переглядів 2,5 тис.Місяць тому
Responsive design is what helps your website content reflow and reposition on all devices - desktop, tablet, mobile landscape, mobile portrait, and the Game Boy Color. Responsiveness is arguably one of the most critical parts of website design and, in this lesson, we’ll fine-tune our site design to reflow perfectly for devices of all sizes. 00:00 - Introduction 00:20 - Desktop 01:39 - Tablet 05...
Build a website footer - Webflow 101 (Part 6 of 10)
Переглядів 2,3 тис.Місяць тому
A footer is the bottom section of your website homepage where you typically add your company’s logo, social links, navigation links, and copyright information. In this lesson, we’ll optimize our site’s navigation - and social media promotion - by building a fully responsive footer section. 00:00 - Introduction 00:20 - Structure 00:42 - Content 02:58 - Styling 03:53 - Container (Make sure everyt...
Build a website form - Webflow 101 (Part 5 of 10)
Переглядів 3,1 тис.Місяць тому
Forms are one of the web’s most powerful and ubiquitous tools. With forms, site visitors can sign up for newsletters, register to an event, request demos, submit feedback, and so much more. In this lesson, we structure and style a form, configure the form’s success and error states, and create an engaging form call-to-action. 00:00 - Introduction 00:51 - Structure 01:31 - Content 03:41 - Form s...
Build a website cards section - Webflow 101 (Part 4 of 10)
Переглядів 4,2 тис.Місяць тому
Websites often include card layouts to visually display different product features or pricing plans. Here we’ll build a CSS grid-based card design to display a feature image, heading, and paragraph, then style those using selectors and classes. And, along the way, learn about the Webflow Style Manager which gives you total control over managing classes and tags on your site. 00:00 - Introductio...
Build a website logos section - Webflow 101 (Part 3 of 10)
Переглядів 3,2 тис.Місяць тому
With Cascading Style Sheets (CSS), you can use the CSS grid layout to create a responsive section that displays notable logos on your site. This section often displays logos of companies that trust your product. 00:00 - Introduction 00:16 - Structure 01:35 - Content 02:55 - Grid 03:37 - Recap 04:16 - CTA: Encouragement from Grímur Go take the full course at Webflow University: wfl.io/webflow101...
Build a website navbar - Webflow 101 (Part 2 of 10)
Переглядів 4,4 тис.Місяць тому
Let’s build a website navigation bar together. We’ll start with Webflow’s navbar element, edit the content, style the nav links, and create a call-to-action button with a combo class. 00:00 - Introduction 00:26 - Navbar 00:54 - Content 01:31 - Nav links 02:42 - Combo classes 05:57 - Recap 06:19 - CTA: Share your hero navbar progress using the #webflow101 on Twitter Go take the full course at We...
Build a website hero section - Webflow 101 (Part 1 of 10)
Переглядів 7 тис.Місяць тому
Now that you have a solid understanding of the box model, HTML, CSS, and the Webflow Designer, let’s start building! Here we’ll walk through a hero section build (typically the top section of a website homepage) and, along the way, we’ll explore flexbox, CSS styling, and how to add and style visual assets. 00:00 - Introduction 00:32 - Hello Sara 00:47 - Assets 01:00 - Content 01:44 - Flexbox 04...
Navigator Panel - Webflow tutorial
Переглядів 3,8 тис.Місяць тому
Webflow's Navigator gives you a visual way to interact with every element on a page, and understand how elements relate to each other on your page, your document's hierarchy. In this video, we'll show you how you can use the Navigator to: 1. Select an element 2. Understand hierarchical relationships between elements 3. Move elements Steps in the video: 00:00 - Introduction 00:39 - Selection 01:...
Transforming the world of HR with a more powerful website experience | Webflow Enterprise - Lattice
Переглядів 2,7 тис.Місяць тому
With an ambitious vision of evolving from a talent management tool to an end-to-end HR platform, Lattice needed to transform their website into a revenue-driving engine that empowers HR professionals around the world. With Webflow, they do just that - while improving organic traffic, increasing conversion rates, upleveling their content, and more. Learn how Webflow empowers Lattice’s marketing ...
Speed Build Challenge 2024 is back
Переглядів 2,7 тис.2 місяці тому
Speed Build Challenge 2024 is back
Convert all your images to WebP in the Webflow Designer
Переглядів 6 тис.3 місяці тому
Convert all your images to WebP in the Webflow Designer
Using visual development for professional, scalable sites | Webflow customer story - Flow Ninja
Переглядів 2,4 тис.3 місяці тому
Using visual development for professional, scalable sites | Webflow customer story - Flow Ninja
CSS display settings (flex, grid, block, none, inline-grid, inline-flex) - Webflow tutorial
Переглядів 7 тис.3 місяці тому
CSS display settings (flex, grid, block, none, inline-grid, inline-flex) - Webflow tutorial
Maximize your site's global reach with Webflow Localization
Переглядів 3,9 тис.4 місяці тому
Maximize your site's global reach with Webflow Localization
Activate your free preview of Webflow Localization
Переглядів 4,5 тис.4 місяці тому
Activate your free preview of Webflow Localization
Build CSS grid layouts in Webflow - Web design tutorial
Переглядів 20 тис.4 місяці тому
Build CSS grid layouts in Webflow - Web design tutorial
Control who can access which sites in your Webflow Workspace, site-specific access
Переглядів 4,2 тис.5 місяців тому
Control who can access which sites in your Webflow Workspace, site-specific access
Breaking down Webflow's Homepage Design with Off+Brand
Переглядів 9 тис.5 місяців тому
Breaking down Webflow's Homepage Design with Off Brand
Bridging the design-development gap | Webflow agency story - Paper Tiger
Переглядів 3,1 тис.6 місяців тому
Bridging the design-development gap | Webflow agency story - Paper Tiger
Think like a developer | Webflow agency story - Joseph Berry
Переглядів 3,3 тис.6 місяців тому
Think like a developer | Webflow agency story - Joseph Berry
One platform to streamline an agency | Webflow agency story - MakeBuild
Переглядів 1,3 тис.6 місяців тому
One platform to streamline an agency | Webflow agency story - MakeBuild
Flexbox layouts in Webflow - Web design tutorial
Переглядів 50 тис.6 місяців тому
Flexbox layouts in Webflow - Web design tutorial
Introducing the Figma to Webflow App: seamlessly sync design systems
Переглядів 110 тис.6 місяців тому
Introducing the Figma to Webflow App: seamlessly sync design systems
Transforming their site to accelerate upmarket | Webflow Enterprise Customer Story - Jasper
Переглядів 2,8 тис.6 місяців тому
Transforming their site to accelerate upmarket | Webflow Enterprise Customer Story - Jasper
Manage site content with ease: CMS and edit mode in Webflow
Переглядів 4,2 тис.7 місяців тому
Manage site content with ease: CMS and edit mode in Webflow
Update content safely and effortlessly with edit mode in Webflow
Переглядів 3 тис.7 місяців тому
Update content safely and effortlessly with edit mode in Webflow
wow, this is boring me to death. As I've gone through the tutorials, the guy kept me engaged. I can't even finish this video. Please hire people to make the announcements.
Nothing but love and admiration for everyone on the Webflow team. The product is so well thought out and it's awesome. Ya'll are amazing! Hope my complements reach the team. Thanks!
i got 200k in revenue yet idk how to claim it
Once the collection and multi references have been added how does a specific reference page look like and how is that structured - in other words, if you were to click on one of the authors, I imagine it should link to a page with all blog posts by that author? But how is this set up. Please help...
perfect tutorial template doesn't exi-
I tried to install the course packages twice, and both times the csv file came completely wrong. The rows and columns were not separated correctly. So, I went into VS code and saw that the problem was that some "," and ";" were swapped, and so I fixed it. However, it seems that the links to the images are wrong, and when I try to put them in the browser an error message appears saying that access has been denied. Has anyone else had this kind of problem? (I used google translate, sorry for grammatical errors)
You lost me at Div block
Just Awesome!
How to create everything same. But instead of zooming in when clicked on an image, the main image changes. Please help
Very cool and useful functionality! I have a few websites with the same styling and components. let me know please how can I grab them all and merge/link to one parent component right now? or even more, how can I move/duplicate my components from the current website to the separate library "home" website and not destroy the connection (new library website - parent components, current website - children components)? Ty in advance
Hi! You could combine each site's components by sharing each as their own library and then installing all of them in one site. Then, in that single site, you can convert them all into site components and make your final changes there. Once you're done with that, you can share that site's library with the rest of your Workspace. Hope that helps!
Background video disappears?
Don't forget in Europe you need GDPR user consent on the site from this point on.
0:52 i thought he told me to quit using after effects for a sec 😭💀
It was helpuf. Thanks for this nice video.
i can't find the file to the webflow course
Hello, you can find the link to download the assets on the course page → university.webflow.com/courses/webflow-101. When you click on the link "Download the course assets", it should automatically download.
This is a quite poorly done feature, as much as I love Webflow. An editor should be able to edit these texts without the designer mode, otherwise it's a nightmare or we have to rely on machine translations.
I am unable to find from where I can download the assets
Found it
@@jyotishmanbora8490where did you find it?
მაგარია !!! მარა ქართულად არ გაქვს, ვაკოს ვენაცვალე??? მაგარია ძამიკო, გამეხარდა ქართველის დანახვა ამდენ ფირმა მასწავლებელში... თან შენი 10 თავით ჯობია იმათსას...👍👍👍
Miller Jason Brown Margaret Hall Sandra
Lets talk about this white cis heteronormatives lack of accountability at 16min - 17min. I can smell the white boy privilage 😭
hi there is no y and z axis in my webflow nd not applying opacity on othr images
why did you use div blocks for every element? why not use the provided section and container elements?
nvm just got the @53:03
wait i just tried doing it in webflow. this information seems to be outdated. why did they update webflow to allow for nesting sections now?
Is there an updated version of this?
Wish they update this tutorial. Webflow UI not the same now.
I lose space and the image gets sort of cut off when I add the navbar
Accidentally, you have deleted the heading "Trusted by:" for logos container.
Yes, thanks for catching that. 🙏
love you broooo you save my mind to explode`
What about more than one nested item, it says lists so I was thinking more than one or its just click bait? Can someone help please or no one responds here?
Can we create component props? What I mean is this video context: not every Card will have a Button, sometimes they will have a Table, or a Image. Can we make Card receive "children" as a prop?
This sounds like a good use case for Component slots. Video lesson coming soon.
Excelent! Thanks
How do you configure a form field so that the placeholder text breaks into two lines? I have a contact form similar to the example, where the last field is a text field for users to give more detailed information. The placeholder sentence becomes too long when viewing the page in mobile portrait, and gets broken off. I'd like the field to change to have a vertical scroll instead of a never ending horizontal one, so this placeholder will show up on two lines.
I love how it's well explained <3 And that look in his eyes is like "focus!", I usually skip videos and only watch what I need but he made me watch the whole video xDDDD
Amazing video indeed
10 out of 10 honestly awesome work
Thisss some good stuff
Is this still upto date ??
Hello everyone! Does anyone know why emails in Gmail are not showing the submitted content of a form? Just the very first email showed the content, but subsequent emails show a dotted line instead.
HAHA the empty cup :)
Is the #webflow event still possible? I know that this one does not have it but I mean the ones in the other episodes
that was really funny
Very clear. Excellent. Thank you!!
Any updates for the new UI?
I think we just entered an alternate reality. One where McGuire's hair isn't always absolutely perfectly in place. 😉
I don't understand how to download the assets
Hello, you can find the link to download the assets on the course page → university.webflow.com/courses/webflow-101. When you click on the link "Download the course assets", it should automatically download. If it doesn't download, feel free to reach out to our support team (support@webflow.com) and they can provide the files for you.
Pineapple 🍕 Thanks for the training. Awesome how fast!
How did u get the assets
Hello, you can download the course assets from the main course page, under "Assets & links" → university.webflow.com/courses/webflow-101
Thank you, I am tuning in from New Mexico.
This tutorial does not work anymore.