일반 이미지 그리드는 방문자에게 주제별로 찾아볼 수 있는 방법을 제공하지 않습니다. The 필터링 가능한 이미지 갤러리 위젯 인 Elementor용 마스터 애드온 그것을 수정합니다. 카테고리 필터,호버 오버레이,리본, 라이트박스 링크를 표준 갤러리에 추가하므로 코드를 작성하지 않고도 필터링 가능한 포트폴리오 또는 제품 쇼케이스를 구축할 수 있습니다.
각 탭과 설정이 작동하는 방식은 다음과 같습니다. 따라서 다음을 설정할 수 있습니다 Elementor 필터링 가능한 갤러리 토글이 무엇을 하는지 추측하지 않고.
이 페이지는 설정 참조입니다. 라이브 예제와 위젯이 수행할 수 있는 작업에 대한 개요를 보려면 다음을 방문하세요 Elementor 필터링 가능한 갤러리 위젯 페이지.
필터링 가능한 이미지 갤러리 위젯이 수행하는 작업 #
위젯은 이미지 그리드를 표시하고 방문자가 카테고리별로 필터링할 수 있도록 합니다. 각 갤러리 항목은 제목,자막, 리본,호버 아이콘 및 두 개의 작업 버튼을 지원합니다. 레이아웃,간격, 오버레이 애니메이션 및 타이포그래피는 모두 Elementor 패널에서 제어되므로 포트폴리오,전자상거래 룩북,여행 갤러리 및 팀 사진 벽면에서도 동일한 위젯이 작동합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 도움이 필요하십니까? 참조 설치 가이드.
- 방문자가 필터링할 카테고리로 그룹화된 이미지입니다.
Elementor Filterable Gallery 위젯을 추가하는 방법 #
Elementor 편집기를 열고 검색합니다 필터링 가능한 갤러리 요소 패널에서 또는 마스터 애드온 섹션으로 스크롤합니다. 위젯을 페이지로 드래그합니다. 자리 표시자 갤러리 항목으로 로드되므로 화면에 즉시 작업할 내용이 있습니다.
콘텐츠 탭에서 갤러리를 구축하세요 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 콘텐츠 탭은 이미지를 추가하고, 필터 카테고리를 할당하고, 리본과 링크를 설정하는 곳입니다.
갤러리 내용 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 갤러리 내용 섹션은 리피터입니다. 각 항목은 하나의 이미지 카드를 나타냅니다. 클릭 항목 추가 더 많은 카드를 만들거나 중복 및 삭제 아이콘을 사용하여 관리하세요.
모든 항목에는 동일한 필드가 있습니다:
- 필터 라벨: 방문자가 필터링하는 데 사용하는 범주 예: 기술,자연, 건축.
- 이미지: 클릭하면 미디어 피커를 열고이 카드의 이미지를 선택할 수 있습니다. 한 번에 여러 가지를 선택할 수 있습니다.
- 제목: 이미지 아래 또는 위에 표시된 주요 제목입니다.
- 부제: 제목 아래에 작은 줄이 있습니다.
- 리본을 표시하시겠습니까?: 모서리 또는 인라인 배지를 추가하려면 토글하십시오.
- 리본: 인기 또는 새 배지 텍스트입니다.
- 팝업 또는 링크?: 카드가 라이트박스 팝업을 열지 아니면 URL로 연결되는지 선택하세요.
- 버튼 1 텍스트/URL: 첫 번째 작업 버튼의 레이블 및 대상입니다.
- 버튼 2 텍스트/URL: 두 번째 작업 버튼의 레이블 및 대상입니다.
이미지 해상도 및 열 #
중계기 아래에서 다음을 설정합니다 이미지 해상도 WordPress는 서비스를 제공해야 하며 그 수는 다음과 같습니다 열. 여섯 열은 당신에게 작은 썸네일을 제공합니다; 읽을 수있는 제목이 큰 카드를 원할 때 세 개로 떨어집니다. 실제 디스플레이 크기에 가까운 해상도를 선택하십시오. 그렇지 않으면 작은 카드에 전체 크기 이미지를로드하고 페이지가 비용을 지불합니다.
설정 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 설정 섹션은 전체 갤러리 동작을 제어합니다.
- 필터 Nav 표시?: 그리드 위에 카테고리 필터 버튼을 표시합니다.
- “모두” 필터 탭 표시: 방문자가 필터를 재설정할 수 있도록 모두 버튼을 추가합니다.
- 모든 카테고리 텍스트: 재설정 버튼의 레이블은 일반적으로 모두입니다.
- 도구 설명 표시?: 필터 버튼에 대한 도구 설명을 활성화합니다.
- 이미지 종횡비: 모든 이미지에 걸쳐 일관된 비율을 강제합니다.
- 홈통: 그리드 항목 사이의 공간입니다.
- 벽돌: 고르지 않은 이미지 높이를 위해 그리드를 석조 레이아웃으로 전환합니다.
- 호버 스케일: 호버에서 이미지를 약간 확대합니다.
- 규모 값: 1.1 과 같이 이미지가 얼마나 확대되는지.
- 기울기 효과: 커서 뒤에 오는 3D 기울기를 추가합니다.
오버레이 설정 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 오버레이 설정 섹션에서는 방문자가 항목 위에 마우스를 가져가면 나타나는 내용을 결정합니다.
- 제목 표시?: 항목 제목을 호버에 표시합니다.
- 자막 표시?: 자막을 호버에 표시합니다.
- 카테고리 표시?: 필터 카테고리 레이블을 표시합니다.
- 호버 아이콘?: 돋보기나 링크 기호와 같이 호버에 나타나는 아이콘을 추가합니다.
- 오버레이 유형: 오버레이가 나타날 때를 선택합니다. On Hover 가 가장 일반적입니다.
- 캡션: 이미지 아래의 캡션 영역을 전환합니다.
- 호버 방향: 방향성 호버 효과를 활성화합니다.
스타일 탭에서 갤러리 스타일 지정하기 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 스타일 탭은 카드 컨테이너, 이미지, 오버레이 및 버튼을 덮습니다.
품목 작풍 #
품목 작풍 카드 래퍼를 제어합니다. 패딩,여백, 테두리 유형,테두리 너비,테두리 색상 및 테두리 반경을 여기에 설정합니다. 반경이 작은 얇은 테두리는 밝은 배경에서 카드를 분리하는 빠른 방법입니다.
이미지 스타일 #
이미지 스타일 그림 자체와 호버 상태를 스타일링합니다.
- 이미지 스타일: 기본값 또는 호버 오버레이 모양을 선택합니다.
- 오버레이 색상을 호버링하십시오: 호버의 이미지를 덮는 색조입니다.
- 제목 스타일: 항목 제목의 색상 및 타이포그래피.
- 캡션 자막 스타일: 자막의 색상과 타이포그래피.
- 아이콘 스타일: 호버 아이콘의 아이콘 크기와 색상입니다.
오버레이 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 오버레이 섹션에서는 호버 애니메이션을 선택합니다. 옵션에는 페이드 인,왼쪽에서 슬라이드,위에서 슬라이드,아래에서 마스크,회전, 확대 및 확장이 포함됩니다. 페이드 인은 안전한 기본값입니다; 슬라이드 및 회전 변형은 포트폴리오에서 원할 수도 있고 원하지 않을 수도 있는 자체에 더 많은 관심을 끌 수 있습니다.
버튼 하나와 두 가지 스타일 #
액션 버튼을 따로 스타일링합니다. 각 버튼에는 타이포그래피,패딩, 텍스트 색상,배경색, 테두리,테두리 반경 및 상자 그림자에 대한 컨트롤이 있는 Normal 및 Hover 상태가 있습니다.
실시간 결과를 확인하세요 #
페이지를 게시하거나 미리 보기하여 최종 갤러리를 볼 수 있습니다. 방문자는 항목 위로 마우스를 가져가서 오버레이,제목 및 아이콘을 보거나 클릭하면 라이트박스 또는 링크를 열 수 있습니다. 필터 탐색을 활성화한 경우 카테고리 버튼을 클릭하여 일치하는 이미지만 표시할 수도 있습니다.
한 가지 확인해야 할 점: 필터 버튼이 라이브 페이지에서는 응답하지 않지만 편집기에서 제대로 작동하면 캐싱 또는 최적화 플러그인이 갤러리의 JavaScript 를 연기하거나 결합하고있을 것입니다. JS 최적화에서 Master Addon 스크립트를 제외하고 캐시를 지우십시오.
일반적인 사용 사례 #
- 포트폴리오 페이지: 클라이언트가 브랜딩, 웹 디자인 또는 사진으로 필터링하도록 합니다.
- 제품 카탈로그: 카테고리, 색상 또는 컬렉션별로 항목을 그룹화합니다.
- 여행 또는 부동산 갤러리: 위치 또는 속성 유형별로 필터링합니다.
- 팀 또는 이벤트 앨범: 부서 또는 세션별로 사진을 구성합니다.
더 나은 필터링 가능한 갤러리를 위한 팁 #
- 일관된 이미지 크기 사용. 특히 석조 공사가 꺼져 있을 때 그리드를 깔끔하게 유지합니다.
- 필터 라벨을 짧게 유지하십시오. 한두 단어가 필터 막대에 가장 잘 맞습니다.
- 이미지 종횡비를 활성화합니다 소스 이미지의 크기가 다른 경우.
- 강력한 호버 효과 하나를 선택하세요 스케일, 틸트 및 바쁜 오버레이를 쌓는 대신.
- 업로드하기 전에 이미지를 압축하세요. 압축되지 않은 사진으로 가득 찬 갤러리는 느린 페이지의 가장 일반적인 원인 중 하나입니다.
비디오 자습서 #
필터링 가능한 갤러리 위젯의 작동을 보고 싶다면 이 비디오는 라이브 페이지의 필터링된 그리드에 갤러리 항목을 추가하는 것부터 전체 설정을 살펴봅니다:
자주 묻는 질문 #
Elementor 에서 필터링 가능한 갤러리를 어떻게 만들 수 있나요?
Elementor 용 Master Addons 를 설치하고,필터링 가능한 갤러리 위젯을 추가하고,갤러리 항목을 만들고,각 항목에 필터 레이블을 할당하고,설정 섹션에서 필터 Nav 표시를 활성화합니다. 그런 다음 방문자는 카테고리 버튼을 클릭하여 그리드를 필터링할 수 있습니다.
마스터 애드온 필터링 가능 갤러리는 무료입니까?
예. 필터링 가능한 이미지 갤러리는 무료 Master Addons 플러그인의 일부이므로 Pro 라이센스가 필요하지 않습니다.
갤러리 이미지에 라이트박스를 추가할 수 있나요?
예. 각 갤러리 항목에 대해 팝업 또는 링크 옵션을 팝업으로 설정합니다. 그런 다음 방문자는 이미지를 클릭하여 라이트박스에서 열 수 있습니다.
위젯은 석조 레이아웃을 지원합니까?
예. 설정 섹션에서 Masonry 토글을 켜면 높이가 고르지 않은 Pinterest 스타일 레이아웃의 이미지가 표시됩니다.
갤러리 항목에 리본이나 배지를 추가할 수 있나요?
예. 갤러리 항목에서 리본 보기를 켜고 인기 또는 판매와 같은 리본 텍스트를 입력합니다. 리본이 이미지 카드에 나타납니다.
감싸는 #
마스터 애드온 필터링 가능한 이미지 갤러리 위젯은 정적 이미지 그리드를 카테고리 기반 갤러리 방문자가 실제로 찾아볼 수 있는 것으로 바꿉니다. 필터 탐색,호버 오버레이,리본, 라이트박스 지원이 모두 내장되어 있으므로 대부분의 프로젝트에서 별도의 갤러리 플러그인이 작동하지 않는 것을 볼 수 있습니다 필터링 가능한 이미지 갤러리 위젯 페이지.
더 많은 이미지 도구를 보려면 다음 항목을 탐색하세요 고급 이미지 위젯, 이미지 회전목마, 그리고 갤러리 슬라이더. 당신은 또한 우리의 검거를 읽을 수 있습니다 Elementor 필터링 가능한 갤러리 플러그인 또는 전체를 둘러보십시오 마스터 애드온 위젯 및 확장 컬렉션.
