지식베이스 테마 사용자 지정하기

브랜드 이미지에 맞춰 지식베이스의 디자인과 콘텐츠를 맞춤 설정하고, 방문자에게 일관된 탐색 경험을 제공하세요. 테마 편집기를 사용하여 색상, 서체, 홈페이지 및 문서 레이아웃, 헤더와 푸터 스타일을 수정할 수 있습니다. 글로벌 콘텐츠 편집기를 사용하여 로고, 메뉴, 지원 옵션, 소셜 링크 등 헤더와 푸터의 콘텐츠를 수정할 수 있습니다.

시작하기 전에

지식베이스 테마를 사용자 지정하기 전에 다음 요구 사항과 고려 사항을 검토하십시오.

제한 사항 및 고려 사항 이해하기

• 이 도구들은 마이그레이션된 지식베이스에서만 사용할 수 있습니다. 지식베이스 마이그레이션에 대해 자세히 알아보세요.
• 아직 마이그레이션되지 않은 지식베이스의 경우, 레거시 지식베이스 생성 및 사용자 지정에 대해 자세히 알아보세요.
• 디자인 관리자나 사용자 지정 테마에서는 지식베이스 사용자 지정이 지원되지 않습니다. 더 심층적인 사용자 지정을 원하시면, 사이트의 헤더 및 푸터를 포함하여 지식베이스 설정에 코드 스니펫을 추가할 수 있습니다.

지식베이스 테마 스타일 사용자 지정

지식베이스 테마 편집기를 사용하여 지식베이스에 일관된 시각적 스타일과 레이아웃을 적용하세요. 색상과 타이포그래피를 업데이트하고, 홈페이지 및 문서 페이지의 레이아웃을 선택하며, 헤더와 푸터 스타일을 구성할 수 있습니다.

1. HubSpot 계정에서 더 보기를 클릭한 다음 서비스 > 기술 자료로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 서비스 > 기술 자료로 이동하세요.
2. 오른쪽 상단의 ‘구성’ 드롭다운 메뉴를 클릭하고 ‘테마’를 선택하세요.

색상 사용자 지정

지식베이스 테마의 색상 설정은 테마 템플릿에 포함된 모든 요소에 기본색, 보조색, 강조색 및 본문색을 적용합니다. 이러한 스타일은 지식베이스의 모든 요소에 적용됩니다.

1. 테마 편집기에서 왼쪽 사이드바의 ‘색상’ 섹션을 클릭합니다.
2. 각 색상 유형(예: 기본색)에 대해 색상 선택기를 클릭하고 기본색, 보조색, 강조색 및 본문색 필드에 사용할 색상을 선택합니다. 기본적으로 브랜드 색상이 표시됩니다.

서체 사용자 지정

지식베이스의 제목, 본문 및 URL 링크에 적용할 기본 및 보조 글꼴을 선택하세요.

1. 테마 편집기에서 왼쪽 사이드바의 ‘타이포그래피’를 클릭합니다.
2. '주' 및 '보조' 필드에서 글꼴 드롭다운 메뉴를 클릭하고 글꼴을 선택하세요. 글꼴 색상을 변경하려면 색상 선택기를 클릭하고 글꼴 색상을 선택하세요. 선택한 글꼴에 따라 추가 글꼴 스타일 옵션(예: 글꼴 굵기)을 사용할 수 있습니다.
3. 제목, 본문 또는 링크 글꼴을 편집하려면 ‘제목(H1-H6)’, ‘본문’ 또는 ‘링크’ 섹션을 클릭하세요. 그런 다음 글꼴 드롭다운 메뉴를 클릭하고 글꼴을 선택하세요. 글꼴 색상을 변경하려면 색상 선택기를 클릭하고 글꼴 색상을 선택하세요.

페이지 레이아웃 사용자 지정

지식베이스 홈페이지 및 문서 페이지의 레이아웃을 선택하세요. 사용 가능한 레이아웃 옵션과 스타일 설정은 페이지 유형에 따라 다릅니다.

