Santrel Media | Webflow Tutorial for Beginners (2022 Full Tutorial) - Create A Custom Professional Website @SantrelMedia | Uploaded November 2020 | Updated October 2024, 2 hours ago.
START HERE ➡️ santrelmedia.com/webflow
Webflow is among the fastest growing ways to build a website and for good reason! Read more below
⬇️ TIMESTAMPS BELOW ⬇️

With more customization control than Wix and Squarespace, but less complicated than WordPress, Webflow is the Goldilocks for many people.

SIGN UP FOR OUR WEEKLY MARKETING EMAIL:
santrelmedia.com/MARKETING-EMAIL
Whether you are working at a large company, small business, or for yourself, we are excited to share our weekly 5-Point Marketing Monday with you! This includes our favorite gear, tips, experts, quotes, questions, and thoughts for this week to get your week started on a successful week. Enjoy!

Our Top Website Tips/Picks:
Top Website builders: santrelmedia.com/website-builders
Top Wordpress Hosts, Tools, and Builders: santrelmedia.com/wordpress
Squarespace review: santrelmedia.com/squarespace-review
Wix review: santrelmedia.com/wix-review

Follow us on Instagram:
Nate: instagram.com/nateobrienn
Mike: instagram.com/mikeobrienn


SUBSCRIBE: youtube.com/santrelmedia

TIMESTAMPS:

0:00 Getting Started
5:45 Understanding the Dashboard
11:40 Adding & Editing Text/Buttons/Images
20:30 Adding Layout Bundles
21:40 Understanding Navigation and Organizing Your Site
23:00 Upgrading Your Site
26:00 Website View Settings
26:30 Mobile/Desktop/Tablet Site
31:00 Animations and Interactions
37:00 Project Settings (Logo, SEO, etc.)
41:50 Starting From A Template

ADDITIONAL TUTORIAL NOTES:
Design and build websites, CMS sites, and e-commerce sites (originally just websites)
Create new project (with a blank canvas, or with a template)
Great for quick landing pages, or anything

Webflow - #madeinwebflow examples on site

Webflow is responsive, so desktop/mobile/tablet all look great

Go to settings (top left under dashboard)
General, Hosting, SEO, forms, etc.
Fonts are easily integrated with Google Fonts, Adobe Fonts, and allow your own (watch out for load speed)
Backups are automatic
Transfer option (send project to people)
Trash
Copy
Publish (custom domain or messy temp domain)
Go back to designer
Click and drag things from the left panel into the screen
Rename items in the Selector field on the right
Use style on the right to change style
LAYOUTS
Add layouts for a photo, title, text combo
Save some as symbols to duplicate common itemss
Change things in settings for each size, and it works for everything smaller (Tablet stuff applies to mobile, etc.)
NAVIGATION
Layout tree
PAGES
Add pages into folders
Name page
SEO settings on page
Edit attributes
eCommerce and CMS buttons (for future videos)
MEDIA
Your photos, logos, etc.
VIEWING ON BOTTOM
Top right - CODE EXPORT

RIGHT SIDE OPTIONS (other than just editing)
CONTAINER SETTINGS
Add a link in nav bar
Hold alt to adjust two paddings at once
Hold shift+alt to adjust all paddings at once
NAVIGATION MENU
layout
INTERACTIONS
Right side tab (lightning bolt)

#SantrelMedia #WebsiteMarketingMastery

DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for the support! Everything in this video is based on information we learned from online resources, our own experience, and books we have read. Please do your own research before making any important decisions. You and only you are responsible for any and all digital marketing decisions you make. Thank you for watching!