Webflow 適合創新者

The initial steps with a Webflow template may appear slightly overwhelming at first, but we’ve addressed the fundamentals so you can start — from acquiring and personalizing your template, to launching your inventive content for the world to view.

During this module you’ll understand:

1. How to procure your template
2. How to modify your site in the Webflow Designer
3. How to manage a blog
4. How to include or eliminate elements from your site
5. How to publish your site
6. How to link a custom domain to your site
7. How to configure Google Analytics
8. How to obtain assistance with your template

How to procure your template

Prior to commencing the design, you must procure your template and establish a site from it in your Webflow Dashboard. You can acquire your innovator template to utilize for just one individual, business, or site.

重要的： Upon acquiring your template, you can insert a promotional code (if you possess one) by selecting Add promotion code in the checkout modal, inputting the promotional code in the text box, then pressing 申請.

To pick and acquire your innovator template:

1. 訪問 Webflow 的模板市場 to locate a top-tier template you wish to utilize for your site (e.g., Links X template, Links App template, Socialite’s Social template)
2. 按 Purchase on the template’s main page (you’ll be asked to register for a complimentary Webflow account if you are not already registered or you can log into your existing account if you’re logged out)
3. Enter your payment details into the checkout modal (or click “Modify credit card” to update your payment details if you’ve previously added them)
4. 點選 現在付款 button to finalize your purchase
5. 輕敲 繼續 after verifying your payment confirmation
6. Name your new site and hit 建立網站 to unveil your newly procured template in the Webflow Designer

重要的： You can locate template acquisition invoices in 工作區設定 > 範本 選項卡 > 購買的模板. Click 下載發票 to acquire the invoice for a particular template you’ve purchased.

Later on, you will be able to access your template-based site from your Webflow Dashboard.

How to tailor your site in the Webflow Designer

Once you’ve acquired your template, you can begin personalizing it to suit your style. 

Your template might have launched directly in the Webflow Designer, or you may opt to start your site from your Webflow Dashboard. Both options lead you to the same location — the Designer — where all your personalized design enchantment occurs!  

Prior to commencing customizing your template, you can acquaint yourself with the various panels in the 設計師, alongside the Webflow帆布 itself: 

• 頁面面板
• Narrator panel
• 資源面板
• 風格面板
• 帆布

These panels grant you access to your pages (頁面面板), the hierarchical arrangement of the elements in your pages (Narrator panel), an outline of assets you’ve integrated into your site (資源面板), and the capability to fine-tune the style of the elements on your pages (風格面板). The 帆布 is the arena where you can interact with the elements in your site. 

You can also preview your design in your browser prior to publishing it by tapping the “eye” icon in the top left corner of the 設計師. 

It’s advisable to routinely check diverse breakpoint views of your site’s design, to guarantee that your website is responsive across various devices. Learn more about breakpoints.

In addition to the details we’ve incorporated in this module, the template creator may have furnished a “Start Here” guide as one of the pages in the template. If such a guide exists within your site, you can utilize it to grasp tips and techniques specific to the template you’ve purchased. 

If you’re utilizing Webflow’s Introductory site plan, you’ll be able to modify all the pages within your template, but you won’t be able to append additional pages or replicate a page without first enhancing to a paid 工作空間規劃 or paid 網站計劃.

重要的： Before embarking on alterations to your site, it’s wise to back up your site and produce manual backups (besides Webflow’s auto-backups) before carrying out any substantial changes to your site.

Lets go through how you can utilize the 設計師 到：

• Alter text
• Adjust colors
• Personalize backgrounds
• Substitute images
• Renew links
• Collect site visitor data
• Modify SEO configurations

重要的： If you come across an element that’s also a Symbol, double-click it to modify the elements within the Symbol. Symbols are reusable components that can be utilized in numerous instances across your entire site (e.g., you can possess the same contact form on numerous different pages). Each time you revise one instance of the Symbol, it updates in all other locations. Read more about Symbols.

Alter text

To modify text in your template, double-click a text element or choose it and press 輸入/返回. Then, select the placeholder text and substitute it with your own content.

You can also alter your text’s font, weight, color, etc. Typography style attributes are situated under the 版式 category的 風格面板. 

有用的提示： If you wish to promptly alter your text’s style throughout your entire site, you can choose the Body (All pages) tag and modify the text’s font type, font size, and line height. Learn more about typography.

Connected reading:

• Typography color contrast

