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.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.

No Comments

Back to top