가이드/사이트로 수익 창출/결제 버튼 스타일 지정

결제 버튼 스타일 지정

사이트에 결제 버튼 블록을 추가한 후 버튼 색상, 레이아웃 등을 변경할 수 있습니다. 이 가이드에서 결제 버튼의 스타일을 지정하는 방법을 알아보세요.

배경 및 텍스트 색상

다음 단계에 따라 결제 버튼의 배경과 텍스트 색상을 변경하세요.

  1. 결제 블록에서 개별 버튼을 클릭합니다.
  2. 블록 설정 사이드바에서 “배경 및 텍스트 색상” 섹션을 찾습니다.
  3. 버튼의 텍스트 색상을 변경하려면 텍스트 색상 섹션을 클릭합니다.
  4. 버튼 색상을 변경하려면 배경 섹션을 클릭합니다.

버튼에 색상을 적용하는 방법에 대해 자세히 알아보세요.

버튼 반경 조정

버튼의 반경을 조정하여 버튼 가장자리의 둥근 정도를 변경하세요. 다음 단계를 따르세요.

  1. 결제 블록에서 개별 버튼을 클릭합니다.
  2. 블록 설정 사이드바에서 “테두리” 섹션을 찾습니다.
  3. 버튼의 반경을 변경하려면 슬라이더를 사용하거나 숫자를 입력합니다.
  4. 변경 사항을 저장하려면 오른쪽 상단의 “저장” 또는 “발행“을 클릭합니다.

숫자가 낮을수록 버튼이 정사각형에 가까워지고, 숫자가 높을수록 버튼 모서리가 둥글게 표시됩니다.

테두리 반지름을 0으로 설정하여 버튼을 정사각형으로 만든 예시입니다.

버튼 폭 구성

다음 단계에 따라 버튼의 폭을 구성하세요.

  1. 결제 블록에서 개별 버튼을 클릭합니다.
  2. 블록 설정 사이드바에서 “양쪽 맞춤” 설정을 찾습니다.
  3. 사전 설정(25%, 50%, 75% 또는 100%) 중 하나를 선택하거나 사용자 정의 폭을 설정합니다.
  4. 변경 사항을 저장하려면 오른쪽 상단의 “저장” 또는 “발행“을 클릭합니다.

예를 들어 버튼의 폭을 100%로 설정하여 전체 폭 버튼을 생성합니다. 또는 각 버튼을 50%로 설정하여 다음 예제와 같이 콘텐츠 영역의 전체 폭을 차지하는 두 개의 버튼을 만들 수 있습니다.

50%로 설정된 두 개의 버튼이 나란히 배치되어 콘텐츠 영역의 전체 폭을 차지합니다.

버튼 정렬 조정

다음 단계에 따라 결제 버튼 정렬을 변경하세요.

  1. 편집기의 왼쪽 상단에서 목록 보기를 선택합니다.
  2. 목록 보기에서 결제 버튼 블록 항목을 클릭합니다.
  3. 표시되는 블록 도구 모음에서 “항목 정렬 변경” 버튼을 클릭합니다.
  4. 다음 옵션 중 하나를 선택합니다.
    • 항목 왼쪽 맞추기: 모든 버튼을 왼쪽에 정렬합니다.
    • 항목 가운데 맞추기: 모든 버튼을 가운데에 정렬합니다.
    • 아이템 오른쪽 맞추기: 모든 버튼을 오른쪽에 정렬합니다.
    • 아이템 간 간격 두기: 결제 버튼 블록 내에 버튼을 고르게 배치합니다.
  5. 변경 사항을 저장하려면 오른쪽 상단의 “저장” 또는 “발행“을 클릭합니다.

사전 설정 스타일 적용

다음 단계에 따라 버튼에 대한 사전 설정 스타일을 선택하세요.

  1. 결제 블록에서 개별 버튼을 클릭합니다.
  2. 블록 설정 사이드바에서 스타일 탭을 클릭합니다.
  3. 버튼 스타일을 채우기 또는 윤곽 중에서 선택합니다.
  4. 변경 사항을 저장하려면 오른쪽 상단의 “저장” 또는 “발행“을 클릭합니다.

타이포그래피 사용자 정의

다음 단계에 따라 버튼의 텍스트에 대한 글꼴 크기, 유형 및 대/소문자를 변경하세요.

  1. 결제 버튼 블록에서 개별 버튼을 클릭합니다.
  2. 블록 설정 사이드바에서 스타일 탭을 클릭합니다.
  3. 타이포그래피 섹션으로 스크롤합니다.
  4. 버튼 텍스트의 크기를 변경하거나 점 3개()를 클릭하여 글꼴대/소문자 옵션을 활성화합니다.
  5. 변경 사항을 저장하려면 오른쪽 상단의 “저장” 또는 “발행“을 클릭합니다.

타이포그래피 설정에 대해 더 자세히 알아보세요.

텍스트 서식 지정

결제 버튼의 텍스트에 굵게 및 기울임꼴 같은 서식을 추가할 수 있습니다. 서식을 적용하려면 다음 단계를 따르세요.

  1. 결제 블록에서 개별 버튼을 클릭합니다.
  2. 버튼에서 텍스트의 일부 또는 전체를 강조 표시합니다.
  3. 표시되는 블록 도구 모음을 사용하여 다음 스타일 중 하나를 적용합니다.
    • 굵게
    • 기울임꼴
    • 더 보기 아이콘은 다음 항목을 포함합니다.
      • 강조: 텍스트와 텍스트의 배경 색상만 변경합니다. 버튼 색상을 변경하려면 스타일을 사용하세요.
      • 인라인 코드
      • 인라인 이미지
      • 키보드 입력 스타일
      • 언어 속성
      • 취소선
      • 아래첨자
      • 위첨자
  4. 변경 사항을 저장하려면 오른쪽 상단의 “저장” 또는 “발행“을 클릭합니다.
기울임꼴 서식이 적용된 강조 표시된 텍스트의 예입니다.
Copied to clipboard!