레이아웃 편집기를 사용하여 템플릿 구성 및 사용자 지정하기

디자인 관리자의 레이아웃 편집기를 사용하여 드래그 앤 드롭 템플릿을 구성하고 사용자 지정할 수 있습니다. 모듈, 그룹 및 열을 정렬하여 페이지 전체에서 콘텐츠가 구조화되는 방식을 제어할 수 있습니다. 또한 콘텐츠 제작자는 페이지 편집기에서 더 많은 제어 기능을 사용할 수 있습니다.

시작하기 전에

디자인 관리자의 레이아웃 편집기를 사용하여 페이지를 구성하고 사용자 지정하기 전에 요구 사항과 고려 사항을 검토하세요.

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

• 템플릿에 대한 변경 사항은 해당 템플릿을 사용하는 모든 콘텐츠에 적용됩니다.
• 유연한 열과 같은 일부 기능은 페이지 템플릿에서만 사용할 수 있습니다.

템플릿 구조화

레이아웃 편집기를 사용하여 템플릿 내에서 콘텐츠가 구성되는 방식을 구조화할 수 있습니다.

1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
2. 파인더에서 템플릿을 클릭하여 레이아웃 편집기에서 엽니다.

모듈 추가 및 정렬

모듈은 템플릿 레이아웃의 구성 요소입니다. 모듈을 다른 모듈 옆으로 드래그하면 열이 만들어집니다. 모듈을 다른 모듈 위로 드래그하면 모듈이 그룹화됩니다.

1. 인스펙터에서 + 추가를 클릭합니다.
2. 텍스트를 입력하여 모듈을 검색한 다음 모듈을 클릭합니다.
3. 모듈을 레이아웃 편집기로 드래그합니다.

열 너비 변경

열 너비를 변경하려면 다음과 같이 하세요:

1. 레이아웃 편집기에서 두 모듈 사이를 마우스로 가리킵니다.
2. 클릭하고 가로로 드래그하여 열 너비를 조정합니다.

모듈 그룹화

모듈을 그룹화하여 템플릿의 섹션을 구성합니다.

모듈을 그룹화하려면 다음과 같이 하세요:

1. 레이아웃 편집기에서 모듈을 선택합니다.
2. Control (Windows) 또는 Command (Mac) 키를 길게 누른 상태에서 추가 모듈을 선택합니다.
3. 인스펙터에서 groupModule 모듈 그룹화 아이콘을 클릭합니다.

참고: 모듈 그룹은 섹션 구분선을 가로지르거나 부분적으로 선택된 모듈 그룹을 포함할 수 없습니다.

모듈을 가로로 분할하기

모듈을 분할하면 모듈이 반으로 나뉘어 두 개의 모듈이 생성됩니다.

모듈을 분할하려면 다음과 같이 하세요:

1. 레이아웃 편집기에서 모듈을 클릭합니다.

2. 인스펙터에서 splitModule 모듈 분할 아이콘을 클릭합니다.

모듈 가운데 배치

가로 스페이서를 사용하여 페이지에서 모듈과 그룹을 가운데에 배치하거나 양쪽에 빈 공간을 추가합니다.

가로 스페이서를 추가하려면 다음과 같이 하세요:

1. 검사기에서 + 추가를 클릭합니다.

2. 검색 필드에 가로 스페이서를 입력합니다. 그런 다음 가로 스페이서 모듈을 레이아웃 편집기에서 템플릿의 위치로 드래그합니다.

3. 가로 스페이서의 크기를 변경하려면 다른 모듈과 구분하는 열의 너비를 변경합니다.

4. 모듈 또는 그룹을 중앙에 배치하려면 양쪽에가로 스페이서 모듈을 추가합니다.

유연한 열 추가하기

유연한 열은 콘텐츠 작성자가 페이지 수준에서 콘텐츠를 더 쉽게 관리할 수 있도록 설계되었습니다. 유연한 열이 HubSpot 페이지 템플릿에 추가되면 사용자는 개별 페이지 편집기 내에서 모듈을 추가, 제거 및 재정렬할 수 있는 옵션이 제공됩니다. 이 기능을 사용하면 디자이너는 템플릿을 더 적게 만들 수 있지만 마케터는 필요에 맞게 각 페이지를 유연하게 사용자 지정할 수 있습니다.

