Elementor Filterable 갤러리 위젯 - 이미지를 필터링 가능하게 만듭니다
정적 갤러리는 이미지를 보여줍니다. 필터링 가능한 갤러리를 통해 사람들은 관심 있는 것을 찾을 수 있습니다. 필터링 가능한 이미지 갤러리 위젯은 포트폴리오,제품 카탈로그 또는 사진 컬렉션에 상단의 카테고리 막대를 제공합니다. 방문자는 탭을 클릭하고 그리드는 즉시 필터링되며 모든 항목에는 제목,자막 및 “세부 정보 보기” 또는 “라이브 데모”에 대한 두 가지 스타일 버튼이 있습니다.
위젯은 마스터 애드온 플러그인에서 무료이며 Elementor Pro 없이 작동합니다.
필터 탭의 작동을 참조하세요
이 그리드는 스크린샷이 아닌 위젯 그 자체입니다. 네 개의 카테고리와 그 위에 있는 All 탭이 있고,카테고리를 클릭하면 해당 레이블이 없는 모든 항목이 숨겨집니다. 여기 있는 각 카드에는 제목과 자체 필드에서 가져온 자막도 표시됩니다.
- 모든 목록
- 아파트
- 빌라
- 타운하우스
- 사무실
코브 스트리트 로프트
침대 2 개 · 욕조 1 개 · 940 평방 피트 — $2,450/mo
마리나 포인트 8B
침대 1 개 · 욕조 1 개 · 680 평방 피트 — $1,890/mo
리지웨이 빌라
침대 4 개 · 목욕 3 개 · 수영장 — $ 1.24M
느릅나무 위의 온실
침대 3 개 · 욕조 2 개 · 2,100 평방 피트 — $980,000
브릭레인 로우 12
침대 3개 · 욕조 2개 · 차고 — $720,000
앨더 코트 4
침대 2개 · 욕조 2개 · 벽으로 둘러싸인 정원 — $645,000
하버웍스, 3층
4,200 평방 피트 · 38 책상 — $6,400/mo
더 키 스튜디오
1,800 평방 피트 · 책상 16 개 — $2,950/mo필터링 가능한 갤러리 위젯으로 할 수 있는 작업
완전 제어로 카테고리 필터링
필터 막대를 활성화하면 방문자는 갤러리 위의 카테고리 버튼을 볼 수 있습니다: “모두”, “브랜딩”, “사진”, “웹 디자인”, 어떤 레이블을 설정하든 “모두” 탭의 이름을 바꾸고 막대를 왼쪽, 중앙 또는 오른쪽으로 정렬하고 활성 탭을 별도의 색상, 배경 및 테두리로 스타일 지정하여 사람들이 항상 선택한 것을 알 수 있도록 합니다.
- 필터 레이블 필드를 사용하여 각 이미지를 카테고리에 할당합니다. 여러 카테고리에 대해 쉼표로 구분합니다.
- 활성 상태 스타일링을 사용하면 선택한 탭이 나머지 탭보다 눈에 띕니다.
- 필터 바의 타이포그래피와 간격은 완전히 사용자 정의할 수 있습니다.
갤러리 레이아웃 및 3D 효과
열 수를 선택하고,Pinterest 스타일의 엇갈린 그리드에 대해 Masonry 를 활성화하고,Gutter 설정으로 간격을 제어합니다. 그런 다음 대화형 효과에 레이어: Hover Scale 은 마우스오버에서 항목을 확대하고,Tilt Effect 는 선택 사항인 눈부심 대신 갤러리를 고려하게 만드는 일종의 디테일입니다.
- 역동적이고 고르지 않은 이미지 높이를 위한 석조 레이아웃입니다.
- 원근감, 속도, 눈부심 강도를 조절할 수 있는 3D 틸트.
- 설정 가능한 전환 속도로 호버 스케일.
- 모바일에서 깔끔하게 쌓이는 반응형 컬럼.
스타일이 지정된 텍스트 오버레이 및 듀얼 CTA
모든 갤러리 항목은 제목,자막, 카테고리 라벨을 보여줄 수 있으며,각각 독립적인 타이포그래피와 색상이 있습니다. 호버링 시 오버레이 색상이 페이드 인되고 두 개의 버튼이 나타납니다: “세부 사항”과 “데모” (또는 어떤 텍스트를 쓰든). 두 버튼 모두 배경,텍스트 색상,경계, 반경,그림자에 대한 전체 일반 및 호버 상태 컨트롤이 있습니다.
- 제목 스타일, 자막 스타일 및 범주 스타일 섹션을 구분합니다.
- 항목당 두 개의 버튼이 있으며 각 버튼은 독립적으로 스타일이 지정됩니다.
- 아이콘 크기와 색상을 브랜드에 맞게 마우스를 올리세요.
- 매끄러운 전환이 가능한 이미지 오버레이 색상.
- 단일 이미지에 더 많은 호버 애니메이션을 원하십니까? Try the 이미지 호버 효과 위젯.
Elementor 에서 필터링 가능한 포트폴리오를 구축합니다
Elementor 의 자체 포트폴리오 위젯에는 Pro 가 필요합니다. 이 그리드는 Master Addon 에서 실행되므로 필터 막대는 무료 Elementor 설치에서 작동합니다. 모든 항목에는 프로젝트 제목,카테고리 또는 연도의 자막,두 개의 버튼 필드가 있으며,이는 포트폴리오 카드가 라이브 사이트와 사례 연구를 동시에 가리킬 수있는 방법입니다. 아래 버튼은 데모 페이지로 이동합니다.
- 모든 프로젝트
- 주거용
- 환대
- 소매
- 직장
Pro가 없는 Elementor의 필터링 가능한 갤러리입니다
Elementor 의 무료 이미지 갤러리는 라이트 박스가있는 그리드입니다. 전체 제어 목록은 이미지,열, 간격,캡션, 링크 및 라이트 박스이므로 필터 바가 없으며 석조도 없습니다. Elementor 는 라이센스가 들어오는 Pro 목록에 더 풍부한 갤러리 위젯을 유지합니다. 이 위젯은 무료 Elementor 설치에 필터 바를 추가합니다.
| 특징 | Elementor 이미지 갤러리 (무료) | 마스터 애드온 필터링 가능한 이미지 갤러리 |
|---|---|---|
| 카테고리 필터 탭 | 아니요 | 예, 항목별 필터 라벨에서 제공됩니다 |
| “전체” 탭 | 아니요 | 네, 본인 레이블로 |
| 벽돌 | 아니요 | 예 |
| 열 | 예 | 네, 1 대 6 입니다 |
| 라이트박스 | 예 | 예 |
| 캡션 | 첨부 캡션 | 항목별로 입력하는 제목, 자막 및 카테고리입니다 |
| 항목의 버튼 | 아니요 | 두 개, 각각 고유한 URL이 있습니다 |
| 리본 배지 | 아니요 | 예 |
| 호버에 3D 기울기 | 아니요 | 그래,눈부심으로 |
| Elementor Pro가 필요합니다 | 아니요 | 아니요 |
위젯이 하는 것과 하지 않는 것
아래의 모든 것은 위젯 패널에서 확인되었다. 후반부는 첫 번째만큼 중요하다: 페이징이나 검색 상자가 필요한 경우,이것은 잘못된 위젯이며 지금 아는 것이 좋습니다.
| 설정 | 지원되는 |
|---|---|
| 카테고리 필터 탭 | 예, 항목당 하나의 필터 라벨이 있고 둘 이상의 항목에 대해 쉼표가 구분되어 있습니다 |
| “전체” 탭 | 네, 그리고 이름을 바꿀 수 있습니다 |
| 벽돌 | 예 |
| 이미지 종횡비 자물쇠 | 예 |
| 열 | 1 에서 6, 각 스크린 크기를 위한 1 개의 가치 |
| 라이트박스 팝업 | 예 |
| 팝업 대신 링크 | 예 |
| 항목당 버튼 | 두 개, 각각 고유한 URL이 있습니다 |
| 리본 배지 | 예, 12개의 사전 설정과 할인 필드가 있습니다 |
| 제목, 부제 및 카테고리 라벨 | 예, 각각 고유한 타이포그래피가 있습니다 |
| 항목에 대한 도구 설명입니다 | 예 |
| 오버레이 | 호버링 시 항상, 절대로, 또는 호버링 시 숨으십시오 |
| 눈부심으로 3D 기울기 | 예 |
| 엔트리 애니메이션 | 예 |
| 버튼 더 불러오기 | 아니요 |
| 페이지 매김 | 아니요 |
| 검색 상자 | 아니요 |
| 비디오 항목 | 아니요 |
| 게시물이나 제품을 소스로 사용합니다 | 아니 갤러리는 네가 채우는 중계기야 |
필터링 가능한 갤러리 예제 및 사용 사례
- 포트폴리오: 방문자가 프로젝트 유형, 브랜딩, 웹, 사진, 일러스트레이션별로 필터링할 수 있습니다.
- 제품 카탈로그: “전체”, “신규 도착”, “판매”, “베스트 셀러” 카테고리 탭.
- 레스토랑 메뉴: “스타터”, “메인”, “디저트”, “음료”로 필터링합니다.
- 부동산 목록: “아파트”, “집”, “상업용”, “토지”.
- 웨딩 촬영: “의식”, “리셉션”, “초상화”, “세부 사항”.
- 대행사 사례 연구: 고객 산업 또는 서비스 유형별로 필터링합니다.
Elementor 에서 필터링 가능한 갤러리를 만드는 방법
- 위젯을 놓습니다. Elementor에서 마스터 애드온 아래의 “필터링 가능한 이미지 갤러리”를 검색하여 섹션으로 드래그하세요.
- 갤러리 항목 추가. 각 이미지에 대해 + 항목 추가 를 클릭합니다. 이미지를 업로드하고 제목과 자막을 작성하고 필터 레이블 (카테고리 이름) 을 설정하고 필요한 경우 버튼 텍스트와 링크를 추가합니다.
- 필터 막대를 활성화합니다. 필터 Nav 표시를 켜고 열 수를 설정하고 석조 또는 일반 그리드를 선택하고 홈통 간격을 조정합니다. 상호 작용을 위해 호버 스케일 및 기울기 효과 활성화.
- 스타일 모든. 스타일 탭에서 필터 막대,항목 카드,텍스트 오버레이,버튼 및 호버 상태를 디자인합니다. 완료되면 게시합니다.
필터링 가능한 이미지 갤러리에 대해 자주 묻는 질문입니다
필터링 가능한 이미지 갤러리 위젯은 무엇입니까?
모든 이미지 그리드를 카테고리 필터링 갤러리로 바꾸는 독립형 Elementor 위젯. 방문자는 필터 탭을 클릭하여 관련 항목만 표시합니다. 각 항목에는 제목,자막 및 두 개의 스타일이 지정된 클릭 유도 문구 버튼이 표시될 수 있습니다.
필터링 가능한 이미지 갤러리 위젯은 무료입니까?
예. 무료 Master Addons 플러그인이 함께 제공되므로 Elementor Pro 또는 Master Addons Pro 라이센스 없이 필터링 가능한 갤러리를 구축할 수 있습니다. 필요한 만큼 갤러리 항목을 추가할 수 있습니다.
필터 카테고리에 항목을 할당하려면 어떻게 해야 하나요?
각 항목의 갤러리 내용 섹션에서 필터 라벨 필드를 찾아 카테고리 이름 (“기술”, “브랜딩”, “사진”) 을 입력합니다. 하나의 필터 버튼 아래에 동일한 라벨 그룹을 가진 모든 항목을 쉼표로 구분하여 여러 카테고리에 항목을 할당합니다.
Elementor에는 필터링 가능한 갤러리가 있습니까?
Elementor 의 무료 이미지 갤러리는 일반 그리드이므로 필터 바가 없습니다. 갤러리 위젯 Elementor 는 Pro 와 함께 배송됩니다. 이 위젯은 무료 Elementor 설치에 카테고리 탭을 추가합니다.
이 위젯으로 포트폴리오를 구축할 수 있나요?
예. 각 항목은 프로젝트 제목,카테고리 또는 연도의 부제,자체 URL 이 있는 두 개의 버튼을 사용하므로 카드 한 장이 라이브 사이트와 사례 연구를 가리킬 수 있습니다.
방문자가 라이트박스에서 이미지를 열 수 있나요?
예. 각 버튼은 라이트박스 팝업,외부 URL 또는 사이트의 페이지로 링크할 수 있습니다. 갤러리 내용 섹션에서 항목당 링크 대상을 설정합니다.
갤러리가 모바일에서 반응합니까?
예. 열이 자동으로 쌓이면 작은 화면에서 4 개의 열이 2 개 또는 1 개가 됩니다. 필터 버튼이 맞도록 감싸집니다. Elementor 의 반응형 모드를 사용하여 모바일의 홈통 및 글꼴 크기를 구체적으로 조정하십시오.
일반 이미지 회전목마나 갤러리 슬라이더와 어떻게 다릅니까?
갤러리에 더 많은 로드 또는 페이지 매김이 있습니까?
아니요. 리피터의 모든 항목은 페이지로 로드되므로 40 개의 이미지 포트폴리오가 40 개를 한 번에 모두 배송합니다. 매우 큰 세트를 페이지에 걸쳐 분할하거나 이미지 파일을 가볍게 유지하십시오.
필터 탭이 표시되지 않는 이유는 무엇입니까?
확인해야 할 세 가지 사항: 필터 표시 설정 탭에서 Nav가 켜져 있고 모든 항목에 필터 레이블이 있으며 편집한 후 페이지 캐시가 지워졌습니다. 레이블이 비어 있는 항목은 카테고리에 가입하지 않습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
