브랜드에 어울리도록 버튼 모양, 색상, 텍스트 스타일을 변경해 보세요.

사이트 스타일을 사용하여 사이트의 버튼 모양을 편집하고, 사이트의 시각적 디자인과 조화롭게 콜투액션을 구성해 보세요. 일관된 스타일을 유지할 수 있도록 변경한 스타일은 사이트의 대부분의 버튼에 적용됩니다.

이러한 버튼 스타일은 버전 7.1 사이트에서 사용할 수 있습니다. 버전 7.0 사이트에는 다른 버튼 스타일링 옵션이 있습니다.

버튼 스타일 관련 비디오

사이트의 버튼 스타일을 설정하는 방법에 대한 개요를 살펴보려면 이 비디오를 시청하세요.

버튼 팩 선택

사이트 스타일에서 버튼 팩을 선택하면 사이트의 버튼에 일관된 스타일 설정이 자동으로 적용됩니다. 각 팩은 버튼 스타일을 세 가지 유형으로 구분합니다.

버튼 팩은 세부 설정을 일일이 변경하고 싶지 않을 때 유용하지만, 더 구체적으로 사용자 지정하기 위한 시작점으로 활용할 수도 있습니다.

버튼 팩을 설정하는 방법:

1. 사이트 스타일 패널을 여세요.
2. 버튼을 클릭합니다.
3. 추천 버튼 팩을 확인합니다. 팩 위에 커서를 올리면 기본, 보조, 부가 스타일의 미리 보기가 표시됩니다.
4. 추천 버튼 팩에서 선택하거나, 사용자 지정을 클릭한 다음 모든 버튼 팩을 클릭하여 더 많은 옵션을 확인합니다.
5. 마음에 드는 버튼 팩을 찾으면 클릭합니다.

버튼 모양 및 글꼴 사용자 지정

버튼 팩을 선택한 후 버튼 스타일 옵션을 더 세부적으로 변경할 수 있습니다. 특정 크기와 모양을 설정할 수는 있지만, 텍스트 길이에 맞춰 버튼의 크기가 커지거나 모양이 변경될 수 있습니다. 원하는 대로 버튼을 제어하려면 버튼 텍스트를 25자 미만으로 유지하는 것이 좋습니다.

사이트 디자인을 해칠 수 있는 경우, 일부 세부 절정은 사이트 내 버튼에 적용되지 않을 수 있습니다. 예를 들어 뉴스레터 블록 레이아웃을 유지하기 위해 패딩(여백) 세부 설정은 뉴스레터 블록 버튼에 적용되지 않습니다.

버튼 스타일을 설정하려면 다음 단계를 따르세요.

1. 사이트 스타일 패널을 여세요.
2. 버튼 옆의 ＞를 클릭하세요.
3. 기본, 보조 또는 부가를 클릭합니다. 변경 사항을 적용하면 이 유형의 버튼이 사이트에서 어떻게 표시되는지 미리 보기로 확인할 수 있습니다. 버튼 유형을 변경한 후 새로운 버튼 팩을 선택하면 기존 변경 사항이 사라진다는 점을 유의하세요.
4. 텍스트 스타일을 사용자 지정하려면 글꼴을 클릭합니다.
5. 모양을 클릭해 버튼 모양을 설정합니다.
6. 아웃라인 슬라이더를 사용하여 아웃라인 두께를 설정합니다.
7. 패딩(여백)을 S, M 또는 L로 설정하거나 …를 클릭하여 상단 및 하단 패딩(여백)과 왼쪽 및 오른쪽 패딩(여백)을 각각 설정합니다. 이 옵션은 플루이드 엔진 섹션에서 채우기로 설정된 버튼 블록에는 적용되지 않습니다. 이러한 경우에는 블록 크기 조정으로 패딩(여백)을 추가해야 합니다.
8. 선택 사항: 이 스타일 설정을 사이트의 모든 버튼 유형에 적용하려면 모든 버튼 유형에 적용을 클릭합니다.
9. 선택 사항: 편집 중인 버튼 유형의 스타일을 기본값으로 재설정하려면 버튼 스타일 재설정을 클릭합니다.
10. 저장을 클릭하세요.

버튼 색상 사용자 지정

버튼은 사이트 전체에 설정된 색상을 따르므로, 일반적으로 사이트 브랜드와 일치합니다. 여러 섹션에 서로 다른 색상 테마를 적용하면 더욱 다양한 버튼 색상을 활용할 수 있습니다.

버튼 색상을 변경하는 방법:

1. 사이트 스타일 패널을 여세요.
2. 색상 옆의 ＞를 클릭합니다.
3. 버튼 색상을 변경하려는 색상 테마를 클릭합니다.
4. 버튼에서 세부 설정을 클릭하여 세 가지 버튼 유형 모두의 버튼 텍스트 색상과 버튼 배경색을 변경합니다. 채우기로 설정된 버튼의 경우 배경색이 버튼 전체를 채웁니다. 채우기 없음으로 설정된 버튼 또는 밑줄 모양을 사용하는 버튼의 경우 버튼 배경색이 아웃라인과 텍스트에 적용됩니다.
5. 선택 사항: 버튼이 포함된 블록의 경우, 버튼 색상을 별도로 변경할 수 있는 경우도 있습니다. 색상 테마 편집 패널의 블록 섹션에서 블록별 버튼 색상 세부 설정을 확인하세요.
6. 저장을 클릭하세요.

버튼 유형이란 무엇인가요?

사이트 스타일은 버튼을 기본, 보조, 부가의 세 가지 유형으로 구분합니다. 대부분의 버튼은 기본 스타일을 따르며 유형을 변경할 수 없습니다.

버튼 블록, 머리말 블록, 양식 블록 제출 버튼의 유형을 변경할 수 있으며, 이는 방문자에게 가장 중요한 콜투액션을 강조하거나 서로 다른 링크 유형을 구분하는 좋은 방법입니다.

기본 스타일을 사용하는 버튼은 무엇인가요?

기본 스타일을 사용하는 버튼은 다음과 같습니다.

• 장바구니에 추가 버튼
• 자동 레이아웃 버튼
• 기본으로 설정된 머리말 버튼, 버튼 블록, 양식 블록 버튼
• 결제 버튼
• 쿠키 배너의 모두 허용 버튼
• 기부 블록 버튼
• 요금제 블록 버튼
• 뉴스레터 블록 버튼

보조 스타일을 사용하는 버튼은 무엇인가요?

보조 스타일을 사용하는 버튼은 다음과 같습니다.

• 보조로 설정된 머리말 버튼, 버튼 블록, 양식 블록 버튼
• 쇼핑 계속하기 버튼
• 쿠키 배너의 모두 거부 버튼

부가 스타일을 사용하는 버튼은 무엇인가요?

• 부가로 설정된 머리말 버튼, 버튼 블록, 양식 블록 버튼
• 쿠키 배너의 쿠키 관리 버튼