Elementor 의 자체 검색 위젯에는 Elementor Pro 가 필요하므로 대부분의 사이트는 테마가 제공하는 검색 상자에 갇혀 있습니다. 무료 검색 위젯 에서 Elementor용 마스터 애드온 그 틈을 메웁니다. 페이지나 헤더의 아무 곳에나 놓은 다음 클래식 검색 양식이나 클릭 시 확장되는 아이콘 팝업을 선택합니다. 입력과 버튼은 Elementor 패널에서 스타일이 지정되며 CSS 는 포함되지 않습니다.
두 레이아웃은 다음과 같습니다 Elementor 검색 위젯 작업, 설정별 설정, 방문자가 라이브 페이지에서 실제로 보는 내용.
검색 위젯이 수행하는 작업 #
위젯은 워드프레스 검색 양식을 Elementor 요소로 출력합니다. 방문자는 쿼리를 입력하고 Enter 키를 누르거나 제출 컨트롤을 클릭한 후 사이트의 표준 검색 결과 페이지에 도착하므로 결과는 워드프레스 자체에서 나오고 테마를 통해 렌더링됩니다. 폼의 모양: 아이콘이나 텍스트 버튼이 있는 전체 입력 필드 또는 팝업 검색 화면으로 확장되는 외로운 검색 아이콘을 선택합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 도움이 필요하십니까? 참조 설치 가이드.
- 이전에 위젯을 껐을 경우 마스터 애드온 대시보드에서 검색 요소가 활성화됩니다.
Elementor Search 위젯을 추가하는 방법 #
Elementor 편집기를 열고 검색합니다 검색 요소 패널에서 또는 마스터 애드온 섹션으로 스크롤합니다 (MA 배지를 찾으십시오). 위젯을 페이지로 드래그하십시오. 작업 검색 양식이 제출 컨트롤로 돋보기 아이콘과 함께 즉시 나타납니다.
콘텐츠 탭을 설정합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 콘텐츠 탭에는 하나의 주요 결정과 그에 따른 몇 가지 필드가 있습니다. The 유형 두 레이아웃 사이의 드롭다운 스위치: 양식 그리고 아이콘 팝업.
유형: 형태 #
Form 은 클래식 레이아웃으로,오른쪽에 submit 컨트롤이 있는 입력 필드입니다. The 제출 버튼 유형 드롭다운은 그 컨트롤이 무엇인지 결정합니다:
- 아이콘: 아이콘 버튼을 보여줍니다. 아래 라이브러리에서 아이콘을 선택하십시오; 기본 돋보기는 거의 모든 디자인에 작동합니다.
- 버튼: 대신 텍스트 버튼을 보여줍니다. A 버튼 텍스트 검색 또는 Enter 누르기와 같이 레이블을 입력하는 위치에 필드가 나타납니다.
유형: 아이콘 팝업 #
아이콘 팝업은 검색 아이콘만 렌더링합니다. 방문자가 클릭하면 큰 입력 필드와 닫기 버튼이 있는 페이지 위에 검색 화면이 열립니다. 전체 검색 필드가 메뉴를 붐비는 헤더 및 탐색 모음에서 사용할 레이아웃입니다.
아이콘 팝업을 선택하면 다음이 드러납니다 팝업 설정 두 개의 필드가 있는 섹션:
- 입력 텍스트: 팝업의 검색 필드 안에 자리 표시자, “검색 ...” 기본적으로.
- 설명: 필드 아래에 있는 “Hit enter to search 또는 X 를 클릭하여 닫습니다.”와 같은 도우미 줄
스타일 탭에서 위젯을 스타일링합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 스타일 탭에는 두 개의 섹션이 있습니다: 양식 입력 영역 및 버튼 제출 컨트롤의 경우.
양식 #
Form 섹션은 래퍼와 입력 필드의 스타일을 지정합니다:
- 배경: 형태 뒤에 있는 색상입니다.
- 너비: 양식의 너비를 픽셀 단위로 표시합니다. 위젯이 넓은 열에 있고 더 꽉 조이는 검색 상자를 원할 때 편리합니다.
- 여백 및 양식 패딩: 포장지 외부와 내부의 간격.
- 테두리 유형 및 테두리 반경: 형태 주변의 프레임과 모서리가 얼마나 둥근지.
- 타이포그래피 및 색상: 입력의 글꼴 및 텍스트 색상입니다.
- 양식 입력 색상: 입력 필드 자체의 배경색입니다.
버튼 #
버튼 섹션은 아이콘이든 텍스트 버튼이든 제출 컨트롤의 스타일을 지정합니다:
- 배경 색상: 버튼 뒤에 채우기.
- 색상: 아이콘 또는 텍스트 색상입니다.
- 패딩 및 여백: 버튼의 내부 및 외부 간격.
- 타이포그래피: 버튼 텍스트의 글꼴 패밀리, 크기 및 무게.
한 가지 크기 조정 참고 사항: 버튼 높이는 양식을 따르므로 글꼴 크기 변경 후 버튼 텍스트가 비좁아 보이면 버튼 패딩과 단독으로 싸우는 대신 양식 측면에 약간의 수직 패딩을 추가하십시오.
실시간 결과를 확인하세요 #
페이지를 게시하고 양식을 사용해 보세요. 필드를 클릭하고 쿼리를 입력한 다음 Enter 키를 누르거나 제출 버튼을 누르세요.
WordPress는 거기에서 인계 받아 테마의 검색 결과 템플릿에 일치하는 게시물과 페이지를 보여줍니다:
일반적인 사용 사례 #
- 헤더 검색: 탐색 메뉴 옆에 있는 아이콘 팝업을 사용하면 메뉴 공간을 먹지 않고 한 번의 클릭만으로 검색할 수 있습니다.
- 블로그 사이드바 또는 아카이브 페이지: 양식 유형 검색 상자는 독자가 이전 게시물을 검색하는 데 도움이 됩니다.
- 404페이지: 검색 양식은 “찾을 수 없습니다.”라고 적힌 페이지에 넣을 수있는 가장 유용한 것입니다
- 문서화 및 지식 기반: 넓은 검색 양식을 전면과 중앙에 배치하여 사용자가 스크롤하기 전에 검색할 수 있도록 합니다.
더 나은 검색 창을 위한 팁 #
- 버튼 색상을 테마의 악센트 색상과 일치시킵니다. 사이트의 다른 모든 버튼처럼 보이는 검색 버튼이 더 많이 사용됩니다.
- 자리 표시자를 짧게 유지하십시오. “검색 ...”은 모바일에서 잘리는 전체 문장을 능가합니다.
- 꽉 레이아웃에서 아이콘 팝업을 사용 합니다. 헤더 열에 압착된 전체 검색 양식은 태블릿 너비에서 어색하게 마무리되는 경향이 있습니다.
- 결과 페이지를 테스트합니다. 위젯은 워드 프레스에 쿼리를 전달, 그래서 당신은 검색 상자를 홍보하기 전에 테마의 검색 결과 템플릿이 표시 보이는 것을 확인.
비디오 자습서 #
검색 위젯이 작동하는 모습을 보고 싶다면, 이 비디오는 첫 번째 드래그부터 라이브 페이지의 검색 결과까지 전체 설정을 거칩니다:
자주 묻는 질문 #
Elementor 에서 검색창을 어떻게 추가하나요?
Elementor 용 Master Addons 를 설치한 다음 Elements 패널에서 Search 위젯을 페이지로 드래그합니다. 바로 작동하는 WordPress 검색 양식을 렌더링하며,콘텐츠 탭의 유형 드롭다운에서 전체 양식과 아이콘 팝업 사이를 전환할 수 있습니다.
팝업으로 검색을 열 수 있나요?
예. 콘텐츠 탭에서 유형 을 아이콘 팝업으로 설정합니다. 그런 다음 위젯에는 검색 아이콘만 표시되며,위젯을 클릭하면 큰 입력 필드,사용자 지정 위치 지정자 및 팝업 설정에서 제어하는 설명 줄이 있는 검색 화면이 열립니다.
검색 버튼 텍스트를 변경할 수 있나요?
예. 형식이 양식으로 설정된 상태에서 버튼 유형 제출을 버튼으로 변경하고 버튼 텍스트 필드에 레이블을 입력합니다. 아이콘에 버튼 유형 제출을 남겨두고 라이브러리에서 아이콘을 선택하여 대신 아이콘을 유지할 수도 있습니다.
검색 결과는 어디서 나오나요?
위젯은 표준 WordPress 검색에 제출하므로 결과에 게시물과 페이지가 포함되고 테마의 검색 결과 템플릿에 표시됩니다. 별도의 결과 페이지 설정이 필요하지 않습니다.
마스터 애드온 검색 위젯은 무료입니까?
예. 검색 위젯은 마스터 애드온의 무료 버전에 포함되어 있으며 무료 Elementor 와 함께 작동합니다. 입력하는 동안 라이브 결과를 표시하지 않습니다; 표준 WordPress 검색을 사용합니다.
감싸는 #
마스터 애드온 검색 위젯은 Elementor 에게 누락 된 검색 창을 제공합니다: 양식 또는 아이콘 팝업은 WordPress 자체에서 제공하는 결과와 함께 디자인과 일치하는 스타일과 어디에나 배치 할 수 있습니다. 그것은 잘 쌍을 이룹니다 캔버스 외부 콘텐츠 사용자 정의 헤더를 빌드할 때 위젯. 의 전체 컬렉션을 찾아봅니다 마스터 애드온 위젯 및 확장또는 를 참조하십시오 검색 위젯 페이지 데모 및 Elementor Pro Search 위젯과의 비교를 위해.
