Webflow Tutorial for Beginners (2022 Full Tutorial) – Create A Custom Professional Website

Webflow Tutorial for Beginners (2022 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!

10 thoughts on “Webflow Tutorial for Beginners (2022 Full Tutorial) – Create A Custom Professional Website”

  1. ****FOLLOW ALONG by STARTING HERE****👉 https://santrelmedia.com/webflow

    Then LEARN MORE HERE 👉 https://santrelmedia.com/wix-vs-webflow/
    (At Santrel Media, we aim to help you make the most of digital marketing and make decisions with confidence . To make this possible, many of our featured programs are from our partners. If you use our links, we may receive a commission at no cost to you. This helps to fund our work at absolutely no cost to you and does not influence our evaluations. To learn more, please read the video description)

  2. Remarks:
    5:46 start
    7:00 adding sections and change styling (set image as background)
    7:46 assets + change section size (alt + slide on padding)
    9:33 change images options (cover)
    10:45 add containers to section + some styling
    13:33 more image settings
    14:15 little introduction to position properties
    16:10 naming containers, columns
    16:50 some fast button styling
    18:15 add styling to other buttons
    18:20 some more styling
    20:05 move on to explain menu on the left side
    20:45 layouts intro
    21:36 intro to symbols
    21:50 intro to navigation
    22:20 intro to pages + plan discussion
    25:00 more assets
    25:30 settings
    26:00 view related things at the bottom left
    26:45 views explained
    29:30 some extra things explained
    31:10 more settings (animations)
    31:55 on hover
    33:15 start an animation
    35:10 header settings
    37:00 project settings
    38:00 SEO settings + some more settings
    42:00 templates
    44:30 link button to something

  3. Nah, sorry, can't follow that, you keep wandering all over the place and zooming your mouse all over the screen and talking non-stop and not actually teaching anything.

Leave a Comment

Your email address will not be published.