결론
“+”버튼에서 Button Basic을 삽입하고 프리셋을 적용하면 몇 번의 클릭으로 멋진 버튼이 완성됩니다. 텍스트와 링크를 설정하고 게시하는 것만으로 사용하기 시작할 수 있습니다.
1단계: 블록 삽입
- 게시 또는 고정 페이지 편집 화면 열기
- 블록을 추가하려는 위치에서 + 버튼을 클릭합니다.
- 검색란에 'Button Basic'을 입력합니다.
- 표시된 Button Basic 블록을 클릭하여 삽입
포인트: "zen"이나 "버튼"으로 검색해도 찾을 수 있습니다.
2단계: 디자인 사전 설정 적용
- 삽입된 블록 선택
- 블록 상단의 툴바에서 프리셋 아이콘을 클릭합니다.
- 표시되는 사전 설정 목록에서 원하는 디자인 선택
조정의 요령: 프리셋은 토대로서 사용해, 색이나 사이즈는 나중에 자유롭게 조정할 수 있습니다. 우선 전체 방향에 가까운 프리셋을 선택하는 것이 좋습니다.
3단계: 텍스트 편집
- 블록의 텍스트 부분을 직접 클릭
- 표시하고 싶은 버튼 텍스트를 입력한다(예: 「문의는 이쪽」 「무료로 시작한다」)
포인트: 텍스트는 편집기에서 직접 편집할 수 있습니다. 글꼴 크기와 두께는 사이드바의 텍스트 설정 패널에서 조정할 수 있습니다.
4단계: 링크 설정
- 블록을 선택한 상태에서 툴바에서 링크 아이콘을 클릭합니다.
- 클릭연결 URL 입력
- 필요한 경우 '새 탭에서 열기' 사용
- Enter 키로 확인
주석: 툴바의 태그 선택으로
a(링크)/button(버튼 요소)/div(블록 요소)를 전환할 수 있습니다. 일반 링크 버튼은a태그로 남아있어 문제가 없습니다.
5단계: 색상 조정
- 사이드바의 각 설정 패널 열기
- 배경색을 변경하려면 배경 설정 패널 열기
- 텍스트 색상을 변경하려면 텍스트 설정 패널 열기
- 컬러 피커 또는 컬러 코드로 색상 지정
조정 요령: 버튼의 배경색과 텍스트 색의 대비비를 충분히 확보하면 시인성과 접근성이 향상됩니다.
6단계: 미리보기에서 확인
- 편집기 상단의 미리보기 버튼을 클릭합니다.
- '새 탭에서 미리보기' 선택
- 프런트 엔드에서 버튼 표시 확인
- 호버시의 변화나 링크처로의 천이도 확인한다
포인트: 편집기의 표시와 프런트 엔드의 표시는 기본적으로 일치하지만 테마의 CSS이 영향을 줄 수 있습니다. 최종 확인은 프런트 엔드에서 실시하십시오.
7단계: 페이지 게시
- 버튼의 모양과 링크를 확인한 후 편집기 상단의 공개 또는 업데이트 를 클릭하십시오.
- 프런트 엔드 페이지로 이동하여 최종 확인
더 자세히 설정하고 싶은 경우
Button Basic에는 18 가지 설정 패널이 있습니다. 자세한 설정 방법은 [buttonBasic 설정 가이드] (../../buttonbasic/)를 참조하십시오.
주요 설정 패널:
| 패널 | 할 수 있는 일 |
|---|---|
| 텍스트 설정 | 글꼴 크기, 두께, 줄 사이, 문자 간격 조정 |
| 레이아웃 설정 | 폭・높이・여백(마진・패딩)의 조정 |
| 배경 설정 | 색상, 그라데이션, 이미지 및 패턴 설정 |
| 테두리 설정 | 선폭·스타일·색·각환의 조정 |
| 아이콘 설정 | 아이콘 추가, 크기, 색상 설정 |
| 애니메이션 설정 | 호버시나 표시시의 애니메이션(Pro 기능) |
다음 단계
Pro 버전에 관심이 있는 분은 Pro판 활성화에서 활성화 방법을 확인할 수 있습니다.