Adjust colors

If your template’s color scheme encompasses color variables, you can effortlessly modify a color variable to update it across the site (e.g., transforming a red color variable to purple alters all red colored elements to purple).

Personalize backgrounds 

Certain elements utilize a background color, image, or gradient to introduce visual interest. 

Establishing the background on an element furnishes you control over the appearance and legibility. In the 風格面板 > 背景, you can include a background image, gradient, or color to most elements (besides media elements like video and image). Learn how to tweak backgroundstyles.

其他資源：

• Webflow’s color selector
• Font color variation

Substitute pictures

You have the option to swap out placeholder images in your design with alternative images that you upload yourself. You can upload images and access previously uploaded images through the Assets panel. Discover how to replace images.

延伸閱讀：

• Incorporating alt text for your images
• Different file formats for images
• Optimizing image quality

Revise hyperlinks

It’s also important to update any hyperlinks in your selected design. To swiftly modify a hyperlink, select the element containing the hyperlink, then navigate to the 設定面板 > 連結設定 and make the necessary adjustments. Learn about setting a hyperlink and tweaking its configurations.

延伸閱讀：

• 錨文本
• Link sections

寶貴的提示： You also have the option to embed videos from external platforms like YouTube or Vimeo. Learn about utilizing Webflow’s video component.

Gather visitor details

To collect information from site visitors (e.g., newsletter sign-ups, etc.) or to allow visitors to send messages via a contact form, you can configure your form to accurately gather this information and forward it to you.

You can collect this data directly in your 站點設定, or utilize third-party services such as MailChimp or Zapier to manage form submissions. Explore how to handle form submissions and notifications.

Adjust SEO configurations

To customize the title, image, or description displayed when your site is shared or searched, you can modify SEO settings and Open Graph settings within your page’s settings. Dive deeper into SEO with our SEO fundamentals guide.

To access SEO配置 和 Open Graph設定:

1. 訪問 頁面面板
2. Click the cog icon next to the desired page for updates
3. Edit information in SEO配置 或者 開放圖配置

Operating a blog

If your template includes a built-in blog, you can efficiently craft new posts showcasing your unique content using Webflow’s built-in content management system (CMS). 

A CMS is the repository for dynamic content. Your website references this dynamic content on various pages, ensuring that any modifications to this content in the CMS automatically update across all relevant pages.

Webflow’s visual CMS empowers you to shape structured content, creatively design around that content, and manage it all — without requiring code alterations. Explore more about the Webflow CMS and handling individual Collection items.

You can distinguish dynamic CMS elements by their purple outlines or by selecting the element and checking the 風格面板. If a Dynamic style settings segment is visible, the element is a dynamic CMS element.

Let’s review the process of:

• Personalizing your individual posts
• Incorporating and removing blog entries and categories
• Preserving a blog post draft
• Scheduling a blog post

Personalizing your individual posts

You can tailor a blog post within the Webflow CMS. A CMS in a template site generally comprises 2 (or more) CMS 收藏 with sample content (e.g., a “Blog posts” Collection and a “Categories” Collection). You can replace the sample content with your own data.

A 收藏 is a compilation of similar items. For example, you might have a Collection named “Blog posts.” The “Blog posts” 收藏 encompasses individual 收藏品 — individual blog posts.

Each 收藏品 (e.g., each blog post) contains fields for your content. For instance, you can insert a blog post title, the blog post content, the blog post’s main image, the blog post’s category, etc.

To update the sample content with your specific input: 

1. 點選 內容管理系統 icon in the Designer toolbar to open the 內容管理系統面板
2. 選擇所需的 收藏 (e.g., “Blog posts”)
3. 選擇一個 收藏品 (e.g., one of the sample blog posts)
4. Fill in the fields with your information

Subsequently, you can:

• 節省 your changes
• Use the dropdown menu to 發布 your individual blog post immediately (omitting the need for a global publish)
• Employ the dropdown menu to 儲存為草稿 if you’re not prepared to publish the post yet. 

Repeat the above steps for any other 收藏品 you wish to update. The modifications you make will automatically reflect on the canvas (unless you’ve kept your post as a draft, which hides it from public view on your site). Discover more about updating Collection items.

重要的： Ensure to update the URL slug if you change the blog post’s title. 

Incorporating and removing blog entries and categories

要附加一個 收藏品 (e.g., a blog post or a blog category), you can create new items manually, import items from a CSV file, or link them through the CMS API using Zapier or webhooks. Learn how to create additional Collection items.

