Elementor로 검색 결과 페이지를 만드는 방법

Elementor로 검색 결과 페이지를 구축하는 방법을 배우고 싶습니까?

개인 블로그, 전자 상거래 웹 사이트 또는 여러 사용자가 있는 대규모 웹 사이트가 있더라도 검색 기능을 추가하는 것은 충분히 중요합니다. 탐색 메뉴에서 여기 저기를 클릭하는 것보다 방문자가 원하는 콘텐츠를 더 쉽게 찾을 수 있습니다.

WordPress에서 검색 결과 페이지의 모양(레이아웃)은 사용 중인 테마의 템플릿(파일 search.php 대부분의 경우). 기본 레이아웃이 적합하지 않은 경우 사용자 지정 템플릿을 만들어 대체할 수 있습니다.

PHP 기술이 없으면 다음을 사용할 수 있습니다. Elementor (또는 다음과 같은 테마 빌더 기능이 있는 다른 페이지 빌더 플러그인 Divi Builder et WPBakery) WordPress에서 사용자 지정 검색 결과 페이지 템플릿을 만듭니다.

테마 빌더 기능은 Elementor Pro에서만 사용할 수 있으므로 Elementor를 사용하여 검색 결과 페이지 템플릿을 만들 수 있으려면 Elementor의 Pro 버전을 사용해야 합니다.

Elementor로 검색 결과 페이지를 만드는 방법

Elementor를 사용하여 사용자 정의 검색 결과 페이지를 만들 때 페이지를 만들 때 원하는 요소를 추가할 수 있습니다. 추가할 수 있는 90개 이상의 항목(위젯이라고 함)이 있습니다.

읽기 : Elementor에서 양식 제출을 관리하는 방법

Elementor 자체는 워크플로를 간소화하기 위해 사전 구축된 검색 결과 페이지 템플릿을 제공합니다. 또는 자신만의 디자인 컨셉이 있는 경우 검색 결과 페이지를 직접 만들 수도 있습니다.

이 기사에서는 처음부터 검색 결과 페이지 템플릿을 작성하는 방법을 보여줍니다. 다음은 생성하려는 검색 결과 페이지의 스크린샷입니다.

두 개의 섹션을 사용하여 위의 검색 결과 페이지를 만들 것입니다.

• 제 1: 헤더(검색 결과에 대한 설명)를 배치하려면
• 2 항 : 검색 양식 및 검색 결과를 배치하려면

시작하기 전에 Elementor 버전을 프로 버전으로 업그레이드했는지 확인하십시오. 준비가 되었다면 다음으로 이동합니다. 템플릿 -> 테마 빌더 귀하의 WordPress 대시 보드.

참조 : Elementor 사용 방법 : 완전한 가이드

버튼을 클릭 에 추가 새 모델을 만들거나 버튼을 클릭할 수 있습니다. 지금 사용해보기 Elementor의 Themes Builder를 사용해보십시오).

모델 유형을 검색 결과, 모델 이름을 지정하고 버튼을 클릭하십시오. 모델 만들기 후자를 만들기 시작합니다.

검색 결과 페이지를 처음부터 만들고 싶기 때문에 나타나는 템플릿 라이브러리 창을 닫으면 됩니다.

읽기 : Elementor에서 열에 포인트 효과를 추가하는 방법

위젯 추가를 시작하기 전에 먼저 페이지 레이아웃을 설정할 수 있습니다. 그렇게 하려면 설정 패널(왼쪽 패널)의 아래쪽에 있는 톱니바퀴 아이콘을 클릭합니다. 에서 레이아웃을 설정할 수 있습니다. 페이지 레이아웃 옵션 블록에서 일반 설정 탭 아래 설정.

제 1

위에 표시된 대로 이 섹션을 사용하여 검색 결과 페이지에 대한 설명을 표시하는 헤더를 배치합니다. Elementor의 편집 상자에서 더하기 버튼을 클릭하기만 하면 새 섹션을 추가할 수 있습니다. 단일 열 구조를 선택할 수 있습니다. 섹션이 추가되면 Title 위젯을 섹션으로 드래그합니다.

왼쪽 패널로 이동합니다. 블록에서 표제 탭 아래 함유량, 필드에서 데이터베이스 아이콘을 클릭하십시오 표제 선택하고 아카이브 제목.

그런 다음 탭에 액세스할 수 있습니다. 스타일 헤더를 사용자 정의합니다. 텍스트 색상, 타이포그래피(글꼴 패밀리, 글꼴 크기, 글꼴 스타일 등)와 같은 요소를 정의할 수 있습니다. 원하는 경우 블렌드 모드와 텍스트 그림자를 적용할 수도 있습니다.

섹션의 배경을 설정하거나 구분자를 추가하거나 여백을 설정하려는 경우 섹션 핸들을 클릭하여 편집 모드로 전환할 수 있습니다.

제 2

버튼을 클릭 을 더한 위의 섹션 1에서 수행한 것처럼 새 섹션을 추가합니다. 단일 열 구조를 선택할 수도 있습니다. 섹션이 추가되면 검색 양식 위젯을 드래그하십시오.

