혁신가를 위한 Webflow

Webflow 템플릿을 사용하는 초기 단계는 처음에는 약간 어려울 수 있지만, 템플릿을 획득하고 개인화하는 것부터 전 세계가 볼 수 있는 창의적인 콘텐츠를 출시하는 것까지, 시작할 수 있도록 기본 사항을 다루었습니다.

이 모듈에서는 다음 내용을 이해하게 됩니다.

1. 템플릿을 구매하는 방법
2. Webflow Designer에서 사이트를 수정하는 방법
3. 블로그를 관리하는 방법
4. 사이트에 요소를 포함하거나 제거하는 방법
5. 사이트를 게시하는 방법
6. 사용자 정의 도메인을 사이트에 연결하는 방법
7. Google Analytics를 구성하는 방법
8. 템플릿에 대한 도움을 얻는 방법

템플릿을 구매하는 방법

디자인을 시작하기 전에 템플릿을 구매하고 Webflow 대시보드에서 사이트를 설정해야 합니다. 혁신자 템플릿을 구매하여 개인, 기업 또는 사이트 하나에만 사용할 수 있습니다.

중요한: 템플릿을 취득한 후에는 프로모션 코드(보유하고 있는 경우)를 선택하여 삽입할 수 있습니다. 프로모션 코드 추가 결제 모달에서 텍스트 상자에 프로모션 코드를 입력한 다음 누르세요. 적용하다.

혁신자 템플릿을 선택하고 획득하려면:

1. 방문하다 Webflow의 템플릿 마켓플레이스 귀하의 사이트에 사용하고 싶은 최고 수준의 템플릿을 찾으려면 (예: 링크 X 템플릿, 링크 앱 템플릿, Socialite의 Social 템플릿)
2. 누르다 구입 템플릿의 메인 페이지에서 (아직 등록하지 않은 경우 무료 Webflow 계정을 등록하라는 메시지가 표시되고, 로그아웃한 경우 기존 계정에 로그인할 수 있습니다)
3. 결제 세부 정보를 체크아웃 모달에 입력하거나 "신용카드 수정”이전에 추가한 결제 세부 정보를 업데이트하려면)
4. 다음을 클릭하세요. 지금 지불하세요 구매를 마무리하기 위한 버튼
5. 수도꼭지 계속하다 결제 확인을 확인한 후
6. 새 사이트의 이름을 지정하고 다음을 클릭합니다. 사이트 만들기 Webflow Designer에서 새로 구매한 템플릿을 공개하려면

중요한: 템플릿 인수 송장은 다음에서 찾을 수 있습니다. 작업공간 설정 > 템플릿 탭 > 구매한 템플릿. 클릭 송장 다운로드 구매하신 특정 템플릿에 대한 송장을 받으세요.

나중에 Webflow 대시보드에서 템플릿 기반 사이트에 액세스할 수 있게 됩니다.

Webflow Designer에서 사이트를 맞춤화하는 방법

템플릿을 구매한 후에는 자신의 스타일에 맞게 개인화 작업을 시작할 수 있습니다. 

귀하의 템플릿은 다음에서 직접 실행되었을 수 있습니다. Webflow 디자이너또는 Webflow 대시보드에서 사이트를 시작할 수도 있습니다. 두 옵션 모두 동일한 위치인 Designer로 이동하며, 여기에서 모든 개인화된 디자인 마법이 발생합니다!  

템플릿 사용자 지정을 시작하기 전에 다양한 패널에 대해 알아볼 수 있습니다. 디자이너, 옆에 Webflow 캔버스 그 자체: 

• 페이지 패널
• 내레이터 패널
• 리소스 패널
• 스타일 패널
• 캔버스

이 패널은 귀하에게 페이지에 대한 액세스 권한을 부여합니다.페이지 패널), 페이지의 요소의 계층적 배열(내레이터 패널), 귀하의 사이트에 통합한 자산 개요(리소스 패널), 그리고 페이지의 요소 스타일을 미세 조정할 수 있는 기능(스타일 패널). 그 캔버스 사이트의 요소와 상호작용할 수 있는 장소입니다. 

또한 게시하기 전에 브라우저에서 디자인을 미리 볼 수 있습니다. 왼쪽 상단 모서리에 있는 "눈" 아이콘을 탭하세요. 디자이너. 

