페이지 블록 빌더
빌더 모드는 코드 없이, 미리 만들어진 블록을 끌어다 쌓아 페이지를 완성하는 방법입니다. 히어로·기능 소개·가격표·FAQ 같은 섹션을 마우스로 조립하면, 그 자리에서 실제 화면 그대로 미리보기되어 빠르게 완성할 수 있어요.
작업 위치: 스튜디오 → 페이지 → 편집할 페이지에서 모드를 빌더로 둡니다.
화면 구성
빌더 화면은 세 부분으로 나뉩니다.
왼쪽 — 블록 팔레트: 추가할 수 있는 블록이 카테고리별로 정리돼 있습니다. 항목에 마우스를 올리면 작은 미리보기가 떠서 어떤 블록인지 바로 확인할 수 있어요.
가운데 — 캔버스: 지금 만드는 페이지가 실제 화면 그대로 보입니다. 블록을 클릭해 선택합니다.
오른쪽 — 인스펙터: 선택한 블록의 내용과 설정을 편집합니다.
블록 추가하고 배치하기
1. 왼쪽 팔레트에서 원하는 블록을 캔버스로 끌어다 놓으면(드래그&드롭) 추가됩니다.
2. 캔버스에서 블록을 클릭해 선택하면, 오른쪽 인스펙터에서 제목·문구·이미지·버튼 같은 내용을 바로 고칠 수 있어요.
3. 블록은 드래그로 순서를 바꾸고, 필요 없으면 삭제, 똑같은 구성을 하나 더 쓰고 싶으면 복제할 수 있습니다.
💡 편집한 내용은 캔버스에 실시간으로 반영됩니다. 완성형 페이지를 눈으로 확인하며 쌓아 올리세요.
블록 꾸미기 — 배경과 등장 효과
블록마다 배경과 애니메이션을 줄 수 있어요.
배경 — 투명(기본), 프리셋, 단색, 그라데이션 중에서 고릅니다.
등장 효과 — 스크롤로 블록이 나타날 때 서서히(fade), 떠오르기(rise), 아래에서 위로, 줌인 같은 효과와 속도(부드럽게·감속·되튕김 등)를 설정합니다.
어떤 블록이 있나요?
카테고리별로 자주 쓰는 블록입니다. (제공 블록은 계속 추가됩니다)
카테고리 | 블록 예시 | 쓰임 |
|---|---|---|
히어로 | 히어로, Circle 회전 링 | 페이지 첫인상, 대표 문구·이미지 |
기능 | 그리드, 벤토 그리드, 이미지 + 텍스트, 슬라이드 아이콘, 대시보드 | 제품·서비스 기능 소개 |
고객 신뢰 | 고객 후기, 로고 스트립, 팀 / 멤버, 인용 스포트라이트, Pain Points | 신뢰를 주는 사회적 증거 |
통계 | 활성 사용자 | 숫자로 보여주는 성과 |
가격 | 가격표 | 요금제·플랜 비교 |
전환 (CTA) | 무료로 시작하기, 공지 배너 | 행동 유도·공지 |
콘텐츠 | 본문 텍스트, FAQ / 자주 묻는 질문 | 글·질문답변 |
미디어 | 이미지, 이미지 갤러리, 캐러셀, 동영상 임베드 | 이미지·영상 |
흐름/단계 | 단계 안내 / How it works, 타임라인 / 연혁 | 절차·연혁 소개 |
비교 | 비교표 | 항목·플랜 비교 |
미리보기 · 저장 · 발행
미리보기 — 상단 미리보기를 누르면 새 탭에서 실제 페이지를 확인합니다. 발행 전 초안도 미리 볼 수 있어요.
저장 — 변경한 내용은 저장을 눌러 반영합니다.
발행 — 발행을 누르면 방문자에게 공개되고, 연결된 도메인에서 서빙됩니다. 공개 후에도 발행 취소로 되돌릴 수 있어요.
페이지 제목·주소(슬러그)·헤더는 상단 설정(톱니바퀴)에서 바꿉니다.