Gutenberg 블록 편집기로 가격표 생성

1년이 넘는 기간 동안 우리는 Gutenberg 블록 편집기에서 큰 발전을 보았습니다. 고전적인 WordPress 편집기와 비교하여 이제 이전에는 코딩으로만 수행할 수 있었던 게시물 및 페이지의 요소를 디자인할 수 있습니다.

예를 들어, 클래식 편집기를 사용하여 게시물에 표를 표시하는 가장 쉬운 방법은 스프레드시트에서 해당 표를 만들고 이미지로 내보낸 다음 표시하려는 게시물에 삽입하는 것입니다. 그러나 이제 새로운 WordPress 편집기에서 찾은 블록 중 하나는 테이블 블록입니다. Gutenberg로 테이블을 생성하는 방법과 동일한 블록으로 가격 테이블을 생성할 수 있는 범위를 살펴보겠습니다.

테이블 블록

테이블을 만드는 것은 원하는 행과 열의 수와 정렬을 나타내는 새 테이블 블록을 추가하는 것만큼 쉽습니다.

Table 블록에서 다음 속성을 사용자 지정할 수 있습니다.

또한 각 셀에서 텍스트 정렬과 글꼴이 굵게 또는 기울임꼴인지 표시하고 링크를 추가할 수 있습니다. 또한 행 및/또는 열을 추가하거나 제거하여 언제든지 테이블을 수정할 수 있습니다.

이런 식으로 다음 테이블을 쉽게 만들 수 있음을 알 수 있습니다.

이것은 우리가 클래식 편집기로 할 수 있는 것보다 훨씬 간단하고 빠릅니다. 그리고 얻은 결과는 확실히 데이터 테이블을 보여주는 역할을 할 수 있습니다.

테이블 블록 제한 사항

이전 테이블을 만드는 것은 매우 쉬웠지만 몇 가지 제한 사항이 있었습니다. 한편, 구텐베르그에서 테이블 유형 블록으로 디자인한 테이블은 응답하지 않습니다. 즉, 테이블은 깨지지 않지만 테이블의 다른 요소를 열별로 표시할 수 없이 작아집니다.

장치에 완전히 적응하는 표는 표를 열로 나누어 표의 요소를 보여주므로 모든 셀이 훨씬 더 잘 표시됩니다.

장치에 적응할 수 있는 (in) 능력에 더하여, 눈치채셨겠지만, 테이블 블록에서 우리는 각 셀의 글꼴 유형과 크기, 색상 등을 쉽게 변경할 수 없습니다. 즉, 모든 제한 사항으로 인해 Gutenberg 테이블 블록은 제품에 대한 매력적인 가격 테이블을 만드는 데 유용하지 않습니다.

이러한 반응형 테이블을 어떻게 만들 수 있습니까?

대안

기둥 블록

대안은 열 블록이 있는 테이블 레이아웃을 시도하는 것입니다.

기초적인

프리랜서 및 개인 웹사이트용

€ 29 / 월

1개 사이트

테스트 페이지 5,000회 방문

구독하다

전문적인

소기업을 위한

€ 89 / 월

5개 사이트

테스트된 페이지에 대한 35,000번의 방문

구독하다

기업

최적화에 중점을 둔 팀을 위해

€ 259 / 월

? 10개 사이트

테스트된 페이지에 대한 200,000번의 방문

구독하다

Table 블록과 비교하여 column 블록의 장점은 완전 반응형이며 모바일 화면에서는 각 계획이 서로 뒤에 표시되는 것을 볼 수 있습니다.

열이 완전히 반응하는 것을 볼 수 있습니다. 그리고 확실히 열은 정보를 거의 표시하지 않고 너무 복잡하지 않게 표시하는 것이 좋습니다.

가격표 블록 플러그인

매력적인 가격 테이블을 생성해야 하는 경우 이를 위한 블록이 포함된 일부 플러그인을 설치하는 것이 좋습니다. 코드를 건드리지 않고는 어떤 종류의 사용자 지정도 허용하지 않을 수 있지만 대부분의 경우 매우 우아한 결과를 얻을 수 있습니다. Gutenberg 블록 편집기와 완전히 통합된 몇 가지 예를 살펴보겠습니다.

코블록

