HubSpot 템플릿에서 양식 중앙에 배치

가로 스페이서 모듈 또는 사용자 지정 CSS를 사용하여 HubSpot 템플릿에서 양식을 가운데에 배치할 수 있습니다.

가로 스페이서 모듈 사용

• HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
• 편집할 템플릿 이름을 파인더에서 클릭합니다.
• 오른쪽의 인스펙터에서 + 추가를 클릭하여 양식 모듈의 왼쪽과 오른쪽에 각각 하나씩 두 개의 새 가로 스페이서 모듈을 삽입합니다.

사용자 정의 CSS 사용

• HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
• 파인더에서 폴더 내에서 CSS 파일을 찾은 다음 클릭하여 편집기에서 선택합니다.
• 다음 코드를 추가하여 웹사이트의 모든 양식을 중앙에 배치합니다:

/* To center the form within its module and applying a max-width */ form.hs-form, .hs_cos_wrapper .form-title { max-width: 600px; display: block; margin: 0 auto; } /* To center the form title within a form module */ .hs_cos_wrapper .form-title { text-align: center; } /* To center the form submit button */ .hs_submit { text-align: center; } 

• 특정 양식을 중앙에 배치하려면 템플릿의 양식 모듈에 사용자 정의 클래스를 추가한 다음 해당 클래스가 있는 모듈에만 적용되도록 CSS를 조정하면 됩니다. 예를 들어 템플릿의 양식 모듈에 사용자 정의 클래스 center-form을 추가하는 경우 CSS는 다음과 같이 표시됩니다:

/* To center the form within its module and applying a max-width */ form.hs-form, .center-form .hs_cos_wrapper .form-title { max-width: 600px; display: block; margin: 0 auto; } /* To center the form title within a form module */ .center-form .hs_cos_wrapper .form-title { text-align: center; } /* To center the form submit button */ .center-form .hs_submit { text-align: center; }

• 오른쪽 상단에서 변경 사항 게시를 클릭합니다.