사용자 지정 코딩 템플릿 구축

개발자는 HTML + HubL을 사용하여 블로그, 웹사이트 페이지, 랜딩 페이지 및 이메일 템플릿을 처음부터 만들 수 있습니다. 드래그 앤 드롭 템플릿 레이아웃을 HTML로 복제한 다음 코딩된 템플릿으로 사용자 지정할 수도 있습니다.

개발자 문서에서 사용자 지정 에셋 디자인에 대해 자세히 알아보세요.

시작하기 전에

이 기능으로 작업을 시작하기 전에 미리 수행해야 할 단계와 이 기능의 제한 사항 및 사용 시 발생할 수 있는 결과를 완전히 이해해야 합니다.

요구 사항 이해

• 디자인 관리자에서 템플릿을 만들고 편집할 수 있는 디자인 도구 권한이 있는지 확인합니다.
• 글로벌 웹 자산 및 블로그/웹사이트 설정을 편집해야 하는 경우글로벌 콘텐츠 및 테마 설정 과 웹사이트 설정 권한도 있는 것이 좋습니다.

제한 사항 및 고려 사항 이해

• 이메일 템플릿을 만들려면 마케팅 허브 프로페셔널 또는 엔터프라이즈 구독이 필요합니다. 콘텐츠 허브 계정은 드래그 앤 드롭 이메일 편집기를 사용하여 이메일을 만들 수 있습니다.
• 사용자 지정 코딩 템플릿은 미리 정의된 많은 변수를 사용할 수 있습니다. 이러한 변수 중 일부는 이메일 및 페이지를 만드는 데 필수이며, 다른 변수는 선택 사항입니다. 필수 이메일, 웹사이트 및 랜딩 페이지 HubL 변수를 추가하는 방법에 대해 자세히 알아보세요.

새 HTML + HubL 파일 만들기

1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
2. 파인더 상단에서 파일 드롭다운 메뉴를 클릭하고 새 파일을 선택합니다.

3. 대화 상자에서 오늘 무엇을 빌드하시겠습니까? 드롭다운 메뉴를 클릭하고 HTML + HubL을 선택합니다.

4. 무엇을 빌드하시나요? 필드에서 옵션을 선택합니다:
   • 템플릿: 웹사이트 페이지, 랜딩 페이지, 블로그 글 또는 이메일에 표시될 콘텐츠의 레이아웃과 구조를 정의합니다.
   • 템플릿 부분: 재사용 가능한 코드 또는 다른 여러 템플릿에 포함될 수 있는 코드 조각입니다.
5. 템플릿 유형 드롭다운 메뉴를 클릭하고 사용자 정의 코딩된 템플릿의 유형 (페이지, 블로그 글/목록, 이메일 또는 시스템 페이지)을 선택합니다. 템플릿 유형에 대해 자세히 알아보세요.
6. 파일 이름 필드에 파일 이름을 입력합니다.
7. 파일 위치를 업데이트하려면 파일 위치 섹션에서 변경을 클릭하고 폴더를 선택합니다 .
8. 완료했으면 만들기를 클릭합니다.

템플릿에 HTML + HubL 추가하기

새 파일을 구성한 후에는 코드 편집기로 이동하여 사용자 정의 코드를 추가하고 라이브 페이지에 어떻게 표시되는지 미리 볼 수 있습니다.

HTML + HubL 추가

1. 템플릿의 HTML을 입력합니다. 사용자 정의 코딩 템플릿에 CSS 및 JavaScript 파일을 추가하는 방법에 대해 자세히 알아보세요.
2. HTML + HubL이 렌더링되는 방식을 표시하려면 왼쪽 상단의 출력 표시 스위치를 켭니다. 오른쪽에 렌더링된 미리보기가 있는 패널이 열립니다.

필요한 HTML + HubL 추가하기

사용자 정의 코딩 템플릿이 작동하려면 특정 HTML 또는 HubL 변수가 필요합니다. 이러한 필수 변수 중 하나라도 누락된 경우 템플릿을 게시하려고 할 때 오류 메시지가 표시될 수 있습니다.

• 페이지 및 블로그 템플릿에는 다음 변수가 필요합니다:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• 이메일 템플릿은 CAN-SPAM 규정을 준수하기 위해 다음 변수가 필요합니다:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• 이메일 템플릿이 특정 이메일 클라이언트에서 미리 보기 텍스트를 표시하려면 다음 코드가 필요합니다:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

템플릿을 HTML로 복제

템플릿을 처음부터 새로 만드는 것 외에도 블로그, 웹사이트 페이지 및 랜딩 페이지용 드래그 앤 드롭 템플릿을 HTML로 복제할 수도 있습니다.

1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
2. 파인더에서 복제하려는 템플릿의 이름을 클릭합니다.
3. 작업 드롭다운 메뉴를 클릭하고 HTML로 복제를 선택합니다. 원본 파일과 동일한 폴더에 HTML 파일이 생성됩니다.

템플릿 미리보기 및 게시

템플릿을 만든 후에는 라이브 페이지에 템플릿이 어떻게 표시되는지 미리 본 다음 게시할 수 있습니다.

1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
2. 파인더에서 미리 보거나 게시하려는 템플릿의 이름을 클릭합니다.
3. 오른쪽 상단에서 미리 보기 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
   • 표시 옵션이 있는 실시간 미리보기를 선택하면 뷰포트 사전 설정을 선택하여 템플릿이 다른 디바이스에 표시되는 것처럼 미리 볼 수 있습니다.
   • 표시 옵션 없이 미리 보기를 선택하면 템플릿이 브라우저에 표시되는 방식만 미리 볼 수 있습니다.
4. 완료했으면 변경 사항 게시를 클릭합니다.
5. 코드 오류가 있는 경우 오류 메시지가 표시됩니다. 코드 편집기 아래의 오류 콘솔에서 이러한 오류에 대한 자세한 정보를 검토하세요:

• • 페이지 상단의 오류 메시지에서 오류 콘솔을 클릭하여 코드 편집기 아래의 콘솔을 엽니다.
  • 또는 코드 편집기 왼쪽 하단으로 이동하여 세부 정보 표시를 클릭합니다.