Categories
Website Design

Toggle pause and play on your background videos — Micro lesson #27 [Video]

Copy the custom code here: https://background-video-play-pause-toggle-code.webflow.io/Background videos can be distracting and can cause harm to those sensitive to motion. That’s why it’s important to provide a way for people to pause background videos that play automatically.In this lesson, Grímur will show how to add a button to toggle pause/play to your background videos on your site in three steps:1. Paste the custom code provided above before the body tag in your page/project settings2. Set your background video’s ID to “video”3. Set your button’s ID to “video-toggle”To publish these changes, publish your site. Now your site visitors can toggle to pause then play your background video.Learn more about web accessibility → https://university.webflow.com/courses/web-accessibility———-Get started with Webflow: https://wfl.io/2r7cVUWJoin the Webflow Community: https://webflow.com/communityhttps://webflow.comhttps://twitter.com/webflowhttps://facebook.com/webflow

Categories
Website Design

Use object-fit to crop and fit images into any defined size — Micro lesson #25 [Video]

No more individually sizing images in Adobe Photoshop, Figma or Microsoft Paint. With the power of object-fit, you can fit your images into any defined width or height on your canvas. To accomplish this, follow these two steps:1. Set a defined width and height on your image2. Select any of the object-fit property (fill, cover, contain, none, scale down)Now you can temporarily exit out of your image editing program, because you can size and position your images directly in Webflow.Learn more about sizing elements in our 101 crash course → https://university.webflow.com/courses/webflow-101-crash-course———-Get started with Webflow: https://wfl.io/2r7cVUWJoin the Webflow Community: https://webflow.com/communityhttps://webflow.comhttps://twitter.com/webflowhttps://facebook.com/webflow

Categories
Website Design

Use the CH typography unit to make paragraphs easier to read — Micro lesson #24 [Video]

CH lets us set the width on a text element if we’re trying to limit the number of characters (and it bases that width on the font’s zero character.) CH units are great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line. So your eyeballs don’t get strained from reading all the way across the screen each time.Learn more at: https://university.webflow.com/lesson/accessible-typography-using-ch-units———-Get started with Webflow: https://wfl.io/2r7cVUWJoin the Webflow Community: https://webflow.com/communityhttps://webflow.comhttps://twitter.com/webflowhttps://facebook.com/webflow

Categories
MondoPlayer

Free Call with Video Marketing Expert

Now is the time to be thinking about your business’s future. Take this opportunity to build a following, get people into your sales funnel and nurture the relationships so they’ll buy from you when they’re ready. If you’d like to see how an Automated Video Curation strategy can work for you, book a free call […]