Home
Videos uploaded by user “Webflow”
The Designer - Webflow UI tutorial
 
02:55
The Designer is the heart of Webflow's visual web design platform, the canvas on which you'll design and develop beautiful, responsive websites. In this video, we'll take you on a quick tour of the Designer's key features and sections, so you'll know the lay of the land before we dive into details. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 144168 Webflow
Positioning for beginners (relative, absolute, fixed) - Webflow CSS tutorial
 
01:49
Using the position property is one of many ways you can change the layout and positioning of an element. This property is unique in that it allows elements to be positioned relative to themselves (relative), relative to a parent element (absolute), or relative to the viewport, even when the page is scrolled (fixed). The flexibility of the position property makes it possible to create very unique web layouts. You can even specify the stacking order of positioned elements that overlap other elements using the z-index property. Here we’ll cover the values you can set for the position property: 1. Auto 2. Relative 3. Absolute 4. Fixed ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 29371 Webflow
Dynamic content for beginners - Webflow CMS tutorial
 
01:35
In this video, we'll explain the differences between static and dynamic content, and learn why the latter is so useful for some of the most popular content types on the web, from blog posts to product pages. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 50208 Webflow
Connecting a custom domain — Webflow tutorial
 
02:31
Learn how to point your custom domain to Webflow and connect it to your Webflow site in five steps: 1) 0:21 adding a custom domain 2) 0:35 enabling the SSL (SSL is now enabled by default) 3) 0:42 updating the DNS 4) 1:55 setting the default URL 5) 2:02 verifying the domain ---------- Get started with Webflow: https://wfl.io/2Ho3ABT https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 17762 Webflow
Display settings (block, inline-block, inline, and flex) - Web design tutorial
 
02:55
In Webflow (and web design generally), the display setting you set an element determines its behavior in a layout. Generally speaking, elements either stack on top of each other (vertically) or lay out side by side (horizontally), depending on what display setting is used. The beauty is that you can change the display of any element. In this video, we’ll be covering the five display settings available: 1. Block 2. Inline-block 3. Inline 4. Flex 5. None ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 27740 Webflow
Webflow: Design websites. Don’t code them.
 
01:34
Webflow empowers designers to bring their visions to life—without writing a single line of code. Or relying on developers. Plus, with the all-new, all-visual Webflow CMS, designers can build custom, dynamic websites and let their clients add and edit content with an intuitive on-page editor. Get started for free at webflow.com
Views: 48322 Webflow
To our friends and colleagues using Adobe Muse
 
03:55
On March 26, 2018, Adobe announced that it was ceasing development on Adobe Muse, effective March 26, 2018. To our friends and colleagues using Adobe Muse: we invite you to explore what we've been doing with Webflow. ---------- Get started with Webflow: https://university.webflow.com/courses/webflow-101-crash-course https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 42108 Webflow
CSS grid layouts in Webflow — Visual layout tutorial
 
02:43
Get to know grid in Webflow starting with the basics: adding a grid, adding elements to a grid, moving things in a grid, spanning multiple cells, and editing a grid. Watch all videos in the "Building CSS grid layouts in Webflow" playlist: https://wfl.io/2pWy4R3 Learn more about Grid on Webflow university: https://wfl.io/2P3CeVp ------- Get started with Webflow: https://wfl.io/2pSowqd https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 16943 Webflow
Responsive website layout for beginners - Webflow CSS tutorial
 
02:28
Webflow's Style Panel gives you several layout methods to help you position content in your project. In many cases, multiple layout methods could be used to achieve the same effect, but some are better than others, in terms of reliability or cross-browser performance. In this video, we'll define the various layout tools you have to work with, including: 1. Block 2. Inline block 3. Inline 4. Flex 5. Float 6. Positioning 7. Overflow 8. Transform 9. Padding and margin We also take a deeper dive on the first 4 in our video on Display Settings: https://www.youtube.com/watch?v=02EDOT5xYQk ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 34205 Webflow
Flexbox vs. CSS grid — Webflow layout tutorial
 
04:01
When should you use flexbox? When should you use CSS grid? In this video, we lay out the similarities and differences between the tools so that you know what to use and when. Watch all videos in the "Building CSS grid layouts in Webflow" playlist: https://wfl.io/2pWy4R3 Learn more about Grid on Webflow university: https://wfl.io/2P3CeVp ------- Get started with Webflow: https://wfl.io/2pUPcGJ https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 14144 Webflow
Parallax Movement on Scroll - Webflow interactions and animations tutorial
 
