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/webflowapp http://facebook.com/webflow
Views: 108315 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: 45278 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/webflowapp https://facebook.com/webflow
Views: 35764 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/webflowapp http://facebook.com/webflow
Views: 21448 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/webflowapp http://facebook.com/webflow
Views: 11725 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: 364414 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/webflowapp http://facebook.com/webflow
Views: 44618 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 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 Visit Webflow.com: https://wfl.io/2Huj3R3 Webflow on Twitter: https://wfl.io/2qCxb0L Webflow on Facebook: https://wfl.io/2HCv6Js
Views: 10200 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/webflowapp http://facebook.com/webflow
Views: 37439 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/webflowapp http://facebook.com/webflow
Views: 25979 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/webflowapp http://facebook.com/webflow
Views: 18308 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/webflowapp http://facebook.com/webflow
Views: 18275 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/webflowapp http://facebook.com/webflow
Views: 9676 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/webflowapp http://facebook.com/webflow
Views: 11424 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/webflowapp http://facebook.com/webflow
Views: 7057 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/webflowapp http://facebook.com/webflow
Views: 35289 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 apply 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/webflowapp http://facebook.com/webflow
Views: 16963 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/webflowapp http://facebook.com/webflow
Views: 29921 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/webflowapp http://facebook.com/webflow
Views: 21213 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/webflowapp http://facebook.com/webflow
Views: 79669 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/webflowapp http://facebook.com/webflow
Views: 8784 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/webflowapp http://facebook.com/webflow
Views: 32525 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. Read more about Grid in Webflow: https://wfl.io/2pWyGpW ------- Get started with Webflow: https://wfl.io/2pUPcGJ Visit Webflow.com: https://wfl.io/2pVVB4o Webflow on Twitter: https://wfl.io/2q2A36B Webflow on Facebook: https://wfl.io/2P3McpK
Views: 4887 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 Visit Webflow.com: https://wfl.io/2HWxzlf Webflow on Twitter: https://wfl.io/2HXKp2V Webflow on Facebook: https://wfl.io/2KITzy5
Views: 5271 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/webflowapp http://facebook.com/webflow
Views: 13332 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/webflowapp http://facebook.com/webflow
Views: 26246 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. Read more about Grid in Webflow: https://wfl.io/2P3CeVp ------- Get started with Webflow: https://wfl.io/2pSowqd Visit Webflow.com: https://wfl.io/2ylOvLl Webflow on Twitter: https://wfl.io/2pUk22c Webflow on Facebook: https://wfl.io/2P5HR5m
Views: 3923 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/webflowapp http://facebook.com/webflow
Views: 27970 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/webflowapp http://facebook.com/webflow
Views: 30725 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 apply 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/webflowapp http://facebook.com/webflow
Views: 17756 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/webflowapp http://facebook.com/webflow
Views: 13666 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/webflowapp http://facebook.com/webflow
Views: 36239 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 Visit Webflow.com: https://wfl.io/2MVkffO Webflow on Twitter: https://wfl.io/2K9PdTG Webflow on Facebook: https://wfl.io/2trYpJ1
Views: 5065 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/webflowapp http://facebook.com/webflow
Views: 19395 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/webflowapp http://facebook.com/webflow
Views: 30332 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 Visit Webflow.com: https://wfl.io/2I9ZONO Webflow on Twitter: https://wfl.io/2jKEO18 Webflow on Facebook: https://wfl.io/2rygqUO
Views: 6247 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/webflowapp http://facebook.com/webflow
Views: 8882 Webflow
Triggers & Animations - Webflow interactions and animations tutorial
 
04:31
How does one create an interaction? There are two pieces: triggers and animations. A trigger—like a click or a hover or a scroll—is what starts or continues an animation. In this lesson, we go into the two types of triggers, as well as an overview of the animation timeline. ---------- Get started with Webflow: https://university.webflow.com/courses/webflow-101-crash-course http://webflow.com http://twitter.com/webflowapp http://facebook.com/webflow
Views: 27593 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/webflowapp http://facebook.com/webflow
Views: 23519 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/webflowapp http://facebook.com/webflow
Views: 7280 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 Visit Webflow.com: https://wfl.io/2qBne3D Webflow on Twitter: https://wfl.io/2Hr64iQ Webflow on Facebook: https://wfl.io/2HDE2OQ
Views: 8138 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/webflowapp http://facebook.com/webflow
Views: 19806 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 Visit Webflow.com: https://wfl.io/2rJFPeo Webflow on Twitter: https://wfl.io/2IjEkOt Webflow on Facebook: https://wfl.io/2IlfNso
Views: 10369 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 Visit Webflow.com: https://wfl.io/2rzUMia Webflow on Twitter: https://wfl.io/2jKNkgH Webflow on Facebook: https://wfl.io/2G2p5DD
Views: 9386 Webflow
Using containers in web design - Webflow tutorial
 
02:45
Learn how and why to use Webflow's container element, which keeps all your content in a legible, reasonable region in the center of your page. We'll cover: 1. Anatomy of a container 2. Adding a container to your design 3. Styling the container 4. Enlarging the container ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflowapp http://facebook.com/webflow
Views: 30822 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 Visit Webflow.com: https://wfl.io/2vfrY3V Webflow on Twitter: https://wfl.io/2qrRb5s Webflow on Facebook: https://wfl.io/2GSecth
Views: 8118 Webflow
Copy/Paste: UI kit — Webflow tutorial
 
01:42
Creating a UI kit with common components enables you to copy/paste elements like footers, calls to action, and buttons. Just clone the UI kit project to your account, then copy-paste elements into every new project to kickstart your next website with a clean style guide: https://webflow.com/website/sample-ui-kit ---------- Get started with Webflow: https://wfl.io/2Hqrehd Visit Webflow.com: https://wfl.io/2Ht7sBt Webflow on Twitter: https://wfl.io/2Ht7sRZ Webflow on Facebook: https://wfl.io/2HHgA31
Views: 4532 Webflow
Floats and clears - Webflow CSS tutorial
 
01:53
Floats are great for wrapping 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/webflowapp http://facebook.com/webflow
Views: 7164 Webflow
Embed a Google Map - Web design tutorial
 
02:59
Webflow's Map component lets you embed an interactive map on your site via the Google Maps Javascript API. You can specify the location to highlight and choose from various display options. In this video we’ll cover: 1. Adding a map to your website 2. Creating an API key 3. Customizing your Map settings 4. Styling your Map 5. Migrating Maps on exported projects Documentation: https://university.webflow.com/article/map ---------- Get started with Webflow: https://help.webflow.com/courses/getting-started http://webflow.com http://twitter.com/webflowapp http://facebook.com/webflow
Views: 9500 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 Visit Webflow.com: https://wfl.io/2tERqvn Webflow on Twitter: https://wfl.io/2K9bYay Webflow on Facebook: https://wfl.io/2KaTwOS
Views: 3600 Webflow