Divi 플러그인 하이라이트: 테이블 메이커

Divi에는 많은 모듈이 있지만 테이블을 빌드하는 모듈은 없습니다. 다행히도 해결책이 있습니다. Table Maker는 Divi Builder로 완전히 사용자 정의 가능한 테이블을 만들 수 있는 타사 플러그인입니다. 이것이 Divi 웹사이트에 적합한 플러그인인지 결정하는 데 도움을 주기 위해 이 기사에서는 Table Maker를 살펴보고 어떤 기능을 할 수 있는지 알아보겠습니다.

테이블 메이커 설치

설치는 간단하고 간단합니다.

1. 플러그인 > 새로 추가 > 플러그인 업로드로 이동합니다.
2. 파일 선택 클릭
3. 컴퓨터에서 플러그인의 zip 파일을 찾아 선택합니다.
4. 지금 설치를 클릭하십시오
5. 활성화 클릭

테이블 메이커 모듈

Table Maker라는 새 모듈이 Divi Builder에 추가되었습니다. 주요 기능을 살펴보겠습니다.

테이블 메이커 콘텐츠 탭

콘텐츠 탭에는 하위 모듈 영역이 있습니다. 이들은 테이블에 대한 열을 만드는 데 사용됩니다. 열의 경우 머리글과 바닥글 수, 열과 행의 크기를 조정하고, 각 장치 유형에 대한 응답 중단점을 조정하고, 스크롤을 활성화하고, 아이콘, 버튼 및 이미지를 선택할 수 있습니다. 아이콘, 버튼 및 이미지에는 크기, 색상, 배치 등에 대한 사용자 정의가 있습니다.

열 하위 모듈

하위 모듈은 열을 정의하고 행에 내용을 추가하는 필드를 포함합니다. 각 행에 번호가 매겨진 코드 편집기와 매우 유사하게 작동합니다. 너비, 아이콘, 버튼 및 이미지를 조정할 수도 있습니다.

첫 번째 줄은 기본적으로 열의 제목이지만 머리글을 원하지 않는 경우 변경할 수 있습니다. HTML을 포함할 수 있습니다. 즉, 마크업에 사용되는 특정 문자를 피해야 합니다. CSS, 단축 코드, iFrame, 아이콘, 이미지, 버튼 등을 추가할 수도 있습니다.

열에는 텍스트, 배경, 셀, 머리글 및 바닥글 셀 등을 포함한 모든 요소에 대한 디자인 사용자 정의가 포함됩니다.

원하는 만큼 열을 만듭니다. 독립적으로 스타일을 지정하고, 스타일을 하나에서 다른 것으로 확장하는 등의 작업을 수행할 수 있습니다. 4개의 열을 추가하고 각 열의 색상과 너비를 개별적으로 조정했습니다.

머리글 및 바닥글

머리글과 바닥글의 열 수를 설정할 수 있습니다. 기본적으로 머리글은 1개이고 바닥글은 없습니다. 이 예에서는 처음 2개를 머리글로, 마지막 2개를 바닥글로 설정했습니다. 색상은 독립적으로 스타일이 지정됩니다.

행에 대해서도 동일한 작업을 수행할 수 있습니다. 이 예에서는 2개의 행을 머리글(왼쪽에 2개)로 설정하고 1개 행을 바닥글(오른쪽에 1개)로 설정했습니다.

테이블 스크롤

테이블 스크롤은 가로 및 세로 스크롤을 모두 제공합니다. 원하는 경우 열 및 행 머리글을 고정할 수 있습니다. 이렇게 하면 화면 밖으로 스크롤되지 않도록 제자리에 유지됩니다. 이 예에서는 스크롤을 활성화하고 헤더를 고정으로 만들었습니다. 세로로 스크롤할 수 있도록 열을 많이 추가했습니다. 행 머리글은 그대로 유지됩니다.

테이블 아이콘

각 셀에 원하는 만큼 아이콘을 추가할 수 있습니다. 기본 아이콘을 설정하고 각 셀에 대해 개별적으로 아이콘을 선택합니다. 기본 아이콘을 선택하고 콘텐츠 탭에서 크기와 색상을 조정합니다.

아이콘은 하위 모듈의 콘텐츠 영역에 있는 아이콘 태그를 사용하여 표시하려는 특정 셀에 추가됩니다. 기본 아이콘을 무시하고 하위 모듈의 아이콘 탭에서 선택하여 이 열에 대한 기본값을 설정할 수 있으며 표시하려는 특정 아이콘의 이름을 입력할 수 있습니다. 우아한 테마 마켓플레이스의 판매 페이지는 아이콘 목록과 아이콘 이름에 대한 링크를 제공합니다.

테이블 버튼

테이블 버튼도 태그를 사용하여 추가됩니다. 콘텐츠 탭에서 기본 버튼을 추가합니다. 이 설정에서 버튼의 스타일을 지정할 수도 있습니다. 각 열 하위 모듈 내에서 동일한 설정으로 기본 버튼을 재정의합니다.

하위 모듈의 콘텐츠 영역에 버튼 태그를 사용하여 각 셀에 버튼을 추가합니다. 태그 내에 추가하여 버튼의 텍스트를 변경합니다. 이 예에서는 기본 버튼 몇 개를 추가하고 두 번째 버튼의 텍스트를 변경했습니다.

테이블 이미지

셀에 이미지, 아이콘 및 기타 유형의 콘텐츠를 추가할 수 있습니다. 이미지 품질, 비율, 배율, 수평 및 수직 정렬을 설정합니다. 이미지에 대한 많은 옵션이 있습니다.