03:11
In this lesson, we'll give the appearance of depth to multiple elements in a section by using parallax motion. Elements in the section appear to be moving at varying velocities, simulating a realistic feeling of depth, as elements which appear closer also appear to scroll more quickly. ---------- Get started with Webflow: https://university.webflow.com/courses/webflow-101-crash-course http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 56666 Webflow
Flexbox layouts for beginners - Web design tutorial
 
02:28
Flexbox (also know as flex or flexible box layout) is a very powerful layout tool that gives you precise alignment and stacking control for all the contents inside an element. It solves many layout problems that designers have been struggling with for a very long time. Here we’ll be covering some of the important concepts you’ll need to understand to master flexbox: Enabling flex on an element Flex layout settings Flex item settings We created a flexbox game to help you learn flexbox even faster. https://www.flexboxgame.com/ Also check out our tutorials for centering elements with flexbox and building equal-height layouts with flexbox. https://help.webflow.com/article/centering-with-flexbox https://help.webflow.com/article/equal-heights-with-flexbox ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 38672 Webflow
Introducing Webflow CMS
 
01:29
Meet the world’s first visual content management system (CMS). Build custom, dynamic websites without writing a line of code. Try it for free at https://webflow.com/cms.
Views: 644511 Webflow
Width and height units (px, %, vh, vw) - Webflow CSS tutorial
 
03:59
In web design, you can declare an element's width and/or height using either fixed values or relative values. This video covers the most commonly used dimensions (outside of ems): 1. Auto-sizing (auto) 2. Pixels (px) 3. Percentage (%) 4. Viewport height (vh) 5. Viewport width (vw) 6. Minimum (min) and maximum (max) You can adjust an element's width and height in the Styles Panel, under the Layout section. We’ll be covering how each of these units work in the context of setting element dimensions. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 26681 Webflow
Using Fetch as Google - SEO tutorial
 
02:38
Fetch as Google is a Google Search Console feature that lets you simulate how a published web page looks to Google. It also lets you manually submit pages to Google’s search index, so you can quickly and efficiently let Google know about changes to your site. In this video, we'll show you to how Fetch as Google on your Webflow websites. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 15724 Webflow
Overflow (visible, hidden, scroll, and auto) - Webflow CSS tutorial
 
01:50
Sometimes, you might have a lot of content in a parent element that has a limited width or height. By default, the content will remain visible outside of the parent element’s bounds. With the overflow property, you can decide how to handle that overflowing content. In this video, we’ll cover how to ly the 4 overflow properties of: 1. Visible: the default 2. Hidden: clip the content 3. Scroll: always display scrollbars 4. Auto: displays scrollbars if content overflows ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 25201 Webflow
Responsive web design for beginners - Webflow tutorial
 
02:22
When you visit a site on your mobile device, you may see a desktop version of the site crammed into a smaller screen, forcing you to zoom and pan to see any content. Or you might land on a watered-down "mobile version" that lacks the content and experience that makes the desktop version superior. Hopefully, though, you see a responsive website — a design that reflows and repositions content based on the width of the browser. There are 4 different aspects to responsive design we’ll be covering here: 1. Reflowing content 2. Fixed sizing 3. Relative sizing 4. Breakpoints (media queries) ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 32263 Webflow
Layering elements with z-index - Web design tutorial
 
01:50
You can alter an element's z-index to change its position along the z-axis (an imaginary dimension that extends into and out of your computer screen, creating the illusion of depth). Increasing the z-index on an element allows it to "sit on top of" elements with a lower z-index, and lowering the z-index can make an element sit beneath elements with a higher z-index. But z-index only works with elements that have relative, absolute, or fixed positioning. In this video, we'll show you how to use z-index on relative, absolute, and fixed position elements in Webflow. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 16910 Webflow
MailChimp form integration — Webflow tutorial
 
