다양한 스타일 옵션을 사용하여 기능을 설명하고 멋진 가격표를 쉽게 만들 수 있습니다.

WordPress 웹사이트의 Gutenberg 편집기에서 가격표를 만드는 방법을 알아보겠습니다.

귀하의 WordPress 사이트에는 GutenKit 플러그인이 설치되어 있어야 합니다. 그런 다음 아래 단계를 따르세요.

GutenKit 가격표 사용 방법 #

1단계: 가격표 블록 추가 #

기존 페이지를 편집하거나 새 페이지를 추가하려면 "+” 아이콘 > 검색 가격표 블록 라이브러리에서 > 블록을 편집기 화면으로 끌어다 놓습니다.

2단계: 가격표 콘텐츠 추가 #

블록 설정을 열고 콘텐츠 탭으로 이동합니다. 먼저 가격표 이름과 추가 정보를 입력합니다. 

머리글: #

• 테이블 제목: 테이블 헤더 제목의 텍스트를 입력하세요. 
• 제목 HTML 태그: 제목의 HTML 태그를 H1-H6, Div, Span 또는 Paragraph 중에서 선택합니다.
• 테이블 자막: 이 상자를 사용하여 가격표의 부제를 작성하세요.
• 헤더 아이콘 또는 이미지: 테이블 헤더에 아이콘이나 이미지를 추가합니다. 아무것도 표시하지 않도록 선택할 수도 있습니다.

3단계: 가격 정보 입력 #

가격표: #

• 통화: 화폐 표준을 나타내는 기호나 단어를 추가합니다. 
• 가격: 가격을 입력하세요.
• 지속: 패키지 기간을 표시할 텍스트를 입력하세요.

4단계: 패키지 세부 정보 추가 #

기능 설정 영역에서 패키지의 세부 정보를 추가합니다.  

특징: #

• 특징 스타일: 드롭다운에서 스타일을 선택하면 문단이나 목록 사이에 기능이 표시됩니다.

• 테이블 내용: 문단 스타일을 선택하면 이 옵션이 나타납니다. 상자에 패키지 세부 정보를 입력하세요.

• 목록: 목록 옵션을 선택하면 기능 목록을 추가하기 위한 설정이 열립니다. 항목을 추가하려면 + 항목 추가 버튼을 클릭합니다. 또한 "항목 복제” 아이콘을 클릭하고 “를 사용하여 하나를 삭제합니다.엑스” 아이콘을 클릭합니다. 이제 항목 중 하나를 클릭하면 다음 옵션이 표시됩니다.

• 목록 텍스트: 기능이나 패키지에 대한 텍스트를 입력하세요.
• 아이콘 추가: 이 토글 버튼을 활성화하면 해당 기능의 아이콘이 표시됩니다.
• 상: 라이브러리에서 아이콘을 선택하거나 장치에서 업로드하세요.
• 색상: 아이콘 색상을 선택하세요.
• 정보 텍스트: 이 상자에 기능에 대한 특별 정보를 추가하세요. 정보 아이콘이 활성화됩니다.

5단계: 가격표 추가 버튼 #

이 설정 영역을 사용하면 가격표 내에 버튼을 추가할 수 있습니다.

단추: #

• 상표: 버튼의 텍스트를 입력합니다.
• 링크: 방문자가 이동하기를 원하는 웹페이지의 링크 주소를 입력하세요.
• 아이콘 추가: 버튼 텍스트와 함께 아이콘을 표시합니다.
  • 상: 라이브러리에서 아이콘을 선택하거나, 직접 만든 아이콘을 업로드하세요. 
  • 위치: 아이콘을 텍스트 앞이나 뒤에 배치합니다.
• 아이콘 간격: 슬라이더를 사용하여 버튼 텍스트와 아이콘 사이의 간격을 정의합니다.
• 클래스 및 ID: 스타일시트에서 사용자 정의 CSS를 대상으로 지정하려면 이 상자에 특정 클래스 및 ID를 추가합니다.

6단계: 요소 순서 구성 #

맞춤 주문: #

• 주문 활성화: 이 토글 버튼을 활성화하여 항목 순서를 설정합니다. 항목을 위나 아래로 끌어 원하는 위치에 배치합니다.

7단계: 콘텐츠 영역 스타일 지정 #

이제 가격 책정 이야기의 텍스트 내용에 스타일을 지정하는 데 집중하겠습니다. "스타일 탭".

가격 책정 기관: #

• 조정: 가격표의 수평 위치를 왼쪽, 가운데, 오른쪽으로 설정합니다.

