섹션 템플릿 ② 히어로·CTA

방문자가 페이지를 열면 가장 먼저 보는 곳이 히어로이고, 스크롤을 끝까지 내린 방문자에게 마지막으로 행동을 권하는 곳이 CTA(콜투액션)입니다. 에디터에는 이 두 가지를 미리 만들어 둔 템플릿이 히어로 11종, CTA 10종 들어 있습니다. 이 글에서는 어떤 템플릿이 있는지, 페이지에 어떻게 넣는지, 넣은 뒤 글자와 버튼 링크를 어떻게 고치는지 안내합니다. 섹션 추가 창을 여는 방법과 탭 구성은 별도 글에서 다룹니다.

1. 어디에 있나요

섹션 추가 창의 섹션 템플릿 탭에서 왼쪽 카테고리 목록의 히어로와 CTA를 고릅니다. 창을 처음 열면 히어로 카테고리가 먼저 선택되어 있습니다. 새 페이지의 시작 화면에서는 섹션 추가하기를, 이미 내용이 있는 페이지에서는 왼쪽 레일의 템플릿을 열고 빈 섹션 또는 템플릿 선택을 누르면 같은 창이 열립니다.

2. 히어로 템플릿 11종

모든 히어로에는 제목, 설명, 버튼이 들어 있고 아래처럼 분위기가 다릅니다.

• 그라디언트 히어로: 보라에서 파랑으로 이어지는 배경에 배지, 제목, 버튼 2개
• 좌우 분할 히어로: 흰 배경, 왼쪽에 제목·버튼 2개·수치 3칸, 오른쪽에 사진 자리
• 다크 히어로: 검은 배경, 가운데 제목과 둥근 버튼 1개, 짧은 체크 문구 3개
• 미니멀 히어로: 연한 배경에 제목과 설명, 입력칸 모양과 버튼
• 공지 + 히어로: 맨 위에 보라색 공지 띠가 있고 그 아래에 흰 배경 히어로가 이어짐
• [SaaS] 프리미엄 다크 히어로: 어두운 배경, 영문 제목, 둥근 버튼 2개, 아래쪽 로고 이름 줄
• [Editorial] 따뜻한 권위 히어로: 따뜻한 밝은 배경, 명조 계열 제목, 오른쪽에 사진과 후기 카드
• [Dev B2B] 터미널 다크 히어로: 격자 배경, 영문 제목, 설치 명령 모양의 버튼과 코드 예시 박스
• [Ecommerce] 긴급 전환 히어로: 위쪽 알림 띠, 정가와 할인가, 넓은 구매 버튼, 보장 문구, 오른쪽에 사진과 별점 카드
• [Agency] 과감한 타이포 히어로: 검은 배경에 화면을 채우는 큰 영문 제목과 아래쪽 수치 줄
• 영상 배경 히어로: 짙은 남색 배경, 상태 배지, 제목, 버튼 1개, 수치 3칸

3. CTA 템플릿 10종

CTA 카테고리를 누르면 아래 10장이 나옵니다.

• 그라디언트 CTA: 보라색 배경에 제목, 설명, 버튼 2개
• 심플 CTA 배너: 검은 띠 안에 왼쪽 문구, 오른쪽 버튼 1개
• 이메일 수집 CTA: 노란 배경에 제목, 설명, 입력칸 모양과 버튼이 한 줄로 놓임
• 좌우 분할 CTA: 보라색 배경, 왼쪽 문구, 오른쪽 버튼 2개
• 카운트다운 CTA: 일·시간·분·초 타이머와 버튼 1개
• [SaaS] 프리미엄 다크 CTA, [Dev B2B] 터미널 CTA, [Agency] 과감한 콜투액션: 어두운 배경의 영문 문구형
• [Editorial] 따뜻한 초대 CTA: 밝은 배경, 명조 계열 제목, 버튼 2개, 인용문
• [Ecommerce] 긴급 + 보장 CTA: 가격, 큰 구매 버튼, 체크 문구 4개

4. 페이지에 넣기