이미지가 갤러리에 추가되더라도 표시할 셀을 알려줄 때까지는 표시되지 않습니다. 이 작업은 태그를 사용하여 수행됩니다. 여는 이미지 태그를 입력하면 닫는 태그가 자동으로 추가되고 이미지가 해당 셀 내에 표시됩니다. 셀의 다른 내용과 함께 이를 포함할 수 있습니다. 태그 사이에 숫자를 추가하여 표시할 특정 이미지를 지정합니다.

테이블 메이커 디자인 탭

디자인 탭에는 표 프레임, 줄무늬, 셀, 텍스트, 머리글, 바닥글, 크기 조정, 간격, 테두리 등에 대한 설정이 포함되어 있습니다. 주요 설정은 다음과 같습니다.

테이블 프레임

디자인 탭에는 테이블 프레임, 셀, 텍스트, 머리글, 행, 바닥글, 크기 조정, 간격, 테두리 등에 대한 사용자 정의가 포함됩니다. 이것이 테이블 프레임입니다. 기본 프레임 유형은 셀 사이에 약간의 공간을 배치하는 간격을 사용합니다. 이것은 셀 사이의 경계를 제거하는 None입니다.

간격의 경우 열과 행 간격을 개별적으로 조정할 수 있습니다. 열 간격을 8px로, 행 간격을 4px로 늘렸습니다.

선은 각 셀 주위에 테두리를 배치합니다. 선의 스타일, 색상 및 두께를 제어할 수 있습니다. 이것이 기본값입니다.

이 예에서는 스타일을 점으로 설정하고 색상을 변경하고 선 너비를 3px로 조정했습니다.

테이블 스트라이프

표 줄무늬는 표준 스프레드시트와 같은 줄무늬 효과를 만듭니다. 적용할 위치를 선택하고 순서를 선택하고 색조, 채도 및 밝기를 조정할 수 있습니다. 이것이 기본 설정입니다.

이 예에서는 줄무늬 색조를 86deg로, 채도를 172%로, 밝기를 82%로 조정했습니다. 세 가지 조정이 모두 함께 작동하여 흥미로운 색상 옵션을 만듭니다.

이 예에서는 표 셀, 머리글 셀 및 열 머리글 셀의 색상을 조정했습니다.

이 예에서는 머리글 셀에 #1 상자 그림자를 추가하고 행 머리글 셀에 #3 상자 그림자를 추가했습니다. 각 셀 유형에 대한 텍스트의 수평 및 수직 정렬을 개별적으로 중앙에 배치했습니다. 나는 또한 간격을 위한 더 많은 공간을 추가했습니다.

머리글 및 바닥글 스타일 지정

머리글 및 바닥글 텍스트와 셀의 색상을 개별적으로 지정할 수 있습니다. 이 예에서는 바닥글을 추가하고 텍스트를 흰색으로 모두 대문자로 표시하고 셀 색상을 진한 파란색으로 설정하고 셀에 상자 그림자를 추가했습니다.

이 예에서는 셀, 머리글 셀 및 바닥글 셀의 테두리를 독립적으로 조정했습니다.

테이블 메이커 예

5개의 열, 열 머리글 및 행 머리글이 있는 테이블을 만들었습니다. 행 헤더에는 각 제품의 제품 페이지로 이동하는 쇼핑 버튼과 제품 이미지가 있습니다. 두 헤더 모두 검정색 배경, 둥근 모서리 및 레이아웃의 글꼴을 사용합니다.

셀은 줄무늬, 레이아웃의 더 큰 글꼴 및 둥근 모서리를 사용합니다. 마지막 열에는 제품의 재고 여부를 나타내는 아이콘이 표시됩니다. 각 헤더와 셀에 상자 그림자를 추가했습니다. 테이블 프레임은 열 간격에 대해 4픽셀, 행 간격에 대해 7픽셀의 간격을 사용합니다.

다음은 행 헤더에 이미지가 없는 동일한 디자인입니다.

다음은 모바일에 표시되는 제품 이미지의 레이아웃입니다. 테이블을 2개의 열로 줄이며 하나는 행 머리글입니다. 이것은 열로 나눕니다.

행별로 나누도록 할 수도 있습니다. 이 예에서는 이미지를 제거하고 행별로 구분된 테이블을 보여줍니다.

이것은 행을 아코디언으로 표시합니다. 하나를 클릭하면 콘텐츠가 표시됩니다.

테이블 메이커 구입처

Divi Marketplace에서 Table Maker를 구입할 수 있습니다. 무제한 웹사이트의 경우 35달러이며 30일 환불 보증과 1년 지원 및 업데이트가 포함됩니다. 문서는 비디오 연습 및 텍스트로 제공됩니다.

마무리 생각

이것이 Divi용 Table Maker의 모습입니다. 여기에서 다루지 않은 몇 가지를 포함하여 Divi용 테이블을 만들고 사용자 지정하는 많은 기능이 있습니다. 이미지, 아이콘 및 버튼을 사용하는 방법을 보려면 문서만 필요했습니다.

처음에는 태그를 사용하여 테이블에 버튼, 아이콘, 이미지를 추가하는 것이 조금 어색해 보였지만 하기 쉽고 셀에 대한 내용이 코드 편집기로 추가되기 때문에 훨씬 더 많은 제어가 가능합니다' d 일반적으로 가지고 있습니다.

Table Maker는 Divi로 테이블을 생성하기 위한 훌륭한 플러그인입니다. HTML, 단축 코드, iFrame, CSS 등과 같은 콘텐츠를 추가할 수 있어 생성할 수 있는 테이블 유형이 크게 향상됩니다. Divi로 자신만의 맞춤형 테이블을 구축하는 데 관심이 있다면 Table Maker를 고려해 볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi용 Table Maker를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

PCH.Vector/Shutterstock.com을 통한 추천 이미지