다양한 기기에서 웹사이트가 반응하는지 확인하려면 사이트 디자인의 다양한 중단점 뷰를 정기적으로 확인하는 것이 좋습니다. 중단점에 대해 자세히 알아보세요.

이 모듈에 통합한 세부 정보 외에도 템플릿 작성자는 템플릿의 페이지 중 하나로 "여기서 시작" 가이드를 제공했을 수 있습니다. 그러한 가이드가 사이트 내에 있는 경우 구매한 템플릿에 대한 팁과 기술을 파악하는 데 사용할 수 있습니다. 

Webflow의 소개 사이트 계획을 활용하는 경우 템플릿 내의 모든 페이지를 수정할 수 있지만 유료 사이트로 먼저 업그레이드하지 않고는 추가 페이지를 추가하거나 페이지를 복제할 수 없습니다. 작업 공간 계획 또는 지불 부지 계획.

중요한: 사이트를 변경하기 전에 사이트를 백업하고, Webflow의 자동 백업 외에도 수동 백업을 작성한 후에 사이트에 실질적인 변경을 실시하는 것이 좋습니다.

어떻게 활용할 수 있는지 살펴보겠습니다. 디자이너 에게:

• 텍스트 변경
• 색상 조정
• 배경 개인화
• 대체 이미지
• 링크 갱신
• 사이트 방문자 데이터 수집
• SEO 구성 수정

중요한: 심볼이기도 한 요소를 발견하면 더블클릭하여 심볼 내의 요소를 수정합니다. 심볼은 전체 사이트에서 여러 인스턴스에서 활용할 수 있는 재사용 가능한 구성 요소입니다(예: 여러 다른 페이지에서 동일한 연락처 양식을 소유할 수 있음). 심볼의 인스턴스를 하나 수정할 때마다 다른 모든 위치에서 업데이트됩니다. 심볼에 대해 자세히 알아보세요.

텍스트 변경

템플릿의 텍스트를 수정하려면 텍스트 요소를 두 번 클릭하거나 선택하고 누르세요. 입장/반환. 그런 다음 자리 표시자 텍스트를 선택하여 원하는 콘텐츠로 대체합니다.

텍스트의 글꼴, 두께, 색상 등을 변경할 수도 있습니다. 타이포그래피 스타일 속성은 아래에 있습니다. 타이포그래피 category의 스타일 패널. 

유용한 팁: 사이트 전체에서 텍스트 스타일을 즉시 변경하려면 Body(모든 페이지) 태그를 선택하고 텍스트의 글꼴 유형, 글꼴 크기 및 줄 높이를 수정할 수 있습니다. 타이포그래피에 대해 자세히 알아보세요.

연결된 읽기:

• 타이포그래피 색상 대비

색상 조정

템플릿의 색상 구성표에 색상 변수가 포함되어 있는 경우 색상 변수를 쉽게 수정하여 사이트 전체에서 업데이트할 수 있습니다(예: 빨간색 색상 변수를 보라색으로 변환하면 모든 빨간색 요소가 보라색으로 변경됨).

배경 개인화 

어떤 요소는 시각적 흥미를 불러일으키기 위해 배경색, 이미지 또는 그라데이션을 활용합니다. 

요소에 배경을 설정하면 모양과 가독성을 제어할 수 있습니다. 스타일 패널 > 배경, 대부분 요소에 배경 이미지, 그라디언트 또는 색상을 포함할 수 있습니다(비디오 및 이미지와 같은 미디어 요소 제외). 배경 스타일을 조정하는 방법을 알아보세요.

추가 리소스:

• Webflow의 색상 선택기
• 글꼴 색상 변형

대체 사진

디자인의 플레이스홀더 이미지를 직접 업로드한 대체 이미지로 바꿀 수 있는 옵션이 있습니다. 이미지를 업로드하고 이전에 업로드한 이미지에 Assets 패널을 통해 액세스할 수 있습니다. 이미지를 대체하는 방법을 알아보세요.

추가 자료:

• 이미지에 대체 텍스트 통합
• 이미지에 대한 다양한 파일 형식
• 이미지 품질 최적화

하이퍼링크 수정

선택한 디자인의 모든 하이퍼링크를 업데이트하는 것도 중요합니다. 하이퍼링크를 빠르게 수정하려면 하이퍼링크가 포함된 요소를 선택한 다음 설정 패널 > 링크 설정 그리고 필요한 조정을 합니다. 하이퍼링크 설정과 구성 조정에 대해 알아보세요.