1. 인스펙터에서 + 추가를 클릭합니다.

2. 검색 필드에 유연한 열을 입력합니다. 그런 다음 레이아웃 편집기에서 유연한 열 모듈을 템플릿의 위치로 드래그합니다.

템플릿 사용자 지정

템플릿의 레이아웃을 구성한 후에는 모듈을 교체하고 다른 템플릿을 사용자 정의할 수 있습니다.

모듈 옵션 편집

모듈의 편집 옵션에는 스타일, 기본 콘텐츠가 포함되며 모듈의 특정 유형에 따라 다를 수 있습니다. 모듈 CSS 및 기본 콘텐츠 및 설정 편집에 대해 자세히 알아보세요.

1. 레이아웃 편집기에서 모듈을 클릭합니다.
2. 인스펙터에서 모듈의 옵션을 사용자 지정합니다.

모듈 바꾸기

템플릿에 모듈을 추가한 후에는 다른 모듈로 교체하도록 선택할 수 있습니다.

1. 레이아웃 편집기에서 모듈을 마우스 오른쪽 버튼으로 클릭한 다음 모듈 교체를 선택합니다.

2. 팝업에서 원래 모듈을 대체할 모듈을 선택합니다.

전역 모듈로 변환

템플릿의 모듈을 여러 템플릿에서 사용할 수 있는 전역 모듈로 변환합니다. 특정 방식으로 모듈의 스타일을 지정했거나 모듈에 다른 템플릿에서 재사용하려는 기본 콘텐츠가 있는 경우 이 방법을 사용합니다.

1. 레이아웃 편집기에서 모듈을 클릭합니다.
2. 인스펙터에서 더 보기 드롭다운 메뉴를 클릭하고 전역 모듈로 변환을 선택합니다.
3. 대화 상자에서 글로벌 모듈 이름을 입력한 다음 만들기를 클릭합니다.

모듈 삭제

1. 레이아웃 편집기에서 모듈을 클릭합니다.

2. 인스펙터에서 delete 휴지통 아이콘을 클릭합니다.

파인더에서 템플릿 관리

모듈 옵션 외에도 템플릿과 관련된 몇 가지 작업을 수행할 수 있습니다.

1. 파인더에서 템플릿의 이름을 클릭합니다.
2. 작업 드롭다운 메뉴를 클릭하고 옵션을 선택합니다:
   • 다른 계정으로 복사: 템플릿을 내가 사용자로 있는 다른 계정으로 복사합니다. 마켓플레이스에서 구매한 템플릿은 다른 포털로 복사할 수 없습니다.
   • 템플릿 복제: 템플릿의 정확한 복제본을 만들 수 있으며 기존 템플릿의 변형을 만들 때 유용합니다.
   • HTML로 복제: 드래그 앤 드롭 템플릿의 별도의 HTML 버전을 만듭니다. 마크업을 더 세밀하게 제어해야 하거나 템플릿 코딩 방식에 대해 자세히 알고 싶은 경우에 유용합니다.
   • 템플릿소스 보기: 템플릿의 소스 코드 HTML을 봅니다. HTML로 복제 옵션과 달리 템플릿의 별도의 HTML 버전이 생성되지 않습니다.
   • 템플릿 이름 바꾸기: 템플릿의 내부 이름을 편집합니다.
   • 종속항목 표시: 현재 템플릿을 사용하고 있는 모든 페이지, 이메일 또는 블로그를 봅니다.
   • 수정 내역 표시: 템플릿의 수정 내역을 보고 템플릿을 이전에 게시한 버전으로 되돌리도록 선택할 수 있습니다.
   • 이메일/페이지 만들기: 템플릿에서 바로 이메일이나 페이지를 만듭니다.
   • 템플릿 삭제: 템플릿을 삭제합니다. 템플릿을 삭제한 후에는 30일 동안 사용할 수 있으며 그 이후에는 영구적으로 삭제됩니다. 템플릿을 복원하려면 고객지원팀에 문의해야 합니다.