검색 양식 및 아이콘 팝업
모든 디자인이 전체 검색창을 위한 공간이 있는 것은 아닙니다. 그래서 두 가지 뚜렷한 유형을 제공합니다. 항상 보이는 전통적인 입력 필드와 버튼에 “양식”을 선택하십시오. 사이드바나 영웅 아래에 딱 맞습니다. 또는 클릭하면 우아한 팝업 검색 오버레이를 여는 매끄럽고 공간 절약적인 돋보기에 “아이콘”을 선택하십시오. 이렇게 하면 사용자가 필요할 때까지 디자인을 깨끗하게 유지할 수 있습니다. 양식의 버튼 텍스트와 팝업 트리거의 정확한 아이콘을 제어할 수 있습니다.
- 양식 유형: 사용자 정의 가능한 제출 버튼(텍스트 또는 아이콘)이 있는 항상 표시되는 표준 검색 양식입니다.
- 아이콘/팝업 유형: 전체 팝업 검색 양식을 트리거하는 세련된 아이콘 버튼으로 중요한 헤더 공간을 절약합니다.
- 아이콘 라이브러리: 사이트의 스타일에 맞게 광대 한 아이콘 라이브러리에서 모든 돋보기 아이콘을 선택합니다.
양식 및 입력 필드 스타일링을 완료하세요
검색 양식을 레이아웃의 자연스러운 부분으로 만드세요. 전체 양식 컨테이너를 디자인하세요: 배경,너비, 여백,패딩을 설정하고 테두리 반경과 상자 그림자를 줍니다. 그런 다음 입력 필드 자체의 스타일을 지정합니다. 타이포그래피,색상, 배경,테두리 및 내부 패딩을 제어합니다. 심지어 다른 테두리 색상으로 Focus State (사용자가 클릭할 때) 를 디자인할 수도 있습니다. 이렇게 하면 검색창이 브라우저 기본값이 아닌 프리미엄처럼 보이고 느껴집니다.
- 컨테이너 디자인: 배경, 패딩, 테두리 및 그림자로 양식의 상자를 스타일링합니다.
- 입력 필드 제어: 텍스트 상자의 색상, 타이포그래피, 너비 및 테두리 반경을 사용자 정의합니다.
- 고급 상태: 집중된 상태에 대한 고유한 테두리 색상을 정의하고 활성 필드를 강조합니다.
아이콘 디자인 & 팝업 메시징
아이콘/팝업 유형의 경우 아이콘 자체가 버튼입니다. 완벽하게 스타일링하십시오. 크기,색상 및 주변의 패딩 및 여백을 조정하십시오. 그런 다음 나타나는 팝업을 디자인하십시오. 입력 텍스트 자리 표시자를 사용자 정의하고 (“타이핑 시작...”과 같이) 결정적으로 유용한 설명 (예를 들어, “검색하려면 Enter 키를 누르거나 닫으려면 ESC 키를 누르십시오”) 을 추가하십시오. 이 텍스트는 사용자를 안내하여 유용성을 향상시키고 세련된 전문적인 대화 형 경험을 만듭니다.
- 아이콘 스타일링: 아이콘 색상과 크기를 변경하고 아이콘 여백과 패딩을 사용하여 주변 공간을 조정합니다.
- 스마트 팝업 텍스트: 팝업의 검색 필드 안에 사용자 친화적인 자리 표시자 텍스트를 설정합니다.
- 팝업 지침: 입력 아래에 설명 줄을 추가하여 팝업 사용 방법을 설명합니다(검색/닫기).
검색을 위해 자주 묻는 질문
이 검색은 내 테마의 기본 검색 결과 페이지에서 작동합니까?
예,그래야합니다. 이 요소는 프론트 엔드 검색 양식을 제공합니다. 사용자가 쿼리를 제출하면 WordPress (또는 WooCommerce) 기본 검색 기능을 사용하고 테마의 search.php 템플릿 페이지에 결과를 표시합니다. 검색 로직을 대체하지 않고 입력 양식이 놀랍게 보입니다.
사이드바에서 양식 검색과 헤더에서 아이콘 검색을 모두 할 수 있나요?
절대적으로. 같은 페이지 또는 사이트에서 여러 검색 요소를 사용할 수 있습니다. 각각은 독립적으로 구성되고 스타일이 지정됩니다. 따라서 블로그 사이드 바에 큰 양식을 가질 수 있으며 헤더에 최소한의 아이콘이 있으며 각각은 자체 설정이 있습니다.
검색 팝업은 모바일 친화적입니까?
예. 팝업은 반응형으로 설계되었습니다. 일반적으로 입력 필드와 설명을 명확하게 읽을 수 있는 상태에서 모바일 화면의 대부분을 덮는 중앙 오버레이로 열립니다. 아이콘 트리거는 터치 장치에 맞게 확장되기도 합니다.
돋보기 아이콘을 인용의 "Q"와 같은 다른 것으로 변경할 수 있나요?
통합 아이콘 라이브러리에서 (FontAwesome 과 같은) 어떤 아이콘이든 선택할 수 있습니다. 돋보기가 표준인 반면,기술적으로는 다른 아이콘을 사용할 수 있습니다. 하지만 보편적인 사용자 이해를 위해 인식된 검색 기호 (돋보기) 를 고수하는 것이 좋습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
