× 12월의 특별한 혜택 프리미엄 12개월 요금 결제 시 NHN KCP(전자결제 PG)가입비 22만원 면제! 자세히 보기
가이드
[요소 가이드] 통합검색(상단요소)
빈페이지닷컴 2020-08-19 09:26:08


<데스크톱 버전>


통합검색 요소 가이드


*통합검색 요소는 사이트 내 전체 게시판, 일정, 쇼핑 요소에 등록되어 있는 게시글, 상품을 원하는 키워드로 검색하여 검색 결과를 뿌려주는 기능입니다.

예를 들어 게시판 요소 자체에 달려있는 검색 기능은 해당 게시판에 있는 게시글만 검색할 수 있지만 통합 검색 요소를 이용하면 사이트 내 모든 게시판에서 원하는 키워드로 검색하여 검색 결과를 가져올 수 있습니다.







1) 통합검색 요소를 추가할 상단 섹션 위에서 마우스 우 클릭 팝업메뉴 호출 후-> 요소 추가를 클릭하여 요소 추가 사이드 바를 열고  "통합검색" 아이콘을 클릭하여 요소를 추가합니다.



image.png










2) 추가된 통합검색 요소를 적당한 위치에 배치한 후 요소 영역 위에서 마우스 우 클릭 팝업메뉴 호출 후 -> 통합검색 설정을 클릭하여 설정 창을 열어줍니다.



image.png











3) 설정 창의 기본 설정 메뉴 탭에서는 오버랩 상태가 아닌 경우에 대한 설정값을 지정할 수 있습니다.





-아이콘 스타일 : 아이콘 선택 / 아이콘의 기본 색상, Hover 색상 / 아이콘 크기 / 정렬 값을 지정할 수 있습니다.


-검색 카테고리 사용 설정 : 사용자가 통합검색 요소로 검색할 수 있는 범주를 설정할 수 있습니다. 예를 들어 게시판 검색을 체크해제 시 사용자가 통합검색으로 게시판의 게시물들은 검색할 수 없게 됩니다.

                                           (게시판이 없는 사이트인 경우 해제하는 식으로 활용하시면 좋습니다.)



image.png









4) 설정 창의 오버랩 설정 탭에서는 상단 영역이 오버랩(본문과 겹치기) 상태일 경우의 스타일 값을 지정할 수 있습니다. 오버랩 설정에서는 색상 관련된 스타일만 별도로 지정 가능하며, 그 외 설정값은 기본 설정과 공유합니다.



image.png











5) 사용자가 통합검색 아이콘을 클릭하면 위 그림과 같이 전체 화면 검색바가 노출됩니다. ( 편집모드에서는 검색 아이콘이 작동하지 않습니다. - 미리 보기 또는 실 사이트에서만 작동 )



(1) 검색하려는 유형의 검색 카테고리를 선택하는 선택폼 (게시판/일정/쇼핑)


(2) 검색 카테고리 선택 후 해당 카테고리 내 관련 키워드를 입력하여 검색하는 입력폼


(3) 검색하지 않고 검색 화면을 닫는 버튼



image.png









<검색 결과 화면 예시 - 쇼핑 카테고리 선택/검색어 "PANTS">



image.png









<모바일 버전>


통합검색 요소 가이드


*통합검색 요소는 사이트 내 전체 게시판, 일정, 쇼핑 요소에 등록되어 있는 게시글, 상품을 원하는 키워드로 검색하여 검색 결과를 뿌려주는 기능입니다.

예를 들어 게시판 요소 자체에 달려있는 검색 기능은 해당 게시판에 있는 게시글만 검색할 수 있지만 통합 검색 요소를 이용하면 사이트 내 모든 게시판에서 원하는 키워드로 검색하여 검색 결과를 가져올 수 있습니다.







1) 통합검색 요소를 추가할 상단 섹션 위에서 마우스 우 클릭 팝업메뉴 호출 후-> 요소 추가를 클릭하여 요소 추가 사이드 바를 열고  "통합검색" 아이콘을 클릭하여 요소를 추가합니다.



image.png










2) 추가된 통합검색 요소를 적당한 위치에 배치한 후 요소 영역 위에서 마우스 우 클릭 팝업메뉴 호출 후 -> 통합검색 설정을 클릭하여 설정 창을 열어줍니다.



image.png











3) 설정 창의 기본 설정 메뉴 탭에서는 오버랩 상태가 아닌 경우에 대한 설정값을 지정할 수 있습니다.





-아이콘 스타일 : 아이콘 선택 / 아이콘의 기본 색상, Hover 색상 / 아이콘 크기 / 정렬 값을 지정할 수 있습니다.


-검색 카테고리 사용 설정 : 사용자가 통합검색 요소로 검색할 수 있는 범주를 설정할 수 있습니다. 예를 들어 게시판 검색을 체크해제 시 사용자가 통합검색으로 게시판의 게시물들은 검색할 수 없게 됩니다.

                                           (게시판이 없는 사이트인 경우 해제하는 식으로 활용하시면 좋습니다.)



image.png









4) 설정 창의 오버랩 설정 탭에서는 상단 영역이 오버랩(본문과 겹치기) 상태일 경우의 스타일 값을 지정할 수 있습니다. 오버랩 설정에서는 색상 관련된 스타일만 별도로 지정 가능하며, 그 외 설정값은 기본 설정과 공유합니다.




image.png












5) 사용자가 통합검색 아이콘을 클릭하면 위 그림과 같이 전체 화면 검색바가 노출됩니다. ( 편집모드에서는 검색 아이콘이 작동하지 않습니다. - 미리 보기 또는 실 사이트에서만 작동 )



(1) 검색하려는 유형의 검색 카테고리를 선택하는 선택폼 (게시판/일정/쇼핑)


(2) 검색 카테고리 선택 후 해당 카테고리 내 관련 키워드를 입력하여 검색하는 입력폼


(3) 검색하지 않고 검색 화면을 닫는 버튼



image.png









<검색 결과 화면 예시 - 쇼핑 카테고리 선택/검색어 "RING">



image.png