여기에서 시작

시작하기

코인 엑스 템플릿을 구매해 주셔서 감사합니다. 이 간단한 가이드에서는 코인 X 웹플로 템플릿에서 기본 요소(예: 색상, 글꼴, CMS 콘텐츠 등)를 편집하는 방법에 대한 모든 기본 사항을 다룹니다.

Webflow에 익숙하지 않다면 시작하고 실행하는 데 필요한 모든 기본 사항을 알려주는 Webflow University의 Webflow 101 크래시 코스를 수강하는 것을 적극 권장합니다.

스타일링

템플릿의 스타일링을 시작하겠습니다.

색상

코인 엑스 템플릿은 색상 견본을 사용하여 제작되었으므로 색상 견본을 쉽게 편집하여 사이트 전체에 업데이트할 수 있습니다.

이렇게 하려면 오른쪽 사이드바의 스타일 탭으로 이동한 다음 타이포그래피의 색상 섹션으로 스크롤하여 색상을 클릭하면 모든 색상 견본을 볼 수 있고 필요한 색상으로 사이트 전체에 업데이트하도록 편집할 수 있습니다.

글꼴

코인 X 템플릿은 가로로 하나의 글꼴을 사용하며 본문(모든 페이지) 선택기에 설정되어 있어 한 번의 클릭으로 모든 사이트의 글꼴을 쉽게 업데이트할 수 있습니다.

어느 페이지에서든 스타일 탭의 오른쪽 상단에 있는 주황색 선택기 옵션을 클릭한 다음 본문(모든 페이지)을 선택합니다. 이렇게 하면 아래의 타이포그래피 섹션으로 이동하여 비즈니스 브랜드에 맞는 글꼴로 글꼴을 변경할 수 있습니다.

Webflow에서 사용할 수 없는 사용자 정의 글꼴 또는 프리미엄 글꼴이 필요한 경우 언제든지 프로젝트 설정 > 글꼴로 이동하여 사용자 정의 글꼴을 업로드하거나 Adobe 글꼴 계정을 연결할 수 있습니다.

그래픽 및 아이콘

템플릿의 일부 아이콘이나 그래픽은 일반 이미지/그래픽이므로 모든 색상을 업데이트할 때에도 템플릿 색상이 그대로 유지됩니다.

이러한 그래픽은 이미지(PNG, JPG, SVG 등)이기 때문에 웹플로 CSS(스타일링)를 업데이트해도 영향을 받지 않습니다. 이 그래픽을 재사용하려면 언제든지 다운로드하여 디자인 소프트웨어(예: 포토샵, 일러스트레이터, 스케치, 피그마 등)를 사용하여 편집하거나 브랜드에 맞는 이미지/그래픽을 직접 업로드할 수 있습니다.

페이지 편집

이제 웹사이트 페이지를 편집하기 위한 다음 단계를 계속 진행합니다. 일반적으로 편집할 콘텐츠에는 다음과 같은 두 가지 유형이 있습니다.

정적 콘텐츠

정적 콘텐츠는 CMS 기반이 아닌 모든 콘텐츠로, 예를 들어 블로그 게시물과 같이 동적이 아닌 콘텐츠입니다.

이 모든 콘텐츠는 왼쪽 사이드바 탐색기에서 회색으로 표시되고 클릭하거나 마우스를 가져가면 파란색 테두리가 표시되므로 쉽게 식별할 수 있습니다.

이러한 유형의 콘텐츠를 편집하려면 해당 콘텐츠를 두 번 클릭하면 바로 입력할 수 있습니다.

동적 콘텐츠(CMS)

동적 콘텐츠는 왼쪽 사이드바(페이지 아이콘 바로 아래)의 CMS 섹션에 추가된 콘텐츠를 기반으로 자동 생성되는 모든 동적 콘텐츠입니다.

왼쪽 사이드바 내비게이터에 보라색으로 표시되고 클릭하거나 마우스를 가져가면 보라색 테두리가 표시되므로 이 모든 것을 쉽게 식별할 수 있습니다.

이 콘텐츠는 CMS 섹션에서 직접 업데이트해야 합니다. 이는 지속적으로 업데이트해야 할 가능성이 높으므로(예: 새 블로그 글 추가) 매우 쉽게 업데이트할 수 있도록 하기 위한 것입니다.

또한 자동 생성된 전체 CMS 페이지(예: 블로그 글)를 편집하려는 경우 왼쪽 사이드바의 페이지 섹션에 있는 모든 페이지 하단에서 이 페이지를 편집할 수 있습니다.