다음으로, 표 제목과 자막 옵션이 있습니다. 두 설정 모두 비슷한 설정을 가지고 있습니다.

테이블 제목: #

• 조정: 표 제목을 왼쪽, 가운데, 오른쪽에 맞춥니다.
• 타이포그래피: 이 설정 영역을 열면 테이블 제목에 대한 모든 타이포그래피 사용자 정의가 가능합니다.

다음 옵션은 일반 옵션과 호버 옵션 모두에 적용할 수 있습니다.

• 색상: 색상 선택기를 사용하여 제목에 맞는 색상을 선택하세요.
• 국경: 색상, 스타일, 두께 등 테두리의 모든 설정을 사용자 정의할 수 있습니다.
• 테두리 반경: 테두리의 둥글기를 정의합니다.

• 심: 제목 주위에 공백을 추가합니다.
• 여유: 제목과 다른 요소 사이의 거리를 정의합니다.

8단계: 가격 정보 사용자 지정 #

가격표: #

• 위치 오른쪽: 가격표 배경의 좌우 위치를 조정합니다.
• 너비: 슬라이더를 사용하여 배경 너비를 늘리거나 줄입니다. 
• 심: 가격표에 내부 공간을 추가하세요.
• 여유: 가격표와 다른 요소의 거리를 조정합니다.
• 타이포그래피: 가격표의 타이포그래피 스타일을 지정하려면 이 설정을 엽니다.

지속:

• 텍스트 색상: 일반 상태의 기간 텍스트에 대한 색상을 선택하세요.
• 텍스트 호버: 이전 옵션과 마찬가지로 마우스를 올렸을 때의 텍스트 색상을 설정합니다.
• 타이포그래프y: 지속 시간 텍스트에 대한 모든 인쇄 옵션을 가져옵니다.
• 수직 위치: 가격 태그 내 기간 텍스트의 수직 위치를 정의합니다. (위, 가운데, 아래)

통화 기호:

• 타이포그래피: 통화 텍스트에 스타일을 지정합니다.
• 위치: 가격 번호 앞이나 뒤에 통화 기호를 넣습니다.
• 수직 위치: 통화 기호의 수직 위치를 설정합니다.

• 색상: 통화를 표시할 색상을 선택하세요.
• 배경 유형: 단색과 그라데이션 사이에 배경 유형을 추가합니다.
• 국경: 테두리의 두께, 색상, 스타일을 설정합니다.
• 테두리 반경: 테두리의 둥글기를 측정하는 값을 입력하세요.
• 박스 섀도우: 이 부분을 상자 그림자 애니메이션 효과로 아름답게 꾸며보세요.

9단계: 패키지 세부 정보 사용자 지정 #

특징 #

• 조정: 기능 문단 텍스트나 목록을 왼쪽, 가운데, 오른쪽으로 정렬합니다.
• 타이포그래피: 기능 텍스트 스타일, 글꼴 패밀리, 굵기, 변형, 간격 등을 변경합니다.

다음 스타일 기능은 일반 옵션과 호버 옵션 모두에 적용할 수 있습니다.

• 색상: 기능 텍스트의 색상을 선택하세요.
• 국경: 테두리 스타일, 색상, 두께를 사용자 지정합니다.
• 국경 반경: 테두리의 둥근 정도를 조정합니다.
• 리스트 갭: 이 옵션은 콘텐츠 탭의 기능 설정에서 목록 옵션을 선택할 때만 나타납니다. 이 슬라이더를 사용하여 모든 목록 항목 간의 간격을 정의합니다.

• 여유: 기능 텍스트 영역 주위에 공백을 추가합니다.
• 심: 이 상자에 값을 입력하여 기능 텍스트 영역 주위의 공간을 확장합니다.

상:

• 아이콘 크기: 이 슬라이더를 사용하여 목록의 아이콘 크기를 측정합니다.
• 간격: 아이콘과 목록 텍스트 사이의 간격을 정의합니다.

10단계: 가격표 버튼 사용자 정의 #

단추: #

• 조정: 버튼을 왼쪽, 중앙, 오른쪽에 배치하세요.
• 타이포그래피: 버튼 텍스트에 대한 다양한 스타일 옵션을 받으세요.
• 색상: 버튼 텍스트에 색상을 지정합니다.
• 배경 유형: 클래식 또는 그라데이션 배경 유형을 선택하세요.
• 박스 섀도우: 테두리에 그림자 효과를 줍니다.
• 국경: 테두리 두께, 스타일, 색상을 정의합니다.
• 테두리 반경: 테두리의 둥근 정도를 조정합니다.
• 심: 버튼 테두리 내부의 공간을 늘립니다.

