혁신가를 위한 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.

ㅏ 수집 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. 다음을 클릭하세요. CMS icon in the Designer toolbar to open the CMS 패널
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. 액세스 CMS icon in the Designer toolbar to open the CMS 패널
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 명령 + 씨 (Mac의 경우) 또는 제어 + 씨 (윈도우즈에서)
3. Paste the copied element using 명령 + V (Mac의 경우) 또는 제어 + V (윈도우즈에서)

You can also undo the paste action by hitting 명령 + 지 (Mac의 경우) 또는 제어 + 지 (윈도우즈에서).

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 명령 + 지 (Mac의 경우) 또는 제어 + 지 (윈도우즈에서).

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