Coblocks는 Gutenberg에 완전히 적응된 전체 블록 세트를 포함하는 플러그인입니다. 그 중 하나가 Price Table 블록입니다.

매우 간단하고 사용하기 쉬우며 코딩 없이 열 수와 타이포그래피와 관련된 일부 측면, 열 및 텍스트 색상을 사용자 지정할 수 있습니다. 다음 이미지에 표시된 것과 같이 완전히 반응하는 가격표를 빠르게 얻을 수 있습니다.

겟위드

마찬가지로 Getwid 플러그인에는 Gutenberg 편집기와 완벽하게 호환되는 전체 블록 세트도 포함되어 있습니다. 신속하게 다음과 같이 완전히 반응하는 가격표를 쉽게 작성할 수 있습니다.

이 경우 글꼴과 배경 및 텍스트 색상을 사용자 지정할 수 있습니다.

구텐베르크를 위한 프리미엄 블록

Gutenberg 플러그인용 프리미엄 블록에는 매우 매력적인 가격표를 생성할 수 있는 블록도 포함되어 있습니다. 아래에는 열에 삽입된 가격표 블록으로 만든 가격표 이미지가 나와 있습니다.

이 블록을 사용하면 색상, 글꼴, 버튼 유형, 아이콘을 포함하려는 경우 가격 표시 속성, 기능 및 설명 등을 사용자 지정할 수 있습니다. 보시다시피, 매우 완벽한 사용자 정의가 가능합니다.

내장 편집기가 있는 플러그인

또는 WordPress 대시보드에 통합되고 매우 완전하고 사용자 정의된 테이블을 생성할 수 있는 내장 가격표 편집기가 포함된 다른 유형의 플러그인을 찾을 수 있습니다. 원하는 테이블이 생성되면 단축 코드를 사용하여 이 테이블을 모든 페이지나 게시물에 포함할 수 있습니다. 몇 가지 예를 살펴보겠습니다.

반응형 가격표

반응형 가격표는 가격표를 생성할 수 있도록 WordPress에 새 편집기를 추가하는 플러그인입니다. 많은 수의 계획을 추가하고 각각을 사용자 정의할 수 있습니다.

각 계획에 대해 이름, 부제목, 설명 및 가격을 추가할 수 있습니다. 기능 목록을 추가하고 구매 버튼을 사용자 정의하고 계획의 색 구성표를 변경할 수도 있습니다.

계획이 생성되면 가격 책정 페이지에서 단축 코드를 사용하여 추가하기만 하면 됩니다.

Supsystic의 가격표

Supsystic 가격 테이블 플러그인은 테이블을 작성할 수 있는 끌어서 놓기 편집기를 WordPress 대시보드에 추가합니다. 반응형 테이블 디자인을 많이 제공합니다. 무료 버전에서는 최대 7개의 디자인을 사용할 수 있습니다.

원하는 테이블 디자인을 선택하면 열 수를 수정하고 표시된 각 계획의 많은 기능을 사용자 지정할 수 있는 편집기가 생깁니다. 또한 언제든지 레이아웃을 변경할 수 있습니다. 마지막으로 이전과 마찬가지로 표는 단축 코드가 있는 모든 페이지 또는 게시물에 포함될 수 있습니다.

가격표 편집기를 통합하는 다른 무료 플러그인은 다음과 같습니다.

• ARPrice별 가격표
• 가격표 WordPress 플러그인 – Fatcat 앱의 쉬운 가격표
• 반응형 가격표 작성기 – wpPricing Builder
• WRC 가격표
• 가격 테이블 작성기 – AP 가격 테이블 라이트
• 테마별 TC 가격표 코드
• 가격표 – bh A WP Life

결론

보시다시피 WordPress에는 추가 비용 없이 직접 코딩할 필요 없이 가격표를 작성할 수 있는 다양한 대안이 있습니다. 따라서 요구 사항에 가장 적합한 옵션을 선택하기만 하면 됩니다.

제품 가격을 보여주는 페이지가 결국 고객을 확보하는 데 가장 중요하다는 것을 기억하십시오. 따라서 매력적으로 만드는 데 보내는 시간이 헛되지 않을 것입니다. 그리고 영감을 주기 위해 이 게시물의 주요 이미지로 눈에 띄는 Nelio A/B Testing 제품의 가격표 디자인을 볼 수 있습니다.