추가 자료:

• 앵커 텍스트
• 링크 섹션

유용한 팁: YouTube나 Vimeo와 같은 외부 플랫폼에서 비디오를 임베드하는 옵션도 있습니다. Webflow의 비디오 구성 요소를 활용하는 방법에 대해 알아보세요.

방문자 세부 정보 수집

사이트 방문자로부터 정보를 수집하려면(예: 뉴스레터 가입 등) 또는 방문자가 연락처 양식을 통해 메시지를 보낼 수 있도록 하려면 이 정보를 정확하게 수집하여 전달하도록 양식을 구성할 수 있습니다.

이 데이터는 귀하의 직접 수집할 수 있습니다. 사이트 설정, 또는 MailChimp 또는 Zapier와 같은 타사 서비스를 활용하여 양식 제출을 관리합니다. 양식 제출 및 알림을 처리하는 방법을 알아보세요.

SEO 구성 조정

사이트가 공유되거나 검색될 때 표시되는 제목, 이미지 또는 설명을 사용자 지정하려면 페이지 설정에서 SEO 설정 및 Open Graph 설정을 수정할 수 있습니다. SEO 기본 가이드로 SEO에 대해 더 자세히 알아보세요.

접근하려면 SEO 구성 그리고 오픈 그래프설정:

1. 액세스 페이지 패널
2. 업데이트를 받으려면 원하는 페이지 옆에 있는 톱니바퀴 아이콘을 클릭하세요.
3. 정보를 편집하세요 SEO 구성 또는 오픈 그래프 구성

블로그 운영하기

템플릿에 블로그가 내장되어 있는 경우 Webflow의 내장 콘텐츠 관리 시스템(CMS)을 사용하여 고유한 콘텐츠를 선보이는 새로운 게시물을 효율적으로 만들 수 있습니다. 

CMS는 동적 콘텐츠의 저장소입니다. 귀하의 웹사이트는 다양한 페이지에서 이 동적 콘텐츠를 참조하며, CMS에서 이 콘텐츠에 대한 모든 수정 사항이 모든 관련 페이지에서 자동으로 업데이트되도록 합니다.

Webflow의 시각적 CMS를 사용하면 구조화된 콘텐츠를 형성하고, 해당 콘텐츠를 중심으로 창의적으로 디자인하고, 모든 것을 관리할 수 있습니다. 코드를 변경할 필요가 없습니다. Webflow CMS와 개별 컬렉션 항목 처리에 대해 자세히 알아보세요.

동적 CMS 요소는 보라색 윤곽선으로 구분하거나 요소를 선택하고 다음을 확인하여 구분할 수 있습니다. 스타일 패널. 만약 동적 스타일 설정 세그먼트가 표시되면 해당 요소는 동적 CMS 요소입니다.

다음 과정을 검토해 보겠습니다.

• 개별 게시물 개인화
• 블로그 항목 및 카테고리 통합 및 제거
• 블로그 게시물 초안 보존
• 블로그 게시물 예약

개별 게시물 개인화

Webflow CMS 내에서 블로그 게시물을 맞춤 설정할 수 있습니다. 템플릿 사이트의 CMS는 일반적으로 2개(또는 그 이상)의 CMS로 구성됩니다. 컬렉션 샘플 콘텐츠(예: "블로그 게시물" 컬렉션 및 "카테고리" 컬렉션)를 사용하여 샘플 콘텐츠를 사용자 고유 데이터로 대체할 수 있습니다.

ㅏ 수집 유사한 항목의 컴파일입니다. 예를 들어, "블로그 게시물"이라는 이름의 컬렉션이 있을 수 있습니다. "블로그 게시물" 수집 개인을 포괄한다 컬렉션 아이템 — 개별 블로그 게시물.

각 컬렉션 아이템 (예: 각 블로그 게시물)에는 콘텐츠에 대한 필드가 포함되어 있습니다. 예를 들어, 블로그 게시물 제목, 블로그 게시물 콘텐츠, 블로그 게시물의 기본 이미지, 블로그 게시물의 category 등을 삽입할 수 있습니다.

귀하의 특정 입력 내용으로 샘플 콘텐츠를 업데이트하려면: 