01:30
In this tutorial, we'll connect a Webflow forms element to a MailChimp subscription list in two steps: (1) — 0:17 — grabbing the action URL from MailChimp (2) — 0:49 — configuring the Webflow forms element. This allows you to send signup form submissions to MailChimp. Link to Lesson: https://wfl.io/2IlkAJl ------- Get started with Webflow: https://wfl.io/2KHCPqO https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 8055 Webflow
The dos and don'ts of image resolution - Webflow tutorial
 
03:29
Image resolution simply refers to the level of detail captured in an image. Sounds fairly simple, but in practice, managing image resolution can get pretty confusing. That's why, in this video, we'll define image resolution, sizing images for your websites, and some best practices for working with both inline and background images — including how to properly balance image resolution with filesize. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 13574 Webflow
Using columns for web layout - Webflow tutorial
 
02:22
Elements can pass typographic style information down to their children. You can set text styles on parent elements, which will cascade down, and you can override these styles on their child elements. It’s common to use this technique to set global font styles on the Body tag, to align text and other elements inside sections, and to override default link block styles. In this video, we'll show you three examples of how text style cascading works: 1. Style cascading from the body tag 2. Style cascading from the section element 3. Style cascading from the link block ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 34812 Webflow
Webflow CMS for beginners
 
02:03
A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly. The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code. In this video, we'll introduce some basic concepts behind the CMS, including: 1. Structuring content 2. Referencing content 3. Editing content ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 48181 Webflow
How search works: paid vs. organic search traffic - SEO tutorial
 
01:35
For the vast majority of search engines, search engine results pages feature two different forms of results: 1. Paid search results, or ads 2. Organic search results, which are ranked by relevance and, to an extent, reputability In this video, we'll go into more detail on the difference, and how the two types can impact your marketing efforts. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 9594 Webflow
Custom accordion - Webflow interactions & animations tutorial
 
05:33
In this tutorial, we'll build a custom FAQ with collapsable containers for each question and answer. See additional content for adding an interactive dropdown arrow to this accordion: https://youtu.be/CABPvMNE1Kc Clone the following project to reuse this accordion in your own projects: https://webflow.com/website/custom-accordion-example ---------- Get started with Webflow: https://wfl.io/2MTwvO2 https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 10033 Webflow
Using the Editor for clients and collaborators - Webflow tutorial
 
02:23
The Webflow Editor makes editing the website and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, whereas the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 18045 Webflow
Building a web form - Web design tutorial
 
04:56
Forms are one of the most powerful tools any website can feature, whether you're gathering email newsletter signups or work inquiries from potential clients. In this video, we'll introduce you to the basics of using forms in Webflow, including: 1. Adding a form to your site 2. Understanding the anatomy of a form 3. Configuring form elements 4. Customizing success and error messages 5. Managing form submissions ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 42210 Webflow
The FR unit — Fractional units in CSS grid
 
02:36
This video features a brief overview of the fractions unit in CSS: a powerful input that automatically calculates layout divisions while taking into account gaps inside a grid. Watch all videos in the "Building CSS grid layouts in Webflow" playlist: https://wfl.io/2pWy4R3 Learn more about Grid on Webflow university: https://wfl.io/2P3CeVp ------- Get started with Webflow: https://wfl.io/2OZSmas https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 7341 Webflow
Using sections in web design - Webflow tutorial
 
04:15
Learn how and why to use Webflow's section, a layout element with a width of 100%, so it extends across the full width of the browser window. Sections play an important role in the structure and layout of a page. With sections, you can create separate blocks of content, dividing the page into meaningful segments. In this video, we'll cover: 1. Adding the section element to your design 2. Controlling the height of section elements ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 44380 Webflow
Image file types (JPG, PNG, SVG, GIF)  - Web design tutorial
 
02:23
Understanding your image file options — and when and how to use each — can be key to building great websites. That's why this video focuses on explaining the bitmap, GIF, PNG, JPEG, and SVG image types, and the best use cases for each. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 11821 Webflow
Reveal elements on hover — Webflow interactions and animations tutorial
 
03:39
Learn how to reveal child elements when you hover over the parent using a hover interaction. ---------- Get started with Webflow: https://wfl.io/2KPhrjD https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 12302 Webflow
Designing with Collection Lists - Webflow CMS tutorial
 
