테마는 HubSpot에서 웹사이트 페이지 및 블로그에 적용할 수 있는 스타일 및 템플릿 집합입니다. 웹사이트가 일관성 있게 보이도록 하기 위해 동일한 테마를 사용하는 모든 페이지의 스타일 설정은 테마 설정에서 관리됩니다.
시작하기 전에
테마 설정은 테마 템플릿을 사용하는 페이지의 기본 색상, 글꼴 및 버튼 스타일을 제어합니다.
참고: 테마 설정에서 사용할 수 있는 스타일 옵션은 테마를 만든 웹 개발자가 포함시킨 테마 필드 옵션에 따라 달라집니다.
웹사이트의 일부 콘텐츠는 다음을 포함하여 계정 설정의 다른 부분에서 관리됩니다:
테마 설정 편집
해당 테마를 사용하는 모든 페이지 또는 글의 콘텐츠 편집기에서 테마의 설정을 편집할 수 있습니다:
-
콘텐츠로 이동합니다:
- 웹사이트 페이지로 이동합니다: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
- 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
- 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
- 콘텐츠의 이름을 클릭합니다.
- 콘텐츠 편집기에서 편집 메뉴를 클릭하고 테마를 선택합니다.
색상
테마의 색상 설정은 테마 템플릿에 포함된 모든 요소에 기본, 보조 및 배경색을 적용합니다. 이러한 스타일은 웹사이트의 모든 요소에 적용됩니다. 제목, 글꼴 및 링크에 대한 보다 구체적인 설정을 사용자 정의하려면 기타 설정 옆의 편집을 클릭합니다.
글꼴
웹사이트의 제목, 양식, 버튼 및 본문 텍스트에 적용할 기본 및 보조 글꼴을 선택합니다. 모든 Google 글꼴이 지원됩니다. 색상 풍선을 클릭하여 기본 또는 보조 글꼴 색상을 사용자 지정합니다. 간단한 색상 값을 선택하거나 고급 탭을 클릭하고 색상 선택기를 사용하여 특정 16진수 값을 선택할 수 있습니다.
간격
간격에 대한 테마 설정은 페이지 콘텐츠의 최대 너비와 페이지의 다른 요소 사이의 세로 간격을 제어합니다.
추가 설정
테마 설정 내에서 페이지의 특정 스타일에 대한 세부 설정을 추가로 지정할 수 있습니다. 테마의 스타일 옵션은 테마의 코딩된 템플릿에 포함된 테마 필드를 기반으로 합니다. 원하는 설정을 찾을 수 없는 경우 템플릿 디자이너에게 문의하여 템플릿에 어떤 옵션이 포함되어 있는지 확인하세요.
아래 예는 테마에 포함될 수 있는 추가 기능의 유형에 대한 일반적인 가이드입니다. 템플릿에 포함될 수 있는 테마 필드에 대한 전체 참조는 디자이너 문서를 참조하세요.
참고: 페이지의 서식 있는 텍스트 모듈 내에서 또는 페이지 편집기에서 테마의 기본 스타일을 재정의하여 글꼴, 색상 및 스타일을 사용자 정의할 수 있다는 점을 기억하세요. 이 테마를 사용하는 모든 페이지에 적용하려는 경우에만 이러한 스타일을 수정하세요.
타이포그래피
타이포그래피 설정에서 템플릿의 특정 요소에 적용되는 글꼴을 제어할 수 있습니다. 모든 Google 글꼴이 지원됩니다. 테마의 특정 제목, 글꼴 또는 링크에 대해 사용자 정의 색상을 선택할 수도 있습니다.
- 제목: 테마에 포함된 모든 제목에 대해 정확한 글꼴, 색상, 크기 및 스타일을 사용자 정의할 수 있습니다.
- 본문: 페이지 본문의 글꼴, 색상 또는 텍스트 크기만 사용자 정의할 수 있습니다.
- 링크: 웹사이트에 있는 링크의 기본 색상을 사용자 정의합니다. 방문자가 링크를 마우스로 가리키거나 클릭할 때 링크의 색상과 동작을 사용자 지정할 수도 있습니다.
버튼
페이지와 블로그의 버튼에 사용자 정의 색상, 글꼴 및 스타일을 설정할 수 있습니다. 특정 페이지의 페이지 편집기에서 웹사이트 개발자가 테마를 만든 방식에 따라 버튼 크기나 유형을 바꿀 수 있습니다.
- 크기: 페이지에서 작은 버튼, 일반 버튼, 큰 버튼의 크기를 지정합니다.
- 기본: 기본 버튼은 방문자가 페이지에서 수행하는 가장 중요한 작업을 위한 버튼입니다. 이 색상은 눈에 잘 띄고 방문자의 주의를 끌 수 있어야 합니다.
- 보조: 보조 버튼은 페이지에 이미 기본 버튼이 하나 있는 경우 상대적으로 덜 중요한 작업에 사용됩니다. 보조 버튼은 일반적으로 우선순위가 낮은 작업을 위한 페이지에 적용됩니다.
- 단순: 페이지의 단순 버튼 모듈에 적용되는 기본 글꼴 및 스타일입니다.
양식
양식의 기본 색상, 글꼴, 텍스트 스타일 및 버튼 스타일을 사용자 지정합니다.
- 제목: 전체 양식 위에 표시되는 텍스트 필드에 적용되는 스타일입니다. 여기에는 일반적으로 인사말과 양식 작성에 대한 지침이 포함됩니다. 양식의 이러한 스타일은 테마 설정에서만 관리할 수 있습니다.
- 레이블: 양식 필드 위에 표시되는 레이블에 적용되는 스타일입니다.
- 필드: 양식 필드 자체의 이름에 적용되는 스타일입니다.
- 도움말 텍스트: 각 양식 필드 안에 표시되는 샘플 콘텐츠로, 방문자가 제출해야 하는 정보 유형을 나타냅니다.
- 제출: 양식에 적용할 버튼 스타일과 크기를 선택합니다.
- 배경색: 양식에 적용되는 배경색입니다.
- 테두리: 양식 필드 주변의 테두리 색상입니다.
- 패딩: 페이지에서 양식 주위의 간격입니다.
표
페이지에 추가된 표의 기본 색상, 글꼴, 간격 및 테두리를 설정합니다.
- 표 머리글: 표 머리글의 글꼴에 적용되는 색상과 표의 첫 번째 행 전체 너비에 걸친 기본 배경색입니다. 표 헤더의 가장자리 하단에 강조 색상을 위한 아래쪽 테두리를 설정할 수도 있습니다.
- 글꼴 색상: 표에 있는 글꼴의 기본 색상입니다.
- 배경색: 표의 셀 배경에 대한 기본 배경색입니다.
- 테두리: 표의 기본 테두리 색상, 너비 및 스타일입니다.
- 패딩: 페이지에서 표의 위와 아래 공간의 양입니다.
페이지의 서식 있는 텍스트 모듈에 표를 삽입하는 방법에 대해 자세히 알아보세요.
웹사이트 헤더
이 설정은 탐색 메뉴를 포함하여 페이지 헤더에 표시되는 색상과 글꼴을 제어합니다. 계정 설정에서 탐색 메뉴를 설정하는 방법을 알아보세요 . 테마 템플릿에 회사 로고를 설정하려면 브랜딩 섹션의계정 기본값에 로고 이미지를 추가합니다.
- 메뉴: 방문자가 메뉴 항목을 보거나 마우스오버하거나 클릭할 때 표시되는 탐색 메뉴의 글꼴 색상과 스타일을 선택합니다. 이러한 스타일은 테마 설정에서만 관리할 수 있습니다.
- 배경색: 웹사이트 헤더의 배경색을 선택합니다.
- 하단 테두리: 원하는 경우 웹사이트 헤더 아래에 테두리로 수평선을 추가할 수 있습니다. 스타일을 선택하여 하단 테두리를 활성화한 다음 테두리의 색상과 너비를 선택합니다.
바닥글
이 설정은 탐색 메뉴를 포함하여 페이지 바닥글에 표시되는 색상과 글꼴을 제어합니다. 계정 설정에서 탐색 메뉴를 설정하는 방법을 알아보세요 .
- 메뉴: 테마 바닥글의 탐색 메뉴에 사용할 글꼴의 색상과 스타일을 선택합니다. 방문자가 메뉴 항목을 보거나 마우스를 가져가거나 클릭할 때의 색상을 사용자 지정할 수 있습니다. 이러한 스타일은 테마 설정에서만 관리할 수 있습니다.
- 배경 색상: 웹사이트 바닥글의 배경 색상을 선택합니다.
- 하단 테두리: 원하는 경우 웹사이트 바닥글 아래에 테두리로 가로선을 추가할 수 있습니다. 스타일을 선택하여 하단 테두리를 활성화한 다음 테두리의 색상과 너비를 선택합니다.
블로그
이 설정은 숙소 페이지 템플릿과 블로그 글 템플릿의 스타일을 제어합니다.
배너 이미지: 블로그 템플릿 헤더의 배경에 사용할 이미지를 업로드합니다. 블로그 홈페이지에 사용할 이미지와 모든 블로그 글에 적용할 이미지를 하나씩 선택할 수 있습니다.
태그: 블로그 글 상단에 표시되는 블로그 태그의 기본 색상, 글꼴 및 스타일을 설정합니다.