You have the option to erase multiple Collection items at once or delete individual Collection items. 

To remove a single 收藏品:

1. 訪問 內容管理系統 icon in the Designer toolbar to open the 內容管理系統面板
2. 選擇所需的 收藏 (e.g., “Blog posts”)
3. 選擇一個 收藏品 (e.g., a blog post)
4. Scroll to the bottom and select 刪除
5. Confirm by clicking 刪除 again

Preserve a draft of a blog post

Instead of directly publishing a blog post on your site, you can securely retain it as a draft initially.

You can amend draft items multiple times and continue saving them as drafts until you’re ready for publication. Once finalized, the article can be 準備出版 或者 發表 on your site. Explore how to manage draft items.

Schedule a blog post

Scheduled publishing enables you to plan content releases beforehand and automatically push them live at the designated time. This feature is exclusively available on Hosted CMS, Business, and Ecommerce site plans.

Learn how to schedule your blog entries.

How to append or eliminate elements from your site

You’ve selected your desired template for customization, but you may desire to include a fresh image on the homepage or feature a new hyperlink in your list of links. Alternatively, you may not require a Twitter link or a product store and prefer to eliminate these elements from your layout. You have the flexibility to add or remove elements from your site to perfectly tailor your content.

寶貴的提示： For managing blog posts, a slightly different approach is necessary as blog posts are controlled by the Webflow CMS. Refer to the blog-specific instructions on working with a blog. 

Let’s guide you through:

• Incorporating elements into your site
• Eliminating elements from your site

筆記： It’s advisable to makeCreate a backup before implementing any major alterations to your website.

Include components in your website

You have the option to integrate elements and parts in your website. For example, if you wish to insert a new link, you can duplicate an existing link by copying and pasting it directly onto your site:

1. 選擇 the element you want to duplicate (e.g., a link)
2. Copy the element using 命令 + C （在 Mac 上）或 控制 + C （在 Windows 上）
3. Paste the copied element using 命令 + V （在 Mac 上）或 控制 + V （在 Windows 上）

You can also undo the paste action by hitting 命令 + Z （在 Mac 上）或 控制 + Z （在 Windows 上）。

Eliminate components from your website

You can also eradicate elements from your website. For instance, if you do not utilize a specific social media platform and wish to delete its link, follow these steps to remove an element:

1. Select the element you want to remove (ensure you’ve selected all its associated components to avoid leaving any elements behind post-deletion)
2. 按 刪除 鍵盤上的鍵

You can also undo the delete action by hitting 命令 + Z （在 Mac 上）或 控制 + Z （在 Windows 上）。

Steps to publish your website

While customizing your design, you can publish your website to Webflow’s native domain for free (e.g., “www.myamazingplants.網路流io“) to preview how your site appears on the web. Learn how to publish your website.

Guide on linking a personal domain to your website

Although you can always publish your website to Webflow’s default domain for free (e.g., myamazingplants.網路流io), you also have the opportunity to connect your custom domain to your website and publish it there instead (e.g., myamazingplants.com).

We will explain how you can:

• Obtain a site plan for your new website
• Link your custom domain to your website

Obtain a site plan for your website

If you want to use a custom domain with your website or establish a more comprehensive blog, you can purchase a site plan for your website. Learn how to manage your site plans.

If your template utilizes the Webflow CMS (e.g., for a blog), you cannot purchase a Basic site plan until the CMS is removed from your website. This action may affect parts of the template design, so make sure to back up your website before eliminating the CMS.

Discover how to apply a promo code for your site plan purchase.

Link your custom domain to your website

Once you have acquired a site plan for your website, you can publish your website to any custom domain you own (e.g., myamazingplants.com). Learn how to connect your custom domain.

Process for adding Google Analytics

You’ve developed an awesome website. Now, it’s time to set up Google Analytics to monitor essential metrics such as user count, pageviews, user session durations, and bounce rates. Google Analytics also provides insights into your website’s traffic sources, allowing you to drill down to specific locations like cities. Learn how to configure Google Analytics for your website.

Obtaining assistance for your template

If you’re new to Webflow and find templates with numerous interactions, customized menus, and popup modals challenging to customize, you can seek assistance from the template designer. Additionally, many template designers include support documentation within their templates.

Celebrate your achievement in creating a unique and engaging website, and share your creative content with the world!