03:34
Webflow's Collection Lists are one of the two ways to add and design dynamic content from a Collection (the other being Collection Pages). You can add Collection Lists to any type of page. In this video, we'll walk through: 1. Adding a Collection List to your site 2. Adding and connecting elements to Collection fields 3. Collection List settings ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 27661 Webflow
Equal-height layouts with flexbox - Web design tutorial
 
01:48
When you're using the columns element in Webflow, it’s nearly impossible for all the columns to have equal heights, especially when each column has different content. You could set a fixed pixel height, but this can cause reflowing issues. In this video, we’ll show you how to create equal-height columnar layouts with flexbox. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 11397 Webflow
Div blocks - Web design tutorial
 
03:38
The div block is the most basic and versatile element used in website design and development. To a certain extent, a div block can be whatever you want it to be. For example, buttons, containers, and sections are all just div blocks with extra properties. A div block can also be used to create space or dividers, but the most common use for a div block is to group other elements together. In this video, we'll show you how to: 1. Add 2. Style 3. Nest 4. Duplicate Div blocks, plus show you how to use them as spacers (though we don't recommend it). ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 40927 Webflow
Scroll Progress Indicator - Webflow interactions and animations tutorial
 
02:50
We'll create a horizontal progress indicator which scales as we scroll down the page. This lesson starts by covering the design of the div block used as the indicator, then moves into creating the scroll trigger, configuring the animation, and finally, adjusting the transform origin. ---------- Get started with Webflow: https://university.webflow.com/courses/webflow-101-crash-course http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 18551 Webflow
Absolute position - Webflow CSS tutorial
 
01:44
The position property allows you to move elements relative to: their current place in the document (relative), a parent element (absolute), or the viewport (fixed). Here we’ll be covering absolute position. Absolute-positioned elements are completely removed from the document flow, so they no long touch or push other elements around them. They're pinned to the first parent element that has position relative, absolute, or fixed enabled. In this video, we'll show you how to: 1. Enable absolute position 2. Understand positioning values 3. Work with Z-index And then bring it all together with an example. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 9330 Webflow
3D web design for beginners - Webflow CSS tutorial
 
02:26
With the vast majority of the web existing squarely in two dimensions, expanding your design practice into 3D can take some time to wrap your head around. In this video, we'll explain some of the basic concepts behind working with 3D on the web. We'll expand on this info in our videos on 2D & 3D transforms and 3D perspective. 3D transforms (move, rotate, scale, and skew) - Webflow CSS tutorial: https://www.youtube.com/watch?v=bPF156ZvgAM Enabling 3D perspective - Webflow CSS tutorial: https://www.youtube.com/watch?v=q03XgpcIaso ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 38700 Webflow
Lightbox for images and videos - Web design tutorial
 
03:45
Webflow's lightbox element lets you display images (with or without captions) or videos inside an immersive, full-screen slider view. The lightbox also works well on all devices, making it easy to display your media on desktop, tablet, and mobile screens. In this video, we’ll cover: 1. Adding a lightbox to your website 2. Anatomy of a lightbox: the lightbox link and thumbnails 3. Lightbox settings: adding media and linking multiple lightboxes together ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 27233 Webflow
Floats and clears - Webflow CSS tutorial
 
01:53
Floats are great for wring text around an element, such as an image in a magazine layout. Floating multiple elements arrays them side by side horizontally. Clearing an element ensures it won't wrap around a floating element. In this video, we'll show you to use floats and clears in Webflow — and suggest a better method to achieve the same results: flexbox. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 9047 Webflow
Rotational parallax on hover - Webflow interactions and animations tutorial
 
04:14
Learn how to use rotational parallax to give objects the appearance of movement in 3D space — all controlled by the position of your mouse. Open this lesson in Webflow: https://wfl.io/2Lwv4Y1 Link to this lesson on Webflow University: https://wfl.io/2JFYy1J ------- Webflow is a professional web design tool and hosting solution which lets you build dynamic, interactive, responsive websites visually without having to code. Get started with Webflow: https://wfl.io/2GRrru4 https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 11575 Webflow
Quick effects — Webflow interactions and animations tutorial
 
02:51
Check out quick effects! With quick effects, you can add more than 20 prebuilt entrance, exit, and emphasis animations to elements on click, hover, and scroll into view to introduce basic motion and interactions to your project. ---------- Get started with Webflow: https://wfl.io/2ry35vW https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 13400 Webflow
Designing Collection pages - Webflow CMS tutorial
 
