사이트의 버튼을 브랜드에 맞게 사용자 지정하세요.

사이트 스타일을 사용하여 사이트의 버튼 모양을 편집하세요. 색상, 모양, 텍스트 스타일을 변경할 수 있으며, 이는 사이트의 시각적 디자인에 맞게 콜투액션을 조정하는 좋은 방법입니다. 일관된 모양을 만들 수 있도록 변경한 스타일은 사이트의 대부분의 버튼에 적용됩니다.

비디오 시청하기

이 가이드는 버전 7.1에서 버튼 스타일 지정 옵션에 초점을 맞춥니다. 버전 7.0에서 버튼 스타일 지정을 하려면 버전 7.0에서 버튼 스타일 지정을 검토하세요.

버튼 모양과 글꼴

버튼을 스타일링할 때는 버튼이 있는 페이지를 열어 사이트 미리 보기에서 변경 사항을 즉시 확인하는 것이 좋습니다. 사이트 전체에서 버튼 스타일을 지정하려면 다음 단계를 따르세요.

1. 사이트 스타일 패널을 열고, 버튼 옆의 ＞를 클릭하세요.
2. 스타일을 지정하려는 버튼 유형을 클릭하세요. 메인, 보조, 또는 부가를 선택할 수 있습니다. 자세한 내용을 확인하려면 버튼 유형을 검토하세요.

각 유형에 대해 다음 조정값을 설정할 수 있습니다.

• 텍스트 - 해당 단계 버튼의 글꼴 및 글꼴 스타일입니다.
• 모양 - 버튼 모양과 버튼에 색상 채우기(채우기)가 있는지, 또는 테두리만 있는지(채우기 없음).
• 테두리 - 채우기 없음 버튼의 테두리 두께입니다. 채우기 버튼의 경우, 테두리 슬라이더를 변경하면 버튼 외부의 패패(여백)이 변경됩니다.
• 가로 패딩(여백)- 버튼 텍스트의 왼쪽과 오른쪽 패딩(여백)입니다.
• 세로 패딩(여백) - 버튼 텍스트의 위쪽과 아래쪽 패딩(여백)입니다. 이 조정값은 플루이드 엔진 섹션에서 채우기로 설정된 버튼 블록에는 영향을 주지 않습니다. 대신 블록 크기 조정으로 수직 패딩(여백)을 추가하세요.

변경 사항은 자동으로 저장됩니다. 한 유형의 설정을 다른 유형에 적용하려면 모든 버튼 유형에 적용을 클릭하세요. 한 유형의 스타일을 기본 설정으로 되돌리려면 버튼 스타일 재설정을 클릭하세요.

일반적인 모양과 크기 스타일을 설정할 수 있지만, 모든 버튼은 텍스트에 맞게 크기가 커지고 모양이 변경됩니다. 버튼에 많은 텍스트를 포함하면 예상과 다르게 보일 수 있습니다. 버튼의 모양을 최대한 제어하려면 버튼 텍스트를 25자 이하로 유지하는 것이 좋습니다.

버튼 색상

버튼이 사이트 디자인과 일치하도록 버튼은 사이트의 전역 색상을 따릅니다.

• 색상 패널에서 테마의 연필 아이콘을 클릭하여 버튼 배경과 버튼 텍스트 색상을 설정하세요.
• 각 버튼 유형은 각 색상 테마에서 배경과 텍스트 색상에 대한 고유한 조정값을 가지며, 블록도 자체 버튼 색상 조정값을 가집니다.
• 버튼이 채우기로 설정되면 버튼의 배경색이 버튼 전체를 채웁니다. 버튼이 채우기 없음으로 설정되면 버튼 배경색은 테두리와 텍스트에 적용되고, 커서를 올리면 버튼이 채워집니다.
• 밑줄 모양을 사용할 때는 버튼 배경 조정값으로 버튼 텍스트 색상을 설정하세요. 버튼 텍스트 조정값으로 버튼 배경색을 설정하세요.
• 버튼이 있는 섹션의 색상 테마 변경을 통해 다른 섹션에서 버튼 색상을 다르게 사용할 수 있습니다.

