주요 시사점
- 6 개의 예제는 모두 동일한 위젯으로 구축 된 라이브 데모 페이지이므로 각 페이지를 열고 탭을 직접 클릭 할 수 있습니다.
- 모든 항목은 4가지 카테고리와 노트북의 한 줄에 막대를 유지하는 모두 탭을 사용합니다.
- 모든 탭은 각 디자인에서 이름이 변경됩니다: “모든 목록”, “전체 메뉴”, “모든 작업”, “모든 프로젝트”, “모두 쇼핑” 및 “모든 대상”.
- 열 수는 인테리어 사례 연구의 경우 2개부터 레스토랑 메뉴 및 상점 그리드의 경우 4개까지입니다.
- 모든 카드에 있는 6개의 버튼 중 2개는 이미지를 여는 호버 아이콘을 사용하고, 2개는 둘 다 사용하지 않습니다.
필터링 가능한 갤러리는 무엇을 보유하고 있는지에 따라 다르게 보입니다. 레스토랑 메뉴는 가격이있는 조밀한 4 개의 열 카드를 원하고 인테리어 스튜디오는 두 개의 큰 열과 사례 연구 링크를 원하며 사진 작가는 모든 것을 담을 수있는 사진을 원합니다.
아래의 6 가지 디자인은 클릭할 수 있는 라이브 데모 페이지입니다. 각 항목은 카테고리,열 수 및 해당 문자를 제공하는 설정을 기록하므로 콘텐츠와 일치하는 모양을 복사할 수 있습니다.
목차
여섯 가지 예를 한눈에 살펴보세요
| 예 | 카테고리 | 항목 | 열 | 카드 링크 |
|---|---|---|---|---|
| 부동산 목록 | 아파트, 빌라, 타운하우스, 사무실 | 8 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 80 X 80 X 80 X 80 X 80 | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 두 개의 버튼 |
| 레스토랑 메뉴 | 작은 접시, 메인, 디저트, 칵테일 | 8 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 80 X 80 X 80 X 80 X 80 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 4 | 호버 아이콘 |
| 웨딩촬영 | 시상식, 초상화, 리셉션, 세부정보 | 9 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 호버 아이콘 |
| 인테리어 프로젝트 | 주거, 환대, 소매, 직장 | 8 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 80 X 80 X 80 X 80 X 80 | 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2 | 버튼 하나 |
| 제품 카탈로그 | 가방, 신발, 시계, 겉옷 | 8 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 80 X 80 X 80 X 80 X 80 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 4 | 두 개의 버튼 |
| 여행 목적지 | 유럽, 아시아, 미주, 아프리카 | 8 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 80 X 80 X 80 X 80 X 80 | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 호버 아이콘 |
필터링 가능한 갤러리 예제
1. 부동산 리스팅
네 가지 카테고리에 걸쳐 여덟 개의 목록,모든 탭의 이름이 “모든 목록”으로 변경됩니다. 각 카드는 속성의 이름을 제목으로,규격 라인을 부제로 전달하므로 “2 침대,1 욕조,940 평방 피트,$2,450/mo”가 사진 아래에 있습니다. 카드 당 두 개의 버튼은 방문자가 원하는 두 가지를 처리합니다: 세부 사항,그리고보기.
복사할 가치가 있는 디테일은 리본입니다: 8 장의 카드 중 2 장에 새 카드 또는 가격 하락이라고 적힌 코너 배지가 레이아웃을 건드리지 않고도 눈을 당깁니다.
2. 레스토랑 메뉴
어두운 배경에 4 개의 열이 있으며 모든 탭은 “전체 메뉴”라고 읽습니다. 요리 이름은 제목이고 가격은 두 필드의 전체 메뉴 구조 인 부제입니다. 코스가 필터가되므로 디저트 만 원하는 방문자는 한 번의 클릭으로 거기에 도착합니다.
사진이 단일 접시의 꽉 작물이기 때문에 네 개의 열이 여기에서 작동합니다. 네 개의 열에서 넓은 장면 사진은 읽을 수 없을 것입니다.
3. 웨딩 사진
아홉 개의 프레임,하루의 네 부분,그리고 거의 텍스트가 없습니다. 올 탭은 “모든 작업”이라고 말하고 카드는 버튼이 아닌 호버 아이콘을 사용하므로 클릭하면 멀리 탐색하는 대신 그림을 열 수 있습니다. 이것은 사진이 제품 일 때 복사하는 디자인입니다.
그것이 작동하게 만드는 것은 그것이 빠져 나가는 것입니다: 리본도 없고, 버튼도 없고, 이미지와 경쟁하는 자막도 없습니다.
4. 인테리어 프로젝트
두 개의 열,그래서 각 프로젝트는 실제 공간을 얻습니다. 오버레이가 호버링이 아닌 항상 표시되도록 설정되어 있습니다. 카드당 하나의 버튼으로 “사례 연구 보기”를 읽습니다. 필터 막대는 중앙이 아닌 왼쪽으로 정렬되어 편집의 느낌에 맞습니다.
두 개의 열은 두 번째 살펴볼 가치가 있는 작업에 복사할 가치가 있는 선택입니다. 두 개의 열에 있는 여덟 개의 프로젝트는 여전히 스크롤의 한 화면에 들어맞습니다.
5. 제품 카탈로그
네 개의 열,제목으로 제품 이름,자막으로 가격,그리고 “빠른 보기”와 “가방에 추가”라고 적힌 두 개의 버튼. 모두 탭에는 “모두 쇼핑하기”라고 적혀 있습니다. 하나가 아닌 상점 페이지처럼 보입니다: 카드는 제품이 아닌 링크가있는 이미지이므로 카트에 아무것도 들어 가지 않습니다. 상점을 가리키는 룩북의 경우 그것으로 충분합니다.
두 개의 버튼 패턴은 유용한 부분입니다: 하나의 부드러운 동작, 하나의 단단한 동작.
6. 여행지
대륙을 필터로,모두 탭의 이름이 “모든 대상”으로 변경됩니다. 호버 스케일이 다른 데모보다 높게 설정되어 카드가 커서 아래에서 더 눈에 띄게 들어옵니다. 제목이 장소 이름을 지정하고 자막이 세부 정보를 추가합니다.
이름이 바뀐 All 탭은 여기서 실제 작업을 합니다. “모든 목적지”는 방문자에게 세트가 무엇인지 알려줍니다; “모든”은 아무것도 알려주지 않습니다.
여섯의 공통점
- 여섯 가지 디자인 모두에서 네 가지 범주. 네 개의 탭 플러스 모두 노트북에서 한 줄에 맞는 및 휴대 전화에서 두에 감싸.
- 모두 탭은 매번 이름이 바뀌며 6개의 서로 다른 레이블이 있으며 기본값에는 레이블이 남지 않습니다.
- 텍스트를 전혀 사용하는 모든 디자인에서 상단의 제목, 아래의 세부 정보입니다.
- 열 수는 사진에 따라: 꽉 작물은 네 개의 열을, 장면과 객실은 두 개 또는 세 가지를 취할.
- 버튼이나 라이트박스 아이콘 등 카드당 한 번의 클릭 동작은 둘 다 아닙니다.
이 중 하나를 구축
각 디자인은 서로 다른 설정을 가진 동일한 위젯입니다. 빌드는 다음과 같습니다: 이미지당 항목을 추가하고 각 항목에 필터 레이블을 입력하여 탭을 만들고 열을 설정한 다음 카드가 이미지 종횡비로 균일한 높이로 자르는지 아니면 자체 비율을 유지할지 결정합니다. 제목,자막 및 오버레이 동작은 오버레이 설정 섹션에 있으며 두 개의 버튼은 각 항목에 있습니다.
전체 연습이 시작되었습니다 elementor 에서 필터링 가능한 갤러리를 만드는 방법그리고 위젯 자체는 입니다 필터링 가능한 이미지 갤러리.
자주 묻는 질문
이러한 예제를 템플릿으로 가져올 수 있습니까?
가져오기 가능한 키트가 아닌 데모 페이지입니다. 구조가 소수의 설정과 자신만의 이미지이기 때문에 하나를 다시 만드는 데 약 10분이 소요됩니다.
필터 바에는 몇 개의 카테고리가 있어야 합니까?
네 개는 여섯 가지 디자인 모두에 걸쳐 있는 패턴입니다. 여섯 개를 지나서 바는 노트북으로 감싸고 두 번째 메뉴처럼 읽기 시작합니다.
하나의 이미지가 두 개의 탭 아래에 나타날 수 있습니까?
예. 필터 라벨 필드에 두 범주 이름을 모두 넣고 쉼표로 구분합니다.
데모는 석조물을 사용합니까?
아니. 모든 여섯 크롭 카드 균일 한 높이로,그리드가 깔끔하게 보이는 이유입니다. Masonry 는 혼합 방향의 세트에 대한 별도의 스위치입니다.
상점 예에서는 결제를 받을 수 있나요?
아니요. 버튼이 있는 갤러리이므로 카드는 가리키는 곳마다 연결됩니다. 체크아웃은 WooCommerce 에 속합니다.
최종 생각
여섯 가지 디자인,하나의 위젯,그리고 이들 사이의 네 가지 결정: 열 수,카드 자르기 여부,버튼이 수행하는 작업,모든 탭을 호출하는 작업. 콘텐츠에 가장 가까운 예제에서 시작하여 해당 네 가지를 변경합니다.
관련 읽기
