Elementor에서 필터링 가능한 갤러리를 만드는 방법(2가지 방법)

주요 시사점

• Elementor 의 무료 이미지 갤러리 위젯에는 필터 막대가 없습니다. 제어 목록은 이미지,열, 간격,캡션, 링크 및 라이트박스입니다.
• 두 가지 경로가 카테고리 탭을 제공합니다: Pro 목록에 있는 Elementor의 갤러리 위젯 또는 무료 Elementor 설치의 애드온 위젯.
• 와 함께 마스터 애드온 필터링 가능한 이미지 갤러리 카테고리는 각 항목에 입력하는 필터 라벨에서 나오므로 하나의 이미지가 여러 카테고리에 포함될 수 있습니다.
• 필터 표시 Nav 및 “모두” 필터 표시 탭은 모두 기본적으로 켜져 있으며 모두 탭 텍스트를 편집할 수 있습니다.
• 탭이 나타나지 않으면 원인은 거의 항상 빈 필터 레이블, 필터 Nav 표시 스위치가 꺼져 있거나 이전 마크업을 제공하는 페이지 캐시입니다.

필터링 가능한 갤러리는 그 위에 일련의 카테고리 버튼이 있는 그리드입니다. 다른 모든 것이 시야에서 사라지는 동안 인물 사진을 클릭하면 인물 사진이 유지됩니다. 레이아웃 포트폴리오, 제품 카탈로그 및 사진 세트가 도달합니다. 한 가지 유형의 작품을 찾기 위해 40개의 이미지를 스크롤하는 것은 누구도 좋은 시간을 생각하지 못하기 때문입니다.

Elementor 는 이 작업을 수행할 수 있지만 무료 Image Gallery 위젯에서는 수행할 수 없습니다. 이 가이드에서는 두 경로를 모두 다룹니다: Elementor 자체에서 제공하는 것,그리고 무료 Elementor 에서 동일한 것을 빌드하는 방법은 애드온으로 설치합니다.

Elementor가 상자에서 제공하는 것

무료 Elementor 설치에서 위젯 패널을 열고 갤러리를 검색하면 이미지 갤러리 위젯을 얻을 수 있습니다. 제어 목록은 이미지 추가,이미지 해상도,열, 캡션,링크, 라이트박스,주문별 및 스타일 탭의 간격 슬라이더입니다. 열은 1 에서 10 까지 실행되며 4 에서 시작되며 캡션은 첨부 파일 캡션 또는 아무 것도 제공하지 않으며 링크는 이미지를 미디어 파일,첨부 페이지 또는 아무데도 보내지 않습니다. 그러면 라이트박스가 있는 그리드가 제공됩니다. 필터 바도 없고,메이슨도 없고,이미지별 제목도 없습니다.

Elementor 에는 Gallery 라는 두 번째 갤러리 위젯이 있으며 그 중 하나는 Pro 입니다. 레이아웃 옵션과 필터 막대를 보유합니다. Elementor 의 필터 막대 자체는 Pro 라이센스를 의미합니다.

경로 1: Elementor 갤러리 위젯(Pro)

Elementor Pro 에 대해 이미 비용을 지불했다면 여기에서 시작하십시오. 플러그인이 하나 적기 때문입니다. 갤러리 위젯은 하나의 위젯 안에 여러 갤러리를 보유하고 각각 이름을 지정하며 해당 이름은 필터 막대가됩니다.

1. 갤러리 위젯을 페이지로 드래그합니다.
2. 유형을 단일에서 다중으로 전환합니다. 단일이 기본값이며 필터 막대가 없습니다.
3. 갤러리 중계기에서 카테고리당 하나의 갤러리를 추가하고 해당 텍스트가 탭이 되므로 제목 필드를 채웁니다.
4. 레이아웃 선택: 그리드,Justified 또는 Masonry. 그리드 및 Masonry 는 데스크톱에서 4,태블릿에서 2,모바일에서 1 에서 시작하는 열 컨트롤을 사용합니다. Justified 는 행 높이를 대신 사용합니다.
5. “모두” 필터 스위치를 켜두고 “모두”가 너무 모호한 경우 “모두” 필터 라벨에서 이름을 바꿉니다.

트레이드 오프는 카테고리가 저장되는 방식입니다. 각 이미지는 떨어뜨린 갤러리에 속하므로 두 카테고리에 속하는 이미지는 두 번 추가해야 합니다. 아래의 애드온 경로는 대신 텍스트 필드로 이를 처리합니다.

경로 2: 마스터 애드온 위젯을 단계별로 살펴보세요

이 경로는 무료 Elementor 설치에서 작동합니다. Master Addons 를 설치하고 플러그인의 위젯 목록에서 Filterable Image Gallery 위젯이 활성화되어 있는지 확인한 다음 다음 단계를 따르십시오.