그런 다음 설정 패널에 액세스하여 설정을 수행할 수 있습니다. 블록에서 Formulaire de Recherche 부 콘텐츠 탭, 스킨, 자리 표시자, 아이콘, 아이콘 크기 등을 정의할 수 있습니다.

양식을 사용자 정의하려면 탭을 열 수 있습니다. 스타일. 다음 두 가지 매개변수 블록을 열 수 있습니다. 입력 et 단추. 블록에서 입력, 타이포그래피, 텍스트 색상, 배경색, 테두리 색상, 테두리 크기 및 테두리 반경을 설정할 수 있습니다.

블록에서 단추, 버튼 텍스트 색상, 배경 색상, 타이포그래피, 아이콘 크기 및 버튼 너비를 설정할 수 있습니다.

검색 양식 위젯의 스타일이 지정되면 아카이브 게시물 위젯을 추가할 수 있습니다. 검색 양식 위젯 바로 아래에 배치할 수 있습니다.

이 위젯이 배치되면 왼쪽 패널로 이동합니다. 블록 아래 형세, 탭 함유량, 스킨, 열 수, 이미지 위치, 추출 길이, 메타데이터 등을 정의할 수 있습니다.

블록에 페이징, 페이지 매김 유형, 페이지 제한 및 정렬을 설정할 수 있습니다.

블록에 많은, WordPress가 제공된 검색어를 찾을 수 없을 때 표시되도록 메시지를 설정할 수 있습니다.

일단 탭의 기본 설정 내용 완료되면 탭으로 전환할 수 있습니다. 스타일 Archive Posts 위젯의 모양을 사용자 정의합니다. 이 탭에서 열 수 있는 6개의 블록이 있습니다.

• 레이아웃

이 블록을 열어 게시물의 텍스트 콘텐츠 (게시물 제목 및 메타)의 정렬을 정의 할 수 있습니다. 열과 행 사이의 간격을 정의할 수도 있습니다.

• 영상

이 블록을 열어 게시물 썸네일의 테두리 반경을 설정할 수 있습니다. 간격을 설정하고 CSS 필터를 적용할 수도 있습니다.

• 내용

이 블록을 열어 게시물의 타이포그래피, 텍스트 색상 및 텍스트 콘텐츠의 간격을 설정할 수 있습니다.

• 쪽수 매기기

페이지 매김을 활성화하면 이 블록을 열어 페이지 매김을 사용자 지정할 수 있습니다. 타이포그래피, 텍스트 색상, 숫자 사이의 간격 등을 설정할 수 있습니다.

• 아무것도 찾을 수 없음 메시지

WordPress가 제공된 검색어를 기반으로 콘텐츠를 찾을 수 없는 경우 이 블록을 열어 오류 메시지를 사용자 정의할 수 있습니다. 이 블록의 타이포그래피와 텍스트 색상을 정의할 수 있습니다.

필요한 경우 위젯을 더 추가할 수 있습니다. 페이지 편집이 완료되면 버튼을 클릭할 수 있습니다. 게시 또는 업데이트 설정 패널 하단에 있습니다.

표시 조건을 추가하라는 메시지가 표시되면 버튼을 클릭하여 조건을 추가하십시오. 조건을 추가합니다. 검색 결과 페이지를 생성 중이므로 표시 조건을 다음으로 설정하십시오. 검색 결과. 버튼을 클릭 저장 및 닫기 변경 사항을 적용합니다.

그리고 당신은 간다!

모든 WordPress 기반 웹 사이트에는 웹 사이트에서 사용하는 테마에 따라 고유한 검색 결과 페이지가 있습니다. 사용 중인 테마에서 제공하는 검색 결과 페이지의 레이아웃이 마음에 들지 않으면 사용자 지정할 수 있습니다.

PHP 기술이 없다면 Elementor를 사용하여 WordPress 웹사이트에서 사용자 지정 검색 결과 페이지를 만들 수 있습니다. 모든 것이 드래그 앤 드롭입니다. PHP 코드를 조작할 필요가 없습니다.

게다가 Elementor를 사용하여 사용자 정의 머리글, 사용자 정의 바닥글, 사용자 정의 404 페이지 및 기타 부분을 만들 수도 있습니다. 워드 프레스 테마.

지금 Elementor Pro를 받으세요!

1. WooCommerce 자동 응답

WooCommerce 자동 응답기는 워드 프레스 플러그인 이를 통해 고객이 자동 응답기에 가입할 수 있습니다. 이것 워드 프레스 플러그인 또한 쉽게 통합할 수 있도록 뉴스레터 구독 상자를 표시합니다. WooCommerce 자동 응답자에게.

기능으로는 WooCommerce와의 완전한 통합, 9 개의 자동 응답 지원, 코딩 지식이 필요하지 않음, 설치하기 쉬운 등 다양한 기능이 있습니다.

읽기 : 프랑스어로 메일 침프 튜토리얼 : 뉴스 레터를 만들 수있는 완전한 가이드

다운로드 | 데모 | 웹 호스팅

• SMTP를 통해 이메일을 보내도록 9 WordPress 플러그인
• 웹 사이트에 Google지도를 삽입하는 7 WordPress 플러그인
• WordPress에서 다중 사이트 네트워크를 설정하는 방법
• 게시물 및 페이지에 메타 섹션을 추가하는 방법

결론