카드를 누르면 섹션이 바로 페이지에 들어갑니다. 왼쪽 레일에서 연 창으로 고르면 페이지 맨 아래에 붙고, 섹션 사이의 + 버튼으로 연 창에서 고르면 그 자리에 들어갑니다. 위치가 마음에 들지 않으면 섹션 옆의 위로 이동, 아래로 이동 버튼으로 한 칸씩 옮깁니다.

5. 글자 고치기

글자를 누르면 편집 상태가 되고 위쪽에 텍스트 편집 창이 열립니다. 문단이나 버튼처럼 한 덩어리 글자는 Ctrl+A로 모두 선택한 뒤 새로 입력하면 됩니다. 제목처럼 색이 다른 글자가 섞여 있으면 색이 다른 부분이 따로 선택되므로, 고칠 부분을 각각 눌러 고칩니다. 편집은 Esc 키로 마칩니다.

6. 버튼에 링크 연결하기

템플릿의 버튼에는 이동할 주소가 연결되어 있지 않습니다. 버튼을 선택하면 오른쪽 위에 작은 ⋮ 단추가 나타나는데, 누르면 툴바가 펼쳐집니다. 여기서 링크 편집을 누르면 링크 창이 열리고, URL 이동에 https://로 시작하는 주소를 넣은 뒤 Enter를 누르면 적용됩니다. 만들어 둔 팝업을 열고 싶다면 팝업 열기를 고릅니다. 열기 방식과 rel 속성 같은 세부 항목은 버튼 요소를 다룬 별도 글에서 안내합니다. 저장한 뒤 새로고침해도 문구와 링크는 유지됩니다.

버튼이 두 개인 템플릿은 두 버튼 모두 같은 방식으로 문구와 링크를 고칠 수 있습니다.

7. 사진과 타이머

좌우 분할, [Editorial], [Ecommerce] 히어로에는 샘플 사진이 들어 있습니다. 사진을 누르면 툴바에 이미지 편집 단추가 나타납니다. 사진을 바꾸는 방법은 이미지 요소를 다룬 별도 글에서 안내합니다.

카운트다운 CTA의 타이머는 ⋮ 단추를 눌러 나오는 툴바의 타이머 날짜 설정에서 고칩니다. 타이머 설정 창에서 종료 날짜와 시간을 정하고, 1시간·24시간·3일·7일 버튼으로 빠르게 맞출 수도 있습니다. 타이머가 끝났을 때의 동작은 없음, 페이지 이동, 메시지 표시, 섹션 숨기기, 타이머 숨기기 중에서 고르고, 타이머 적용을 누르면 편집 화면의 숫자가 바뀝니다. 처음에는 미리 정해 둔 날짜가 들어 있으니 원하는 날짜로 바꿔 주세요. 자세한 설정은 타이머를 다룬 별도 글에서 안내합니다.

8. 이렇게 활용해 보세요

• 히어로를 맨 위에, CTA를 맨 아래에 두고 두 곳의 버튼에 같은 주소를 연결하면 방문자가 페이지 어디에서든 같은 행동으로 이어집니다.
• 가운데에 소개·후기 같은 섹션을 넣고, 히어로와 CTA의 배경을 밝은 색과 어두운 색으로 나누면 페이지의 시작과 끝이 눈에 잘 들어옵니다.
• 영문 문구가 들어 있는 템플릿은 제목과 설명을 한글로 바꿔 쓰면 한국어 페이지에도 그대로 쓸 수 있습니다.

9. 알아 두실 점

• 템플릿에는 10K+, 340%, 17,432명, 별점, 가격, 남은 재고, 구매 인원 같은 예시 숫자와 hello@studio.com 같은 예시 주소가 들어 있습니다. 공개 전에 실제 사실에 맞게 바꾸거나 지워 주세요.
• 고친 내용은 상단의 저장을 눌러야 보관됩니다.

섹션을 넣은 뒤 페이지 색과 글꼴을 한꺼번에 바꾸는 방법은 테마를 다루는 별도 글에서 안내합니다.