Elementor Filterable 갤러리 위젯 - 이미지를 필터링 가능하게 만듭니다
정적 갤러리는 이미지를 보여줍니다. 필터링 가능한 갤러리를 통해 사람들은 관심 있는 것을 찾을 수 있습니다. 필터링 가능한 이미지 갤러리 위젯은 포트폴리오,제품 카탈로그 또는 사진 컬렉션에 상단의 카테고리 막대를 제공합니다. 방문자는 탭을 클릭하고 그리드는 즉시 필터링되며 모든 항목에는 제목,자막 및 “세부 정보 보기” 또는 “라이브 데모”에 대한 두 가지 스타일 버튼이 있습니다.
위젯은 마스터 애드온 플러그인에서 무료이며 Elementor Pro 없이 작동합니다.
필터링 가능한 갤러리 위젯으로 할 수 있는 작업
완전 제어로 카테고리 필터링
필터 막대를 활성화하면 방문자는 갤러리 위의 카테고리 버튼을 볼 수 있습니다: “모두”, “브랜딩”, “사진”, “웹 디자인”, 어떤 레이블을 설정하든 “모두” 탭의 이름을 바꾸고 막대를 왼쪽, 중앙 또는 오른쪽으로 정렬하고 활성 탭을 별도의 색상, 배경 및 테두리로 스타일 지정하여 사람들이 항상 선택한 것을 알 수 있도록 합니다.
- 필터 레이블 필드를 사용하여 각 이미지를 카테고리에 할당합니다. 여러 카테고리에 대해 쉼표로 구분합니다.
- 활성 상태 스타일링을 사용하면 선택한 탭이 나머지 탭보다 눈에 띕니다.
- 필터 바의 타이포그래피와 간격은 완전히 사용자 정의할 수 있습니다.
갤러리 레이아웃 및 3D 효과
열 수를 선택하고,Pinterest 스타일의 엇갈린 그리드에 대해 Masonry 를 활성화하고,Gutter 설정으로 간격을 제어합니다. 그런 다음 대화형 효과에 레이어: Hover Scale 은 마우스오버에서 항목을 확대하고,Tilt Effect 는 선택 사항인 눈부심 대신 갤러리를 고려하게 만드는 일종의 디테일입니다.
- 역동적이고 고르지 않은 이미지 높이를 위한 석조 레이아웃입니다.
- 원근감, 속도, 눈부심 강도를 조절할 수 있는 3D 틸트.
- 설정 가능한 전환 속도로 호버 스케일.
- 모바일에서 깔끔하게 쌓이는 반응형 컬럼.
스타일이 지정된 텍스트 오버레이 및 듀얼 CTA
모든 갤러리 항목은 제목,자막, 카테고리 라벨을 보여줄 수 있으며,각각 독립적인 타이포그래피와 색상이 있습니다. 호버링 시 오버레이 색상이 페이드 인되고 두 개의 버튼이 나타납니다: “세부 사항”과 “데모” (또는 어떤 텍스트를 쓰든). 두 버튼 모두 배경,텍스트 색상,경계, 반경,그림자에 대한 전체 일반 및 호버 상태 컨트롤이 있습니다.
- 제목 스타일, 자막 스타일 및 범주 스타일 섹션을 구분합니다.
- 항목당 두 개의 버튼이 있으며 각 버튼은 독립적으로 스타일이 지정됩니다.
- 아이콘 크기와 색상을 브랜드에 맞게 마우스를 올리세요.
- 매끄러운 전환이 가능한 이미지 오버레이 색상.
- 단일 이미지에 더 많은 호버 애니메이션을 원하십니까? Try the 이미지 호버 효과 위젯.
필터링 가능한 갤러리 예제 및 사용 사례
- 포트폴리오: 방문자가 프로젝트 유형, 브랜딩, 웹, 사진, 일러스트레이션별로 필터링할 수 있습니다.
- 제품 카탈로그: “전체”, “신규 도착”, “판매”, “베스트 셀러” 카테고리 탭.
- 레스토랑 메뉴: “스타터”, “메인”, “디저트”, “음료”로 필터링합니다.
- 부동산 목록: “아파트”, “집”, “상업용”, “토지”.
- 웨딩 촬영: “의식”, “리셉션”, “초상화”, “세부 사항”.
- 대행사 사례 연구: 고객 산업 또는 서비스 유형별로 필터링합니다.
Elementor 에서 필터링 가능한 갤러리를 만드는 방법
- 위젯을 놓습니다. Elementor에서 마스터 애드온 아래의 “필터링 가능한 이미지 갤러리”를 검색하여 섹션으로 드래그하세요.
- 갤러리 항목 추가. 각 이미지에 대해 + 항목 추가 를 클릭합니다. 이미지를 업로드하고 제목과 자막을 작성하고 필터 레이블 (카테고리 이름) 을 설정하고 필요한 경우 버튼 텍스트와 링크를 추가합니다.
- 필터 막대를 활성화합니다. 필터 Nav 표시를 켜고 열 수를 설정하고 석조 또는 일반 그리드를 선택하고 홈통 간격을 조정합니다. 상호 작용을 위해 호버 스케일 및 기울기 효과 활성화.
- 스타일 모든. 스타일 탭에서 필터 막대,항목 카드,텍스트 오버레이,버튼 및 호버 상태를 디자인합니다. 완료되면 게시합니다.
필터링 가능한 이미지 갤러리에 대해 자주 묻는 질문입니다
필터링 가능한 이미지 갤러리 위젯은 무엇입니까?
모든 이미지 그리드를 카테고리 필터링 갤러리로 바꾸는 독립형 Elementor 위젯. 방문자는 필터 탭을 클릭하여 관련 항목만 표시합니다. 각 항목에는 제목,자막 및 두 개의 스타일이 지정된 클릭 유도 문구 버튼이 표시될 수 있습니다.
필터링 가능한 이미지 갤러리 위젯은 무료입니까?
예. 무료 Master Addons 플러그인이 함께 제공되므로 Elementor Pro 또는 Master Addons Pro 라이센스 없이 필터링 가능한 갤러리를 구축할 수 있습니다. 필요한 만큼 갤러리 항목을 추가할 수 있습니다.
필터 카테고리에 항목을 할당하려면 어떻게 해야 하나요?
각 항목의 갤러리 내용 섹션에서 필터 라벨 필드를 찾아 카테고리 이름 (“기술”, “브랜딩”, “사진”) 을 입력합니다. 하나의 필터 버튼 아래에 동일한 라벨 그룹을 가진 모든 항목을 쉼표로 구분하여 여러 카테고리에 항목을 할당합니다.
방문자가 라이트박스에서 이미지를 열 수 있나요?
예. 각 버튼은 라이트박스 팝업,외부 URL 또는 사이트의 페이지로 링크할 수 있습니다. 갤러리 내용 섹션에서 항목당 링크 대상을 설정합니다.
갤러리가 모바일에서 반응합니까?
예. 열이 자동으로 쌓이면 작은 화면에서 4 개의 열이 2 개 또는 1 개가 됩니다. 필터 버튼이 맞도록 감싸집니다. Elementor 의 반응형 모드를 사용하여 모바일의 홈통 및 글꼴 크기를 구체적으로 조정하십시오.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