자세히 알아보려면 색상 변경을 참조하세요.

버튼 유형

버튼 패널은 버튼 스타일을 기본, 보조, 부가의 세 가지 유형으로 나눕니다. 머리말 버튼, 버튼 블록, 양식 블록 제출 버튼을 제외하고는 버튼의 유형을 변경할 수 없습니다. 대부분의 버튼은 기본 스타일 설정을 따르지만, 사이트 전반의 버튼 블록 스타일은 보조 및 부가 설정으로 다르게 할 수 있습니다.  

이 방법은 방문자에게 가장 중요한 콜투액션을 강조하거나, 서로 다른 링크 유형을 구분하는 좋은 방법입니다. 아래 표를 사용하여 어떤 유형이 어떤 버튼에 적용되는지 알아보세요.

일부 경우에는 특정 조정값이 사이트의 특정 버튼에는 적용되지 않을 수 있으며, 이는 사이트 디자인이 방해받지 않도록 하기 위함입니다. 예를 들어 뉴스레터 블록 레이아웃을 유지하기 위해 패딩(여백) 조정값은 뉴스레터 블록 버튼에 적용되지 않습니다.

버튼 블록 유형을 설정하는 방법을 알아보려면 버튼 블록을 참조하세요.

버전 7.0에서 버튼 스타일링하기

사이트가 버전 7.0인 경우, 사이트 전역 조정값을 사용하여 사이트 대부분의 버튼 모양을 편집하세요.

1. 버튼을 사용하는 페이지로 이동하세요.
2. 웹사이트 패널로 돌아가서 디자인을 클릭한 다음 사이트 스타일을 클릭하세요.
3. 아래로 스크롤하여 버튼으로 이동하세요. 버튼 블록의 경우, 섹션 이름은 버튼 블록(작음), (중간), (큼)입니다.

다음 조정값을 사용하세요.

• 버튼 스타일 - 실선, 윤곽선, 입체 중에서 선택하세요. 윤곽선의 경우, 버튼 색상에 따라 커서를 올리면 텍스트가 자동으로 검정색 또는 흰색으로 표시됩니다.
• 버튼 모양 - 정사각형, 원형 또는 알약 모양을 선택합니다.
• 버튼 색상 - 버튼의 배경색을 변경하세요.
• 버튼 텍스트 색상 - 텍스트의 색상을 변경하세요.
• 버튼 글꼴 - 글꼴을 변경합니다. 텍스트 크기 조정은 버튼 블록 텍스트에만 영향을 미칩니다.
• 대체 또는 (오버레이) - 일부 템플릿에서 제공되며, 배경 이미지나 색상 위에서 버튼이 돋보이도록 대체 색상을 설정하세요.

사이트 전역 조정값은 다음 버튼에 영향을 줍니다.

• 장바구니에 추가 버튼
• 버튼 블록
• 기부 블록 버튼
• 양식 블록 제출 버튼
• 뉴스레터 블록 버튼
• 디지털 제품 블록 버튼

다양한 스타일 옵션이 있는 몇 가지 유형의 버튼이 있습니다.

• 장바구니 버튼은 특정 템플릿에서 별도의 옵션이 있습니다.
• 커버 페이지 버튼은 별도의 버튼 옵션이 있습니다.
• 이미지 블록은 별도의 버튼 옵션이 있습니다.
• Bedford 그룹 배너 버튼은 배너 섹션에서 스타일링됩니다.
• Bedford 그룹 머리말 탐색 버튼은 사이트 탐색에서 스타일링됩니다.
• Brine 그룹 머리말 탐색 버튼은 머리말: 기본 탐색 및 머리말: 보조 탐색에서 스타일링됩니다.