Webflow User Guide

1. Logging In and Dashboard 

 visit  webflow.com/login 

 

 Enter username and password.  

 

 Enter your TOTP Token. 

 

 

 

 

 

 

 

 

 

 

 

 After logging in, you will be directed to the dashboard. 

 The dashboard provides an overview of all pages in your project. 

 

 

 

 

 

 

 

 

 

 

 

 2. Page Settings 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Navigate to "Settings" for each page. 

 Here you can make important settings:

 

 SEO settings (title, meta tags) 

 OpenGraph info (images for sharing) 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 3. Designer 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Click on "Designer" to enter the editing mode. 

 In the designer, you can visually edit pages and manage content from static pages. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 3.1 Design Options 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Various design options are available. 

 Tip: Group related elements in boxes for structural changes. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 3.2 Components 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Pre-built elements like banners or navigation bars can be found here. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 3.3 Variables 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Define global color schemes here. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 3.4 Style Selectors 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Useful for development and styling. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 3.5 Images 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Manage all images on your website from here. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 4. CMS Functions 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Click on the "CMS" tab. 

 Here you can manage dynamic content like events, news, etc. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 4.1 Collections 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Each collection (e.g., News, Events) has its own data structure. 

 Click on a collection to view and edit its entries. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 4.2 Creating and Editing Items 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Select a collection. 

 Click on "New Item" or an existing item. 

 Fill in the fields:

 

 Title 

 Slug (URL) 

 Date 

 Content 

 Images 

 etc. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 4.3 Text Formatting 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Double-click on text fields for formatting options. 

 Available options: Bold, Italic, Headings, etc. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 4.4 Image Upload 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Upload images in the specified sizes. 

 Tip: Prepare images in the correct dimensions before uploading. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 5. Multilingual Support 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Webflow supports multilingual websites. 

 Note that images with text may need to be created separately for each language. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 6. Video Integration 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Go to "Video Resources". 

 Add the video link (supports YouTube, Vimeo, etc.). 

 Webflow will automatically embed the video. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 7. Customizing Fields 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Click on the gear icon next to a field. 

 Select "Custom Fields". 

 Here you can add or change options (e.g., for categories). 

 

 

 

 

 

 

 

 

 

 

 

 

 

 8. Publishing 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Click on "Publish" if you want to go live with your changes. 

 Choose between Staging and Production. 

 Click on "Publish to selected domains". 

 

 

 

 

 

 

 

 

 

 

 

 

 

 9. SEO and Social Media Optimization 

 9.1 SEO Settings 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Go to page settings. 

 Fill out the SEO fields (title, description). 

 

 

 

 

 

 

 

 

 

 

 

 

 

 9.2 Open Graph Settings 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Configure Open Graph settings for better sharing on social media. 

 Upload a specific image for social media shares. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 9.3 Testing 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Use tools like the "Facebook Sharing Debugger" to test your social media preview: https://developers.facebook.com/tools/debug/ 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Tips and Tricks 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Utilize the staging environment to test changes before publishing them. 

 Ensure consistent image sizes for a uniform design. 

 Regularly check your SEO and Open Graph settings for optimal visibility.