1. 다음을 클릭하세요. CMS 디자이너 도구 모음의 아이콘을 클릭하여 엽니다. CMS 패널
2. 원하는 것을 선택하세요 수집 (예: "블로그 게시물")
3. 고르다 컬렉션 아이템 (예: 샘플 블로그 게시물 중 하나)
4. 귀하의 정보를 필드에 입력하세요

그 후에는 다음을 수행할 수 있습니다.

• 구하다 당신의 변화
• 드롭다운 메뉴를 사용하여 게시 글로벌 게시가 필요 없이 개별 블로그 게시물을 즉시 게시합니다.
• 드롭다운 메뉴를 활용하세요 임시 보관함에 저장 아직 게시물을 게시할 준비가 되지 않았다면. 

다른 모든 항목에 대해 위의 단계를 반복하십시오. 컬렉션 아이템 업데이트하려는 경우. 수정한 내용은 캔버스에 자동으로 반영됩니다(게시물을 초안으로 보관하여 사이트에서 공개 보기에서 숨긴 경우는 제외). 컬렉션 항목 업데이트에 대해 자세히 알아보세요.

중요한: 블로그 게시물의 제목을 변경하는 경우 URL 슬러그를 업데이트해야 합니다. 

블로그 항목 및 카테고리 통합 및 제거

추가하려면 컬렉션 아이템 (예: 블로그 게시물 또는 블로그 category) 새 항목을 수동으로 만들거나, CSV 파일에서 항목을 가져오거나, Zapier 또는 웹훅을 사용하여 CMS API를 통해 연결할 수 있습니다. 추가 컬렉션 항목을 만드는 방법을 알아보세요.

여러 컬렉션 항목을 한 번에 지우거나 개별 컬렉션 항목을 삭제할 수 있습니다. 

단일을 제거하려면 컬렉션 아이템:

1. 액세스 CMS 디자이너 도구 모음의 아이콘을 클릭하여 엽니다. CMS 패널
2. 원하는 것을 선택하세요 수집 (예: "블로그 게시물")
3. 고르다 컬렉션 아이템 (예: 블로그 게시물)
4. 아래로 스크롤하여 선택하세요 삭제
5. 클릭하여 확인하세요 삭제 다시

블로그 게시물 초안 보존

사이트에 블로그 게시물을 직접 게시하는 대신, 처음에는 초안으로 안전하게 보관할 수 있습니다.

초안 항목을 여러 번 수정하고 출판할 준비가 될 때까지 초안으로 계속 저장할 수 있습니다. 완료되면 기사를 출판 준비 완료 또는 출판됨 귀하의 사이트에서. 초안 항목을 관리하는 방법을 알아보세요.

블로그 게시물 예약

예약된 게시를 사용하면 콘텐츠 릴리스를 미리 계획하고 지정된 시간에 자동으로 라이브로 푸시할 수 있습니다. 이 기능은 다음에서만 사용할 수 있습니다. 호스팅 CMS, 비즈니스 및 전자상거래 사이트 계획.

블로그 게시물을 예약하는 방법을 알아보세요.

사이트에 요소를 추가하거나 제거하는 방법

사용자 정의를 위해 원하는 템플릿을 선택했지만 홈페이지에 새로운 이미지를 포함하거나 링크 목록에 새로운 하이퍼링크를 추가하고 싶을 수 있습니다. 또는 Twitter 링크나 제품 매장이 필요하지 않고 레이아웃에서 이러한 요소를 제거하고 싶을 수 있습니다. 콘텐츠를 완벽하게 맞춤화하기 위해 사이트에서 요소를 추가하거나 제거할 수 있는 유연성이 있습니다.

유용한 팁: 블로그 게시물을 관리하려면 블로그 게시물이 Webflow CMS에 의해 제어되므로 약간 다른 접근 방식이 필요합니다. 블로그 작업에 대한 블로그별 지침을 참조하세요. 

다음을 안내해 드리겠습니다.

• 사이트에 요소 통합
• 사이트에서 요소 제거

메모: 웹사이트를 주요 변경 사항에 적용하기 전에 백업을 만드는 것이 좋습니다.

웹사이트에 구성요소를 포함하세요

웹사이트에 요소와 부분을 통합할 수 있는 옵션이 있습니다. 예를 들어, 새 링크를 삽입하려는 경우 기존 링크를 복사하여 사이트에 직접 붙여넣어 복제할 수 있습니다.

