버튼 스타일.
각 버튼의 크기를 정하세요. 가장 원하는단일 동작은 단색 버튼으로, 옆의 대안은 경쟁하지 않는 외곽선 버튼으로 표시합니다. 이 페이지에서는 이러한 쌍의 스타일 지정 방법과 각 설정의 변경 내용을 보여줍니다. 버튼을 추가하고 링크를 설정하려면 Adding a Button 문서를 참고하세요.
동영상에서는 아래 단계를 따릅니다. Apply now를 주 버튼으로 만들고 외곽선 두 번째 버튼을 추가합니다.
주 버튼과 보조 버튼 스타일 지정
페이지의 버튼에서 시작하세요. 예: Apply now.
- 버튼을 가리키고 More > Settings(을)를 여세요.
- 다음을 설정하세요: Type(을)를 Primary(으)로.
- 다음을 설정하세요: Size(을)를 Large(으)로. Save(을)를 클릭하세요.
- 버튼을 다시 가리키고 More > Clone(을)를 여세요. 원본 바로 아래에 복사본이 나타납니다.
- 복사본에서 More > Settings(을)를 여세요. Title(을)를 바꾸세요. 예:
Download brochure. Link도 바꾸세요. - 다음을 켜세요: Outline style. Save(을)를 클릭하세요.
- 툴바에서 Save(을)를 클릭하세요.
동작별 스타일 선택
| 동작 | 스타일 | 예시 |
|---|---|---|
| 가장 원하는단일 동작 | 단색 Primary | Apply now |
| 대안 | Outline style + 동일 Type | Download brochure |
| 사소한 동작 | Link(텍스트 링크 형태) | Read the terms |
| 경고 또는 마지막 단계 | Danger 또는 Warning | Cancel my booking |
섹션당 단색 버튼 하나를 사용하여 방문자가 클릭 위치를 한 번에 알 수 있게 하세요. 동작을 말하는 레이블을 쓰세요. “Click here” 대신 “Get started”, “Submit” 대신 “Send message”.
표시되는 내용
열에 큰 버튼 둘이 쌓입니다. 테마의 기본 색상 단색 버튼 하나, 같은 색상의 테두리와 텍스트 외곽선 버튼 하나입니다. 단색 버튼이 먼저 눈에 들어옵니다. 편집 중에는 링크가 열리지 않습니다. 테스트하려면 페이지를 저장하고 뷰 메뉴(눈 아이콘)를 연 뒤 Preview(을)를 고르세요.
설정
| 설정 | 기능 | 기본값 |
|---|---|---|
| Type | 색상 스타일: Primary, Secondary, Success, Info, Warning, Danger, Link, Light, Dark. 색상은 테마에서 가져옵니다. | Primary |
| Outline style | 채우기 없는 색상 테두리와 텍스트 | 꺼짐 |
| Size | Normal, Large, Small | Normal |
| Block button | 열 전체 너비로 버튼 늘이기 | 꺼짐 |
| Link target | Same window 또는 New window. Link에 값이 있을 때 표시됩니다. | Same window |
테마 제작자용: 각 Type(은)는 Bootstrap 클래스 btn-<type>(을)를 추가합니다. 예: btn-primary. Outline style이 켜지면
btn-outline-<type>(이)가 되며, Link(은)는 항상 btn-link(으)로 유지됩니다. Large(은)는 btn-lg(을)를, Small(은)는
btn-sm(을)를, Block button(은)는 btn-block(을)를 추가합니다.
스타일이 표시되지 않는 경우
- 외곽선 버튼에 테두리가 없습니다. Type(이)가 Link입니다. 항상 텍스트 링크처럼 보이므로 Outline style(은)는 효과가 없습니다. 외곽선 버튼에는 다른 Type(을)를 고르세요.
- 버튼이 거의 보이지 않습니다. Light(이)가 흰색에 가까워 흰색 섹션에 묻힙니다. 더 어두운 Type(을)를 고르거나 섹션에 배경색을 주세요.
- 링크가 같은 탭에서 열립니다. Link target(이)가 Same window이며, Link에 값이 있을 때만 표시됩니다. 먼저 Link(을)를 입력한 뒤 New window(을)를 고르세요.
다음 단계
- Adding a Button: 동영상과 함께 모든 버튼 설정을 다룹니다.
- Hover effects: 포인터가 닿으면 버튼을 어둡게 하거나 그림자를 추가합니다.
- Colour and branding: 버튼 색상을 브랜드에 맞춥니다.