1단계: 위젯과 이미지를 추가합니다

Elementor 패널에서 Filterable Image Gallery 를 검색하고 드래그합니다. 이미지는 단일 미디어 피커가 아닌 Gallery Contents 리피터에서 한 번에 하나의 항목을 추가하므로 항목별 필드가 가능합니다.

열은 1 부터 6 까지의 숫자를 취하고 기본값은 3 입니다. 레이아웃을 계획하기 전에 알아야 할 한 가지: 이 컨트롤은 응답하지 않으므로 모든 화면 크기에 동일한 열 수가 적용됩니다. 그리드 자체는 여전히 좁은 화면에서 리플로우되지만 패널에서 데스크톱에 4 개의 열,태블릿에 2 개의 열을 설정할 수 없습니다.

2단계: 모든 항목에 필터 라벨을 지정합니다

리피터 행을 열면 카드를 구성하는 필드가 표시됩니다: 이미지, 제목, 자막, 리본, 팝업 또는 링크 동작, 자체 URL이 있는 두 개의 버튼 및 필터 라벨.

탭이 이 텍스트에서 만들어졌기 때문에 버튼에서 읽으려는 대로 카테고리 이름을 정확하게 입력합니다. 항목이 둘 이상에 속할 때 여러 카테고리를 쉼표로 구분합니다. 이는 Pro 경로가 이미지를 복제하지 않고는 수행할 수 없는 부분입니다.

3단계: 필터 막대를 켜고 모두 탭의 이름을 지정합니다

설정 섹션을 엽니다. 필터 표시 Nav 와 “모두” 필터 표시 탭은 모두 기본적으로 켜져 있으며 모든 카테고리 텍스트는 첫 번째 버튼이 말하는 것을 설정합니다. “모든 프로젝트”, “모두 쇼핑” 및 “전체 메뉴”는 모두 맨손 “모두”보다 더 잘 읽습니다.

4단계: 프런트 엔드에서 확인하세요

페이지를 저장하고 봅니다. 필터 막대가 그리드 위에 렌더링되고 모두 탭이 활성화되며 카테고리를 클릭하면 해당 레이블이 없는 모든 항목이 숨겨집니다.

필터의 동작 방식을 변경하는 설정입니다

위젯이 가지고 있지 않은 두 가지, 그래서 당신은 그들 주위에 계획 할 수 있습니다: 더 많은 버튼과 페이지 매김을로드하지 않습니다, 그래서 모든 항목은 페이지와로드, 검색 상자가 없습니다. 괜찮은 호스트에 괜찮 았 마흔 이미지 포트폴리오에 대한, 하지만 이백 이미지 아카이브는 페이지로 분할을 원한다.

필터 탭이 표시되지 않습니까? 이 네 가지를 확인하십시오

네 가지가 이를 유발하며, 처음 두 가지가 대부분을 차지합니다.

1. 빈 필터 레이블. 레이블이 없는 항목은 카테고리에 절대 가입하지 않으며, 항목이 없는 경우 탭을 빌드할 항목이 없습니다.
2. 필터 표시 Nav가 꺼졌습니다. 기본값은 켜짐이므로 일반적으로 누군가의 이전 편집입니다.
3. 캐시된 페이지. 페이지 캐시와 CDN 은 레이블을 추가하기 전의 마크업을 제공하므로 캐시를 지우고 하드 새로 고침으로 다시 로드합니다.
4. 한 문자씩 다른 레이블. 뒤에 공백이 있는 “초상화”와 “초상화”는 두 가지 범주이므로 각각 세트의 절반을 보유하는 두 개의 탭을 얻을 수 있습니다.

탭이 나타나지만 탭을 클릭해도 아무 것도 수행되지 않으면 필터링 스크립트가 실행되지 않습니다. 이는 같은 페이지의 다른 플러그인에서 JavaScript 오류가 발생하거나 파일을 연기하는 스크립트 최적화 프로그램을 가리킵니다. 해당 페이지에 대한 JS 결합을 끄고 다시 테스트합니다.

자주 묻는 질문

최종 생각

Elementor Pro 에서는 갤러리 위젯이 여러분을 데려다주고 아무것도 설치하지 않습니다. 무료 설치에서는 애드온 위젯이 이를 수행하며 필터 라벨 필드는 작업이 하나 이상의 범주에 속하는 모든 사람을 위한 가장자리를 갖습니다.

어느 경로를 택하든,카테고리 이름에 시간을 할애하십시오. 네 개의 명확한 카테고리는 방문자가 온 것에 그리드를 잘라; 아홉 개의 모호한 것들은 문제를 필터 막대로 옮깁니다.

관련 읽기

• 필터링 가능한 이미지 갤러리 위젯
• 최고의 Elementor 필터링 가능한 갤러리 플러그인
• 이미지 회전목마 위젯
• 갤러리 슬라이더 위젯