1. 선택하다 복제하려는 요소(예: 링크)
2. 다음을 사용하여 요소를 복사합니다. 명령 + 씨 (Mac의 경우) 또는 제어 + 씨 (윈도우즈에서)
3. 복사한 요소를 붙여넣기 명령 + V (Mac의 경우) 또는 제어 + V (윈도우즈에서)

붙여넣기 작업을 취소하려면 다음을 누르세요. 명령 + 지 (Mac의 경우) 또는 제어 + 지 (윈도우즈에서).

웹사이트에서 구성 요소 제거

웹사이트에서 요소를 제거할 수도 있습니다. 예를 들어, 특정 소셜 미디어 플랫폼을 사용하지 않고 해당 링크를 삭제하려는 경우 다음 단계에 따라 요소를 제거합니다.

1. 제거하려는 요소를 선택합니다(삭제 후에 요소가 남지 않도록 연관된 모든 구성 요소를 선택했는지 확인하세요)
2. 누르세요 삭제 키보드의 키

삭제 작업을 취소하려면 다음을 누르세요. 명령 + 지 (Mac의 경우) 또는 제어 + 지 (윈도우즈에서).

웹사이트 게시 단계

디자인을 사용자 지정하는 동안 Webflow의 기본 도메인에 웹사이트를 무료로 게시할 수 있습니다(예: "www.myamazingplants.webflow.io")를 클릭하여 사이트가 웹에 어떻게 나타나는지 미리 보세요. 웹사이트를 게시하는 방법을 알아보세요.

개인 도메인을 귀하의 웹사이트에 연결하는 방법에 대한 가이드

Webflow의 기본 도메인에 무료로 웹사이트를 게시할 수는 있지만(예: myamazingplants.webflow.io), 또한 사용자 정의 도메인을 귀하의 웹사이트에 연결하여 거기에 게시할 수도 있습니다(예: myamazingplants).콤).

다음 방법을 설명해 드리겠습니다.

• 새 웹사이트를 위한 사이트 계획을 얻으세요
• 사용자 정의 도메인을 웹사이트에 연결하세요

귀하의 웹사이트를 위한 사이트 계획을 얻으세요

웹사이트에 사용자 정의 도메인을 사용하거나 보다 포괄적인 블로그를 구축하려는 경우 웹사이트에 대한 사이트 플랜을 구매할 수 있습니다. 사이트 플랜을 관리하는 방법을 알아보세요.

템플릿이 Webflow CMS(예: 블로그)를 사용하는 경우 CMS가 웹사이트에서 제거될 때까지 기본 사이트 플랜을 구매할 수 없습니다. 이 작업은 템플릿 디자인의 일부에 영향을 미칠 수 있으므로 CMS를 제거하기 전에 웹사이트를 백업해야 합니다.

사이트 계획 구매에 프로모션 코드를 적용하는 방법을 알아보세요.

사용자 정의 도메인을 웹사이트에 연결하세요

웹사이트에 대한 사이트 계획을 취득한 후에는 소유한 사용자 정의 도메인(예: myamazingplants.com)에 웹사이트를 게시할 수 있습니다. 사용자 정의 도메인을 연결하는 방법을 알아보세요.

Google Analytics 추가 프로세스

멋진 웹사이트를 개발했습니다. 이제 사용자 수, 페이지뷰, 사용자 세션 기간, 이탈률과 같은 필수 지표를 모니터링하기 위해 Google Analytics를 설정할 때입니다. Google Analytics는 또한 웹사이트 트래픽 소스에 대한 통찰력을 제공하여 도시와 같은 특정 위치까지 드릴다운할 수 있습니다. 웹사이트에 Google Analytics를 구성하는 방법을 알아보세요.

템플릿에 대한 지원 받기

Webflow를 처음 사용하는 경우 수많은 상호작용, 사용자 지정 메뉴, 팝업 모달이 있는 템플릿을 사용자 지정하기 어렵다고 생각되면 템플릿 디자이너에게 도움을 요청할 수 있습니다. 또한 많은 템플릿 디자이너가 템플릿에 documentation 지원을 포함합니다.

독특하고 매력적인 웹사이트를 만들어 성과를 축하하고, 여러분의 창의적인 콘텐츠를 전 세계와 공유하세요!