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: 136885 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: 27837 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: 41052 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: 47864 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: 570789 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: 16078 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: 47514 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: 25578 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: 32478 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: 14413 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: 12723 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: 54206 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: 36957 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: 24885 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: 45756 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: 14877 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: 15773 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: 23500 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: 7505 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: 12793 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: 30498 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: 9169 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: 33109 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: 9125 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: 6622 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: 39660 Webflow
Build a custom preloader - Webflow interactions & animations tutorial
 
03:38
Learn how to create a preloader using Webflow interactions. In this lesson: (1) 0:36 — Designing the preloader (2) 1:40 — Setting the initial state of the preloader (3) 2:38 — Hiding the preloader once the page loads Read more at: https://wfl.io/2KmoYsG ------- Get started with Webflow: https://wfl.io/2KmoNO2 https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 6664 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: 11235 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: 16989 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: 10946 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: 26027 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: 11007 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: 17506 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: 42000 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: 36702 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: 96260 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: 10987 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: 8753 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: 8983 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: 25470 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: 16917 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: 38825 Webflow
Element hierarchy, nesting, and style cascading - Web design tutorial
 
03:58
To succeed in web design, and with Webflow, it's vital that you understand how elements hierarchy affects styling and sizing. In this video, we’ll cover element hierarchy in three ways: 1. How objects nest inside one another (e.g., parents, children, siblings) 2. How text styling is passed down from parent to child 3. How the sizes of parent elements and child elements affect one another ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflow http://facebook.com/webflow
Views: 45399 Webflow
Show & Hide Navbar on Scroll - Webflow interactions and animations tutorial
 
02:34
In this example, we'll add an interaction to our navigation bar to animate out when scrolling down the page—and animate back in when scrolling up again. This lesson is covered in two parts creating triggers and animations for the navbar leaving when scrolling down and entering when scrolling up. ---------- 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: 28736 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: 12616 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: 20525 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: 23364 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: 17471 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: 8173 Webflow
Copying and pasting between projects — Webflow tutorial
 
03:12
Copying and pasting between projects lets you reuse elements, layouts, styles, interactions, and other content, saving you time and helping maintain consistency across sites. Link to Lesson: https://wfl.io/2qFVMlt ------- Get started with Webflow: https://wfl.io/2qBnek9 https://webflow.com https://twitter.com/webflow https://facebook.com/webflow
Views: 10177 Webflow