03:04
Whenver you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will ly to every Collection item's page. That means Collection Pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages. In this video, we'll show you how to: 1. Create a Collection Page 2. Add and connect content 3. Preview Collection Pages 4. Link to a Collection Page Plus, we'll show you the settings you can adjust for Collection Pages. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 24854 Webflow
Hover, pressed, and focused states - Webflow CSS tutorial
 
02:48
To add some interactivity to your elements in Webflow, you can change the way they look and behave using states. As you're styling an element, clicking the States menu lets you toggle between the various states, like Hover and Pressed, you can access and style. In this video, we'll explain the 4 states you can style for any element: 1. None 2. Hover 3. Pressed 4. Focused Then show you how to style those states to indicate interactivity. Then we'll dig into lying transitions to smooth out the change from one state to another, and finally, discuss the "current" state, which is a handy indicator for navigational links. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 21997 Webflow
Reveal elements on scroll — Webflow interactions and animations tutorial
 
03:59
In this example, we'll cover how to create a trigger which fades and moves elements in as we scroll down the page. In addition to configuring the trigger and animation, we'll also cover how to apply the same animation to other elements. (1) 0:37 — Creating the trigger (2) 1:00 — Creating the animation (3) 3:15 — Apply that animation to the other elements ---------- Get started with Webflow: https://wfl.io/2rJwSls https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 18500 Webflow
Reusing interactions - Webflow interactions & animations tutorial
 
02:59
You can choose to trigger interactions on all elements with the same class and reuse the same animation by applying it to classes or the trigger element. Read more at: https://wfl.io/2lvKiy1 ------- Get started with Webflow: https://wfl.io/2K32tcI https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 5185 Webflow
HTML and CSS for beginners - Webflow web design tutorial
 
03:38
If you're new to web design, it's vital that you understand the differences between HTML and CSS and how they work together to present web content (HTML) and control how it's displayed in browsers (CSS). In this video, you'll gain that understanding, plus learn to use native browser tools to inspect and make changes to websites, and learn how Webflow can help you produce professional websites without mastering code. ---------- Get started with Webflow: https://university.webflow.com/courses/webflow-101-crash-course http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 101276 Webflow
Collections - Webflow CMS tutorial
 
02:01
A Collection is like a database—it's where content can be stored and dynamically referenced throughout a project. Different Collections signify different content types, and an individual piece of content within a Collection is called a Collection item. In this document, we’ll cover: 1. Creating Collections 2. Adding Collection fields 3. Creating Collection items 4. Editing Collections ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 26092 Webflow
Typography units (em, rem, px, %) for beginners - Webflow CSS tutorial
 
02:43
When you set values for typographic properties such as font size or line height, the default unit is pixels (px). But pixels are far from the only option, and each alternative unit uniquely impacts how your typographic sizing choices behave. In this video, we'll explore all the typographic units available in Webflow: 1. Pixels 2. Ems 3. Rems 4. Percentages 5. Viewport width (vw) ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 8617 Webflow
Multi-Reference field - Webflow CMS tutorial
 
02:32
A multi-reference field is just like a reference field, except it allows you to reference more than one item. This is great for tagging systems, related content, and other instances where you want to connect one item to many others. In this video, we'll show you how to use this powerful field in your CMS-driven websites. ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 10832 Webflow
Using symbols for faster web design - Webflow tutorial
 
03:48
Symbols turn any element and its children into a reusable component. Any changes made to an instance of a symbol will update all instances of that symbol across your project. This is especially useful for recurring elements like navbars, footers, or signup sections—instead of updating every instance of these elements individually, a symbol allows you to make one change that will affect all instances at once. This article covers three aspects of Symbols: 1. Creating a Symbol 2. Reusing a Symbol 3. Unlinking a Symbol ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 26354 Webflow
Using classes to re-use styles - Webflow CSS tutorial
 
02:47
Making manual style changes to each and every element is tedious and time-consuming. And entering repetitive values for hours and then trying to update those values one by one can be frustrating. Classes save styling information that you can ly to as many elements as you want throughout your project. Here we’ll cover: 1. Creating classes 2. Applying classes 3. Editing classes 4. Creating class variants by duplicating classes or by adding combo classes ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 18459 Webflow