홈페이지 레이아웃 사용자 지정

1. 테마 편집기에서 왼쪽 상단의 ‘보기’ 드롭다운 메뉴를 클릭하고 ‘지식베이스 홈페이지’를 선택합니다.
2. 왼쪽 사이드바에서 '홈페이지' 섹션을 클릭하고 '타일'이나 '미니멀'과 같은 레이아웃 옵션을 선택합니다.

기사 페이지 레이아웃 사용자 지정

1. 테마 편집기에서 왼쪽 상단의 ‘보기’ 드롭다운 메뉴를 클릭하고 ‘지식 기반 문서’를 선택합니다.
2. 왼쪽 사이드바에서 ‘문서’ 섹션을 클릭하고 ‘왼쪽 사이드바’ 또는 ‘오른쪽 사이드바’와 같은 레이아웃 옵션을 선택합니다.

헤더 및 푸터 스타일 사용자 지정

지식베이스 테마의 헤더와 푸터 스타일을 너비, 색상, 글꼴, 메뉴 및 기타 요소를 포함하여 사용자 지정할 수 있습니다. 사용 가능한 옵션은 섹션에 따라 다릅니다.

헤더 스타일 사용자 지정

• 헤더 너비: ‘전체 너비 ’ 또는 ‘콘텐츠 너비’를 선택합니다.
• 상단 바: 배경색, 기본 글꼴 및 마우스 오버 시 글꼴을 선택합니다.
• 언어 전환기: 색상 선택기를 클릭하고 색상을 선택합니다.
• 메뉴: 기본 글꼴, 호버 글꼴, 배경색, 간격 및 드롭다운 스타일을 선택합니다.
• 버튼: 글꼴, 텍스트 변환, 배경색, 테두리 스타일, 모서리 반경 및 호버 글꼴을 선택합니다.
• 검색 창: 색상이나 이미지 등 배경 유형을 선택하고, 간격, 레이블 텍스트 및 입력 텍스트 스타일을 구성합니다.

푸터 스타일 사용자 지정

• 푸터 너비: ‘전체 너비 ’ 또는 ‘콘텐츠 너비’를 선택합니다.
• 배경: 색상 선택기를 클릭하고 색상을 선택합니다.
• 메뉴: 기본 글꼴과 마우스 오버 시 글꼴을 선택합니다. 글꼴 색상을 변경하려면 색상 선택기를 클릭하고 글꼴 색상을 선택합니다.
• 텍스트: 글꼴을 선택합니다.
• 소셜 아이콘: 아이콘 크기, 아이콘 모양, 아이콘 색상, 배경색 및 정렬 방식을 선택하세요.

테마 변경 사항 미리 보기 및 게시

변경 사항을 게시하기 전에 다양한 템플릿, 언어 및 기기에서 테마를 미리 확인하세요.

1. HubSpot 계정에서 더 보기를 클릭한 다음 서비스 > 기술 자료로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 서비스 > 기술 자료로 이동하세요.
2. 오른쪽 상단의 [구성 ] 드롭다운 메뉴를 클릭하고 [ 테마]를 선택하세요.
3. 테마 편집기에서 왼쪽 상단의 ‘미리 보기’를 클릭하세요.
4. 샘플 콘텐츠가 포함된 템플릿을 보려면 왼쪽 상단의 ‘보기 ’ 드롭다운 메뉴를 클릭하고 템플릿을 선택하세요.

4. 다른 언어로 템플릿을 확인하려면 왼쪽 상단의 언어 드롭다운 메뉴를 클릭하고 언어를 선택하십시오.

5. 템플릿이 다양한 기기에서 어떻게 표시되는지 확인하려면 오른쪽 상단의 기기 아이콘을 클릭하세요.

6. 작업이 끝나면 왼쪽 상단의 ‘뒤로’를 클릭하세요.

