5. 레이아웃·여백과 완성형 블록 편집하기
여러 요소의 위치와 간격을 정리해 읽기 쉬운 페이지를 만듭니다. 요소를 담는 부모 영역과 그 안의 자식 요소를 구분하는 것이 중요합니다.
1단계. 구조에서 편집 대상을 확인하기
- 왼쪽 구조를 클릭합니다.
- 부모 영역을 펼쳐 안에 들어 있는 제목·텍스트·이미지 등을 확인합니다.
- 블록 전체의 폭·배경·배치는 부모를, 문구나 사진은 해당 자식을 선택하여 바꿉니다.
2단계. 레이아웃에 요소 넣기
- 라이브러리에서 레이아웃을 추가합니다.
- 레이아웃 안쪽 추가 위치를 선택하여 제목·텍스트·버튼 등을 넣습니다.
- 구조에서 해당 요소가 레이아웃의 자식으로 들어갔는지 확인합니다.
- 레이아웃 설정에 제공되는 열·방향·정렬·간격 항목을 조절합니다. 설정 종류는 블록에 따라 다릅니다.
3단계. 외부 여백과 내부 여백 구분하기
설정 | 용도 | 예시 |
|---|---|---|
외부 여백 | 다른 요소와의 바깥 간격 | 제목 아래 본문과 떨어뜨리기 |
내부 여백 | 요소 테두리와 안쪽 내용 사이의 간격 | 카드 안쪽 글자가 가장자리에 붙지 않게 하기 |
여백 요소 | 별도의 빈 공간을 넣기 | 두 큰 섹션 사이 간격 만들기 |
- 대상 요소를 선택하고 여백에서 외부 또는 내부 여백을 고릅니다.
- 위·아래·왼쪽·오른쪽 값을 필요한 방향만 조절합니다.
- 없음·좁게·보통·넓게 등 제공되는 프리셋을 선택한 뒤 화면을 보고 조정할 수 있습니다.
- 모바일에서 좌우 여백이 너무 커져 내용이 좁아지지 않는지 확인합니다.
4단계. 완성형 블록 활용하기
- 라이브러리에서 히어로·기능·콘텐츠·가격·CTA·고객 후기·FAQ·문의 등 필요한 그룹을 엽니다.
- 목적에 맞는 블록을 추가합니다. CTA는 버튼 등으로 방문자의 다음 행동을 유도하는 영역입니다.
- 부모 블록과 안쪽 요소를 구분하여 샘플 제목·설명·이미지·금액·버튼 주소를 실제 내용으로 교체합니다.
- 반복 항목은 추가·복제 후 내용을 수정하고, 불필요한 항목은 선택 대상을 확인한 뒤 삭제합니다.
완료 확인
- 섹션 사이 간격이 일정하고 내용이 겹치지 않습니다.
- 블록 안의 예시 금액·문구·링크가 남아 있지 않습니다.
- 게시 후 PC·모바일에서 열 수와 순서가 의도대로 보입니다.