제품(전자상거래)

제품 또는 전자상거래 콘텐츠는 CMS 동적 콘텐츠와 유사한 방식으로 작동하지만 전자상거래 제품에만 초점을 맞추고 있습니다.

왼쪽 사이드바 탐색기에서 보라색으로 표시되고 클릭하거나 마우스를 가져가면 보라색 테두리가 생기므로 CMS 콘텐츠와 비슷한 방식으로 전자상거래 콘텐츠를 식별할 수 있습니다.

이 콘텐츠는 왼쪽 사이드바의 전자상거래 탭에서 직접 업데이트해야 합니다. 이는 제품 가격을 변경하거나 재고를 추가하는 등 지속적으로 업데이트해야 할 가능성이 높기 때문에 매우 쉽게 업데이트할 수 있도록 하기 위한 것입니다.

또한 자동 생성된 제품 이커머스 페이지를 편집하려는 경우 모든 페이지의 거의 맨 아래 CMS 컬렉션 페이지 바로 위에서 편집할 수 있는 페이지를 찾을 수 있습니다.

유용한 참고 사항

또한 위에서 공유한 기본 설명 외에 가장 자주 받는 질문에서 얻은 몇 가지 팁과 방법을 공유합니다.

상호 작용

템플릿 상호작용을 편집하려는 경우(예: 표시 효과 제거) 왼쪽 사이드바 탐색기에 작은 상호작용 아이콘(작은 천둥)이 표시되므로 상호작용이 있는 요소를 쉽게 식별할 수 있습니다.

이 작은 상호 작용 아이콘을 클릭하면 이 요소의 오른쪽 사이드바 상호 작용 탭이 열리고, 여기서 상호 작용을 편집할 수 있습니다.

모바일 또는 태블릿 보기

변경할 때마다(예: 새 섹션 디자인을 만드는 경우) 뷰포트 상단 탐색으로 이동하여 태블릿 및 모바일에서 어떻게 표시되는지 확인하는 것이 좋습니다.

업데이트된 텍스트나 이미지가 있는 템플릿 섹션만 편집하고 템플릿 클래스를 지우지 않는 경우에는 이 작업이 필요하지 않지만 템플릿을 더 깊이 사용자 정의하거나 클래스를 편집하거나 새 섹션을 만드는 경우에는 항상 모바일 및 태블릿 보기를 지속적으로 편집하여 모든 것이 완벽하게 보이도록 하는 것이 좋습니다.

메타 제목, 설명 및 추천 이미지 편집하기

페이스북, 트위터 등 어느 곳에서든 웹사이트를 공유할 때 표시되는 제목, 설명 및 이미지를 사용자 지정하려면 왼쪽 사이드바의 페이지 섹션으로 이동하여 사용자 지정하려는 페이지의 작은 설정 아이콘을 클릭하면 이러한 모든 설정이 표시됩니다.

페이지 단위로 변경하는 것이 중요합니다.

백업

웹사이트가 마음에 들지 않거나 템플릿을 보기 좋게 만드는 데 필요한 중요한 클래스를 삭제했거나 어떤 이유로든 이전 버전으로 돌아가고 싶은 경우와 같이 문제가 발생하면 언제든지 백업 섹션으로 이동할 수 있습니다.

왼쪽 사이드바의 설정 섹션에서 찾을 수 있으며, 모든 자동 또는 수동 백업을 확인할 수 있습니다. 클릭 한 번으로 이전 백업으로 복원할 수 있습니다.

코인 엑스 웹플로우 템플릿 지원

위에서 볼 수 있듯이 코인 엑스는 모범 사례를 사용하여 웹플로우를 기반으로 제작되었기 때문에 템플릿을 매우 쉽게 편집하고 필요에 맞게 사용자 정의할 수 있습니다.

그러나 문제를 발견하거나 도움이 필요하거나 인사하고 싶은 경우 언제든지 다음 주소로 이메일을 보내주십시오. [이메일 보호] - 기꺼이 도와드리겠습니다.

맞춤형 디자인 및 개발

반면에 독특하고 개인화된 버전의 Coin X를 구축하는 데 도움이 필요하거나 Webflow에서 처음부터 디자인 및 개발된 놀라운 웹사이트를 구축하는 데 도움이 필요하면 언제든지 Webflow 디자인 및 개발 대행사에 문의하세요. 코인 엑스 웹플로우 템플릿의 놀라운 팀이 여러분을 도울 수 있습니다.