7. 변경 사항을 적용하려면 오른쪽 상단의 ‘테마 게시’를 클릭하세요.

전역 헤더 및 푸터 콘텐츠 편집

전역 콘텐츠 편집기를 사용하여 지식 기반 헤더와 푸터에 표시되는 콘텐츠를 사용자 지정하세요.

헤더 내용 편집

로고, 탐색 메뉴, 지원 옵션, 버튼, 언어 선택기 등 지식베이스 전체 페이지에 표시되는 헤더 콘텐츠를 사용자 지정할 수 있습니다.

1. HubSpot 계정에서 더 보기를 클릭한 다음 서비스 > 기술 자료로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 서비스 > 기술 자료로 이동하세요.
2. 오른쪽 상단의 '구성' 드롭다운 메뉴를 클릭하고 '헤더'를 선택합니다.
3. 전역 콘텐츠 편집기에서 왼쪽 사이드바에 있는 ‘ siteTree ’ 콘텐츠 아이콘을 클릭합니다.
4. 왼쪽 사이드바에서 ‘웹사이트 헤더 ’ 모듈을 클릭하고 다음 항목 중 하나를 선택합니다.
   • 로고: ‘기본 로고 재정의’ 토글을 켜거나 ‘이 도메인의 기본 로고 편집’을 클릭합니다. 회사 이름을 표시하려면 ‘로고가 설정되지 않았을 때 회사 이름 표시’ 토글을 켭니다.
   • 추가 지원 옵션: ‘고객 포털 링크 표시’, ‘제한된 콘텐츠에 대한 로그인 표시’ 또는 ‘지원 양식’ 토글 스위치를 설정합니다.
   • 메뉴: 메뉴 와 최대 레벨을 선택합니다.
   • 버튼: ‘추가 버튼 ’ 확인란, ‘링크 대상’ 및 ‘링크 유형’을 선택합니다.
   • 언어 전환기: ‘언어 전환기 추가 ’ 확인란과 ‘표시 모드’를 선택합니다.
5. 완료되면 오른쪽 상단의 [#]개 자산에 게시를 클릭합니다.

푸터 콘텐츠 편집

로고, 메뉴, 주소, 소셜 링크, 저작권 문구 등 지식베이스 페이지 전반에 표시되는 푸터 내용을 사용자 지정할 수 있습니다.

1. HubSpot 계정에서 더 보기를 클릭한 다음 서비스 > 기술 자료로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 서비스 > 기술 자료로 이동하세요.
2. 오른쪽 상단의 ‘구성(Configure )’ 드롭다운 메뉴를 클릭하고 ‘푸터(Footer) ’를 선택합니다.
3. 전역 콘텐츠 편집기에서 왼쪽 사이드바에 있는 ‘ siteTree ’ 콘텐츠 아이콘을 클릭합니다.
4. 왼쪽 사이드바에서 모듈을 클릭하여 내용을 편집합니다.
   • 푸터 메뉴: ‘메뉴(Menu)’ 드롭다운 메뉴를 클릭하고 메뉴를 선택합니다. 모든 지식베이스 페이지에 푸터 메뉴를 표시하려면 ‘메뉴 표시(Show menu )’ 확인란을 선택합니다.
   • 로고: ‘기본 로고 재정의’ 스위치를 켜거나 ‘이 도메인의 기본 로고 편집’을 클릭합니다.
   • 푸터 주소: ‘확장 보기에서 편집’을 클릭하고 푸터 주소를 입력합니다.
   • 소셜 팔로우: 소셜 링크 위에 마우스를 올린 후 ' editIcon ' 편집 아이콘을 클릭합니다. '링크' 드롭다운 메뉴를 클릭하고 옵션을 선택합니다.
   • 푸터 저작권: 확장 보기에서 ‘편집’을 클릭하고 푸터 저작권을 입력합니다.
5. 완료되면 오른쪽 상단의 [#] 자산에 게시를 클릭하세요.