여기에서 시작

스타일링

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

색상

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

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

글꼴

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

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

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

그래픽 및 아이콘

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

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

정적 페이지

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

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

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

동적 콘텐츠(CMS)

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

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

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

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

제품(이커머스)

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

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

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

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

유용한 참고 사항

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

상호 작용

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

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

모바일 또는 태블릿 보기

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

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

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

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

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

백업

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

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