11단계: 고급 설정 구성 #

고급 설정 탭에서 아코디언 블록 레이아웃, 배경, 테두리 스타일을 구성하고 가시성을 제어할 수 있습니다.

공들여 나열한 것: #

• 여유: 블록 레이아웃 주변의 공간을 정의합니다. 다른 블록 사이의 간격을 설정하는 데 도움이 됩니다.
• 심: 레이아웃 내의 블록 주변 공간을 설정하는 값을 입력합니다.
• 너비: 기본 레이아웃 너비를 유지하는 것 외에.
  • 전체 넓이: 이 옵션을 선택하면 레이아웃이 화면 전체 너비에 걸쳐 적용됩니다.
  • 인라인(자동): 적용하면 블록 요소와 동일한 너비를 갖게 됩니다.
  • 관습: 이 옵션을 선택하면 블록 레이아웃의 수평 공간을 정의하는 슬라이더가 표시됩니다.
• Z-지수: 슬라이더를 사용하여 다른 블록과 함께 블록의 스택 순서를 지정합니다.

위치: #

드롭다운 아래에 세 가지 옵션이 표시됩니다. 기본, 순수한, 그리고 결정된. 

• 순수한: 이 옵션을 선택하면 블록의 절대 위치가 제공됩니다. 즉, 요소가 컨테이너에 맞습니다.
• 결정된: 고정 위치 옵션을 사용하면 요소가 전체 뷰포트나 화면에 맞춰집니다.

절대 및 고정 옵션 모두 아래와 같이 유사한 설정을 갖습니다.

• 수평 방향: 위치결정 방향을 왼쪽과 오른쪽 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수평 위치를 조정합니다.
• 수직 방향: 위치결정 방향을 위, 아래 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수직 위치를 조정합니다. 

배경: #

• 배경: 단색, 그라데이션, 이미지 중 배경 옵션을 선택합니다.

호버 옵션에서:

• 영상: 이미지 옵션을 선택하면 다음 옵션이 열립니다.
  • 영상: 미디어 라이브러리에서 이미지를 선택하거나 자신의 이미지를 업로드하세요.
  • 이미지 크기e: 썸네일, 중간, 크게 또는 전체 중에서 이미지 크기를 선택합니다.

• 위치: 10가지 옵션의 위치를 선택합니다.
• 부착: 나머지 브라우저 화면과의 고정 또는 스크롤 배경 이미지 관계를 지정합니다.
• 반복하다: 옵션을 선택하여 배경 이미지가 반복되는 방식을 설정합니다.
• 디스플레이 크기: 네 가지 옵션 중에서 디스플레이 크기를 선택합니다.

• 전환 기간: 슬라이더를 사용하여 배경 전환을 일반에서 호버 상태로 조정합니다.

국경: #

• 국경: 이 설정 옵션에는 너비, 스타일, 색상과 같은 테두리 설정 옵션이 제공됩니다.
• 테두리 반경: 값을 입력하여 테두리의 둥근 정도를 설정합니다.
• 박스 섀도우: 색상, 가로/세로, 흐림, 퍼짐 등의 모든 설정을 사용하여 테두리에 그림자 효과를 적용할 수 있습니다. 

호버 옵션에서:

• 전환 기간: 수동으로 값을 추가하거나 슬라이더를 사용하여 마우스 오버 상태에서 테두리 디자인을 변경하는 시간을 설정할 수 있습니다.

시계: #

가시성 모듈을 사용하면 장치 유형에 따라 블록 디자인 표시를 제어할 수 있습니다. 토글 버튼이 있는 세 가지 장치 옵션(데스크톱, 태블릿, 모바일)이 있습니다. 해당 장치의 블록 디자인을 숨기려면 토글 버튼을 켜십시오.

그러나 편집기 보기에서는 계속 볼 수 있습니다.

고급의: #

• 블록 이름: 블록 스타일을 지정하기 위해 링크하거나 스크립팅하는 동안 이 블록을 고유하게 식별할 수 있도록 이름을 지정합니다.
• HTML 앵커: 웹사이트 페이지를 링크하기 위한 URL을 추가합니다.

• 추가 CSS 클래스: 추가 CSS 클래스를 블록에 할당하면 사용자 정의 CSS를 사용하여 원하는 대로 블록 스타일을 지정할 수 있습니다. 

주의: 공백을 사용하여 여러 클래스를 별도로 추가할 수 있습니다.

다 됐어요! 이제 당신 차례입니다. WordPress 웹사이트의 블록 편집기에서 놀라운 가격표를 만들어 보세요.