동적 테이블
가격표,기능 차트,팀 디렉토리 – 데이터는 좋은 결정의 중추입니다. 그러나 기본 HTML 테이블은 “해결책”이 아닌 “스프레드 시트”를 비명을 지릅니다. 마스터 애드온 동적 테이블 요소는 구조화된 정보를 설계된 경험으로 바꿉니다. Elementor 편집기에서 직접 모든 테이블을 처음부터 정의하십시오. 헤더를 정의하고 텍스트,이미지, 아이콘 또는 게시물의 동적 콘텐츠로 본문을 채우십시오. 그런 다음 모든 수준에서 전문적인 스타일링을 적용하십시오: 헤더,각 행,개별 셀의 명확성을 만들고 중요한 것을 강조 표시하며 사람들이 실제로 읽고 싶어하는 데이터를 만드십시오.
시각적 드래그 앤 드롭 테이블 빌더
복잡한 단축 코드는 잊어버리세요. 직관적인 시각적 인터페이스에서 테이블의 전체 구조를 구축하세요. 테이블 헤드 열을 정의하는 것부터 시작하세요 (“기능,”“가격,”“계획”과 같은). 그런 다음 스프레드시트처럼 테이블 본문에 행을 추가하고 관리하세요. 다른 행이 필요하십니까? 항목 추가를 클릭합니다. 셀을 병합하시겠습니까? 복잡한 레이아웃에 대해 열 범위 및 행 범위 컨트롤을 사용합니다. 테이블을 구축하면서 테이블이 실시간으로 형성되는 것을 볼 수 있으므로 프로세스가 빠르고 정확하며 완전히 시각적으로 이루어집니다.
- 직관적인 헤더 설정: 편집기에서 직접 헤더 열을 추가하고 레이블을 지정하여 테이블의 구조를 정의합니다.
- 라이브 행 관리: 항목 추가 버튼을 사용하여 즉시 본문 행을 추가, 삭제 및 재정렬합니다.
- 셀 병합 전원: 열 범위 및 행 범위 옵션을 사용하여 헤더 그룹을 만들거나 키 셀을 강조 표시합니다.
별도의 헤더 및 바디 스타일링 컨트롤
훌륭한 테이블이 눈을 안내합니다. 헤더 행을 아래 데이터의 명확한 가이드로 돋보이게 합니다. 테이블 헤더를 완전히 독립적으로 스타일링합니다. 대담한 배경색,뚜렷한 텍스트 색상 및 강력한 타이포그래피를 제공합니다. 내부 셀 패딩을 조정하여 넓고 읽기 쉽게 만듭니다. 이렇게 하면 즉각적인 시각적 계층 구조가 생성되어 사용자가 몇 초 만에 데이터를 스캔하고 이해할 수 있습니다. 본문 행은 완벽한 대비를 위해 고유한 별도의 스타일링 컨트롤 세트를 얻습니다.
- 독립 헤더 스타일링: 고유한 배경색, 텍스트 색상 및 타이포그래피를 헤더 행에만 적용합니다.
- 셀 패딩 제어: 헤더 셀에 대한 사용자 정의 내부 셀 패딩을 설정하여 가독성과 디자인을 향상시킵니다.
- 본문별 스타일 지정: 테이블 본문 행을 고유한 배경, 텍스트 색상 및 정렬로 스타일 지정합니다.
셀 내용: 텍스트, 아이콘, 이미지 및 동적 데이터
각 셀은 더 풍부한 스토리를 전달할 수 있습니다. 간단한 텍스트를 넘어 이미지를 삽입하거나 라이브러리에서 아이콘을 선택하여 시각적 기능 체크마크 (✓) 또는 상태 표시기를 생성합니다. 가장 강력하게 동적 태그를 사용하여 테이블을 라이브 사이트 콘텐츠에 연결하십시오. 게시물 제목,사용자 정의 필드,ACF 값 또는 사용자 정보와 같은 데이터를 자동으로 가져옵니다. 제품 비교 테이블,직원 디렉토리 또는 자동으로 업데이트되는 이벤트 일정을 만듭니다 – 진정한 동적.
- 다중 형식 콘텐츠: 모든 본체 셀에 대해 텍스트, 이미지 또는 아이콘을 선택합니다.
- 아이콘 사용자 정의: 셀 내에 고유한 크기, 색상 및 패딩이 있는 스타일 아이콘입니다.
- 동적 태그 통합: 동적 데이터 소스 (예를 들어, 포스트 메타, 저자 이름, 사용자 정의 필드) 를 사용하여 셀을 자동으로 채웁니다.
- 유연한 정렬: 광택 레이아웃을 위해 각 셀 내 콘텐츠의 수평 및 수직 정렬을 제어합니다.
글로벌 테이블 스타일링 및 전문 효과
전체 테이블을 글로벌 디자인 설정과 함께 묶습니다. 스트라이프 테이블 행을 활성화하여 클래식하고 스캔하기 쉬운 모양을 만들고 교대 행 색상을 선택합니다. 전체 테두리 유형,너비 및 전체 테이블 그리드에 대한 색상을 제어합니다. 범용 내부 셀 패딩을 설정하여 일관된 간격을 유지합니다. 전체 테이블 컨테이너에 배경 유형 (색상,그라디언트) 을 추가합니다. 이러한 글로벌 터치는 테이블이 개별 셀의 집합이 아닌 응집력 있고 특수 제작된 요소처럼 보이도록 합니다.
- 얼룩말 줄무늬: 줄무늬 테이블을 켜고 행을 번갈아 가며 색상을 선택하면 가독성이 크게 향상됩니다.
- 테두리 스타일링: 전체 테이블의 격자선에 대한 테두리 유형, 두께 및 색상을 정의합니다.
- 컨테이너 디자인: 배경을 추가하고 전체 테이블의 패딩 및 여백을 제어합니다.
- 일관된 간격: 모든 셀에서 균일하고 편안한 간격을 보장하기 위해 전역 내부 셀 패딩을 적용합니다.
동적 테이블에 대해 자주 묻는 질문
이 테이블을 사용자 지정 게시물 유형 또는 고급 사용자 지정 필드 (ACF) 에 연결할 수 있습니까?
예,할 수 있습니다! 본문 셀 콘텐츠 선택기에서 사용할 수 있는 동적 태그 기능을 통해. 셀을 편집할 때 데이터베이스 아이콘을 클릭하여 동적 태그 패널을 엽니다. 그런 다음 “게시물 제목,”“사용자 지정 필드,”“ACF 필드” 등과 같은 소스에서 선택하여 게시물,제품 또는 사용자 지정 게시물 유형의 실시간 데이터로 테이블을 채울 수 있습니다.
모바일 장치에서 테이블이 반응합니까?
절대적으로. 테이블은 반응형으로 설계되었습니다. 매우 작은 화면에서는 Elementor 에서 가로 스크롤 컨테이너를 활성화하거나 열 수를 단순화 할 수 있습니다. 스타일링 (패딩,글꼴 크기) 이 적응되며 Elementor 의 반응형 편집 모드를 사용하여 모바일 뷰에 맞게 특별히 설정을 조정할 수 있습니다.
이 요소를 사용하여 "강조된" 열이 있는 가격 테이블을 만들 수 있습니까?
확실히. 각 가격 계층에 대한 열을 만들 것입니다. 하나의 열을 강조 표시하려면 (“인기” 계획처럼) 배지의 헤더 셀에 있는 열 범위 기능을 사용한 다음 사용자 정의 CSS 클래스를 추가하거나 고급 설정에서 사용 가능한 경우 개별 셀 스타일링 옵션을 사용하여 해당 특정 열의 모든 셀에 다른 배경색을 적용할 수 있습니다.
셀에 매우 긴 텍스트를 추가하면 어떻게 되나요?
동작을 제어합니다. 확장을 제어하기 위해 열에 대한 사용자 지정 너비를 설정할 수 있습니다. 텍스트는 타이포그래피 및 패딩 설정을 기반으로 셀 내에서 래핑됩니다. 긴 콘텐츠의 경우 가독성을 유지하기 위해 적절한 행 높이 (수직 패딩으로 제어) 를 확보하십시오.
HTML 위젯이나 테이블 플러그인을 사용하는 것과 비교하면 어떻게 될까요?
이 요소는 Elementor 내에서 시각적 디자인 제어를 제공합니다. 기본 HTML 위젯과 달리 스타일 테두리,색상 또는 정렬에 코드를 작성할 필요가 없습니다. 많은 테이블 플러그인과 비교하여 Elementor 의 워크 플로우 및 스타일링 시스템과 원활하게 통합되어 다른 독립 실행형 플러그인으로 사이트를 부풀리지 않고보다 통일되고 효율적인 디자인 경험을 제공합니다.
테이블 데이터를 동적으로 정렬하거나 필터링할 수 있습니까?
이 요소는 주로 정적 또는 동적으로 채워진 디스플레이 테이블을 위한 것입니다. 데이터 테이블 플러그인과 같은 내장된 프런트 엔드 정렬,필터링 또는 검색 기능은 포함하지 않습니다. 이러한 고급 대화형 기능의 경우 전용 솔루션이 필요합니다. 이 요소는 가격,사양 또는 일정과 같은 고정된 정보를 아름답게 디자인된 형식으로 제시하는 데 적합합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
