Webflow Tutorial for Beginners (2021 Full Tutorial) - Create A Custom Professional Website
START HERE ➡️ https://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:
http://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: https://santrelmedia.com/website-builders/
Top Wordpress Hosts, Tools, and Builders: https://santrelmedia.com/wordpress/
Squarespace review: https://santrelmedia.com/squarespace-review/
Wix review: https://santrelmedia.com/wix-review/
Follow us on Instagram:
Nate: https://www.instagram.com/nateobrienn/
Mike: https://www.instagram.com/mikeobrienn/
SUBSCRIBE: www.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!
Видео Webflow Tutorial for Beginners (2021 Full Tutorial) - Create A Custom Professional Website канала Santrel Media
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:
http://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: https://santrelmedia.com/website-builders/
Top Wordpress Hosts, Tools, and Builders: https://santrelmedia.com/wordpress/
Squarespace review: https://santrelmedia.com/squarespace-review/
Wix review: https://santrelmedia.com/wix-review/
Follow us on Instagram:
Nate: https://www.instagram.com/nateobrienn/
Mike: https://www.instagram.com/mikeobrienn/
SUBSCRIBE: www.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!
Видео Webflow Tutorial for Beginners (2021 Full Tutorial) - Create A Custom Professional Website канала Santrel Media
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Learn Webflow in 16 Minutes (2021 Crash Course)](https://i.ytimg.com/vi/vvyPj5bTcgQ/default.jpg)
![Intro to WebFlow for Beginners (Complete guide to building a fully responsive lander)](https://i.ytimg.com/vi/81vzaO30720/default.jpg)
![Webflow Tutorial For Beginners 2021 [FULL STEP-BY-STEP TUTORIAL]](https://i.ytimg.com/vi/cZlnnbHNKrE/default.jpg)
![Make A Website in 15 Minutes (using GoDaddy) - 2021 Website Tutorial](https://i.ytimg.com/vi/pQFIw97vqK0/default.jpg)
![Wix vs Squarespace (Best Website Builder 2021)](https://i.ytimg.com/vi/-OkLNYbpNfU/default.jpg)
![8 Side Hustle Ideas - How I Make $20,000 Per Month](https://i.ytimg.com/vi/mcodZ3fGxQA/default.jpg)
![5 AMAZING WEBFLOW WEBSITES | Web Design Inspiration](https://i.ytimg.com/vi/Vowek3_420o/default.jpg)
![Squarespace Tutorial for Beginners (Full Tutorial) - Create A Professional Website](https://i.ytimg.com/vi/u-DnVBrzeLs/default.jpg)
![FACEBOOK BUSINESS PAGE TUTORIAL (2021)](https://i.ytimg.com/vi/nt2_HNhQhLI/default.jpg)
![When You Should and Shouldn’t Use Webflow](https://i.ytimg.com/vi/KCWbrQlSDok/default.jpg)
![Website Builder Comparison 2021 - Side-By-Side Honest Review](https://i.ytimg.com/vi/M6f21jHTi58/default.jpg)
![Container – Webflow's most misunderstood element — Webflow tutorial](https://i.ytimg.com/vi/KGg5cIjHQiw/default.jpg)
![LEARN WEBFLOW IN 45 MIN.](https://i.ytimg.com/vi/CLiic14t2YQ/default.jpg)
![Building a Studio VØR Design Concept in Webflow | WebDev For You](https://i.ytimg.com/vi/-R9UO_eNQDg/default.jpg)
![5 Best Marketing Tools To Grow Your Business Online](https://i.ytimg.com/vi/iEUpvK5JVys/default.jpg)
![How To Structure Websites Efficiently With Webflow](https://i.ytimg.com/vi/zZMx_8FvjvQ/default.jpg)
![TOP 5 WEBFLOW SITES: The best websites developed on Webflow](https://i.ytimg.com/vi/iCUBOqajZKc/default.jpg)
![Why You Should Never Start Your Web Design Process in Webflow (Start in Figma)](https://i.ytimg.com/vi/AImZD4nLytw/default.jpg)
![2D & 3D effects and transitions in CSS — Webflow tutorial](https://i.ytimg.com/vi/YHQ820W8FRw/default.jpg)
![Animated buttons and flexbox button wrappers — Web design tutorial](https://i.ytimg.com/vi/hOu6uQsosiM/default.jpg)