Webflow
Webflow
  • 838
  • 125 274 162
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
Переглядів: 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 ...
Webflow Released Summer 2024
Переглядів 36 тис.2 місяці тому
Webflow Released Summer 2024
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

КОМЕНТАРІ

  • @britneyology1
    @britneyology1 21 хвилина тому

    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.

  • @ritik9799
    @ritik9799 12 годин тому

    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!

  • @itz_stickdriftdylan16
    @itz_stickdriftdylan16 12 годин тому

    i got 200k in revenue yet idk how to claim it

  • @oneofafyew
    @oneofafyew 21 годину тому

    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...

  • @sirpouncealot
    @sirpouncealot День тому

    perfect tutorial template doesn't exi-

  • @marcelo-ex8zl
    @marcelo-ex8zl 2 дні тому

    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)

  • @rockhead2700
    @rockhead2700 2 дні тому

    You lost me at Div block

  • @pcebro
    @pcebro 2 дні тому

    Just Awesome!

  • @simrangdecor
    @simrangdecor 2 дні тому

    How to create everything same. But instead of zooming in when clicked on an image, the main image changes. Please help

  • @NazariiStelmakh
    @NazariiStelmakh 3 дні тому

    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

    • @Webflow
      @Webflow 3 дні тому

      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!

  • @KingTuttanKamon
    @KingTuttanKamon 3 дні тому

    Background video disappears?

  • @Milupa5
    @Milupa5 4 дні тому

    Don't forget in Europe you need GDPR user consent on the site from this point on.

  • @caglayagmurr
    @caglayagmurr 4 дні тому

    0:52 i thought he told me to quit using after effects for a sec 😭💀

  • @vidsbymukul3691
    @vidsbymukul3691 4 дні тому

    It was helpuf. Thanks for this nice video.

  • @Joshuajulius-e3f
    @Joshuajulius-e3f 4 дні тому

    i can't find the file to the webflow course

    • @Webflow
      @Webflow 4 дні тому

      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.

  • @ritvarslauza4270
    @ritvarslauza4270 4 дні тому

    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.

  • @jyotishmanbora8490
    @jyotishmanbora8490 4 дні тому

    I am unable to find from where I can download the assets

  • @MrRezo69
    @MrRezo69 5 днів тому

    მაგარია !!! მარა ქართულად არ გაქვს, ვაკოს ვენაცვალე??? მაგარია ძამიკო, გამეხარდა ქართველის დანახვა ამდენ ფირმა მასწავლებელში... თან შენი 10 თავით ჯობია იმათსას...👍👍👍

  • @中島学-b4k
    @中島学-b4k 6 днів тому

    Miller Jason Brown Margaret Hall Sandra

  • @padme.india.essence
    @padme.india.essence 7 днів тому

    Lets talk about this white cis heteronormatives lack of accountability at 16min - 17min. I can smell the white boy privilage 😭

  • @MinuKhan-b7l
    @MinuKhan-b7l 7 днів тому

    hi there is no y and z axis in my webflow nd not applying opacity on othr images

  • @Josh-Yu
    @Josh-Yu 8 днів тому

    why did you use div blocks for every element? why not use the provided section and container elements?

    • @Josh-Yu
      @Josh-Yu 8 днів тому

      nvm just got the @53:03

    • @Josh-Yu
      @Josh-Yu 8 днів тому

      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?

  • @hatef1725
    @hatef1725 8 днів тому

    Is there an updated version of this?

  • @stinkleaf
    @stinkleaf 8 днів тому

    Wish they update this tutorial. Webflow UI not the same now.

  • @SUNTRUMP_TRX
    @SUNTRUMP_TRX 8 днів тому

    I lose space and the image gets sort of cut off when I add the navbar

  • @vidsbymukul3691
    @vidsbymukul3691 8 днів тому

    Accidentally, you have deleted the heading "Trusted by:" for logos container.

    • @Webflow
      @Webflow 8 днів тому

      Yes, thanks for catching that. 🙏

  • @sanwar.studio
    @sanwar.studio 9 днів тому

    love you broooo you save my mind to explode`

  • @divonci-world
    @divonci-world 9 днів тому

    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?

  • @AndreMatulionisdosSantos
    @AndreMatulionisdosSantos 9 днів тому

    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?

    • @Webflow
      @Webflow 8 днів тому

      This sounds like a good use case for Component slots. Video lesson coming soon.

  • @nbeing
    @nbeing 10 днів тому

    Excelent! Thanks

  • @radiusdesignstudio
    @radiusdesignstudio 11 днів тому

    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.

  • @WafChan-dt9yp
    @WafChan-dt9yp 12 днів тому

    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

  • @vidsbymukul3691
    @vidsbymukul3691 12 днів тому

    Amazing video indeed

  • @thedonger6299
    @thedonger6299 13 днів тому

    10 out of 10 honestly awesome work

  • @brianbluue
    @brianbluue 13 днів тому

    Thisss some good stuff

  • @varungauthankar
    @varungauthankar 13 днів тому

    Is this still upto date ??

  • @bisbireto303
    @bisbireto303 14 днів тому

    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.

  • @justinanorwath3847
    @justinanorwath3847 14 днів тому

    HAHA the empty cup :)

  • @BengieOyola
    @BengieOyola 14 днів тому

    Is the #webflow event still possible? I know that this one does not have it but I mean the ones in the other episodes

  • @faithfultennysonidama6904
    @faithfultennysonidama6904 14 днів тому

    that was really funny

  • @RogerWilcox-o1n
    @RogerWilcox-o1n 15 днів тому

    Very clear. Excellent. Thank you!!

  • @Daniyiol
    @Daniyiol 16 днів тому

    Any updates for the new UI?

  • @radiusdesignstudio
    @radiusdesignstudio 16 днів тому

    I think we just entered an alternate reality. One where McGuire's hair isn't always absolutely perfectly in place. 😉

  • @WilsonNnajidemma
    @WilsonNnajidemma 16 днів тому

    I don't understand how to download the assets

    • @Webflow
      @Webflow 16 днів тому

      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.

  • @laxmidevi921-z6i
    @laxmidevi921-z6i 16 днів тому

    Pineapple 🍕 Thanks for the training. Awesome how fast!

  • @WilsonNnajidemma
    @WilsonNnajidemma 16 днів тому

    How did u get the assets

    • @Webflow
      @Webflow 16 днів тому

      Hello, you can download the course assets from the main course page, under "Assets & links" → university.webflow.com/courses/webflow-101

  • @laxmidevi921-z6i
    @laxmidevi921-z6i 16 днів тому

    Thank you, I am tuning in from New Mexico.

  • @chavilahb3328
    @chavilahb3328 16 днів тому

    This tutorial does not work anymore.