Divi 웹사이트에 실시간 Ajax 검색을 추가하는 방법

Ajax는 Divi에 라이브 검색을 추가하는 좋은 방법입니다. Ajax를 사용하면 사용자에게 검색 결과를 표시하기 위해 페이지를 다시 로드할 필요가 없습니다. 이렇게 하면 방문자가 결과를 훨씬 빨리 볼 수 있으므로 페이지에 더 오래 머무를 수 있습니다. 그 결과 웹 사이트가 더 깨끗해 보이고 더 매끄럽게 작동합니다.

Ajax 검색은 Divi에 내장되어 있지 않지만 타사 플러그인을 사용하여 쉽게 추가할 수 있습니다. 이 튜토리얼에서는 Ajax 검색을 Divi에 추가하는 방법과 웹사이트 디자인에 맞게 검색 스타일을 지정하는 방법을 알아봅니다.

튜토리얼을 진행합니다.

엿보기

시작하기 전에 Ajax 검색이 완료되면 어떻게 보이는지 살펴보겠습니다. 데스크탑 보기입니다. WooCommerce 스토어에 Ajax 검색을 추가하겠습니다. 온라인 스토어 레이아웃 팩의 쇼 페이지를 사용하고 있습니다. 또한 레이아웃과 일치하도록 검색 스타일을 지정합니다. 물론 여기가 테스트 사이트이기 때문에 WooCommerce 테스트 제품을 속이고 사용하고 있습니다. 결과는 모든 제품에서 동일하게 작동합니다.

휴대폰에서 동일한 디자인이 어떻게 보이는지 보여줍니다.

Divi 웹사이트에 실시간 Ajax 검색을 추가하는 방법

YouTube 채널 구독

1. Divi Ajax 검색 설치

먼저 Divi Marketplace에서 Divi Ajax Search를 구입합니다. 일반적으로 $29이며 무제한 사용과 1년 지원 및 업데이트가 포함됩니다. Divi Ajax Search를 사용하면 페이지, 게시물, 프로젝트 및 WooCommerce 제품을 검색할 수 있습니다. 이러한 각 게시물 유형과 동일하게 작동합니다. 제목, 발췌, 추천 이미지를 검색하여 설정에 따라 표시할 수 있습니다.

플러그인을 설치하려면 플러그인 > 새로 추가 로 이동하고 플러그인 업로드를 선택합니다.

파일 선택을 선택 하고 컴퓨터에서 파일의 위치로 이동하여 선택합니다. 지금 설치 를 클릭 합니다 .

플러그인이 설치되면 플러그인 활성화 를 선택 합니다 .

2. Divi 웹사이트에 Ajax 검색 추가

다음은 원본 레이아웃을 살펴보겠습니다. 여기에는 헤더, 헤더 이미지와 겹치는 카테고리 및 제품을 표시하는 WooCommerce 모듈이 포함됩니다. Shop 모듈 위에 Ajax 검색 기능을 추가하겠습니다. 또한 레이아웃의 요소와 일치하도록 스타일을 지정합니다.

레이아웃에 Divi Ajax 검색 추가

상점 모듈 아래의 아이콘을 클릭하여 모듈 모달을 엽니다. Divi Ajax Search로 스크롤하거나 검색하여 레이아웃에 추가합니다. 와이어프레임 보기를 표시하고 있지만 모든 보기가 동일하게 작동합니다.

상점 모듈 위에 모듈을 끌어다 놓습니다.

검색 상자 구성

톱니바퀴를 클릭하여 옵션을 엽니다. 변경 사항을 실시간으로 볼 수 있도록 데스크톱 보기로 전환했습니다.

먼저 자리 표시자 텍스트를 조정합니다. 기본 자리 표시자 텍스트는 검색이라는 단어를 사용합니다. 이것은 괜찮지만 사용자가 블로그 게시물이나 다른 콘텐츠가 아니라 상점을 검색한다는 것을 알 수 있도록 제품 검색으로 변경하겠습니다. Order By , Order 및 No Results Text 는 기본값으로 두겠습니다.

• 자리 표시자 텍스트 – 제품 검색
• 검색 결과 - 10
• 날짜까지 주문
• 주문 – 내림차순
• 결과 텍스트 없음 – 검색된 결과 없음

검색 결과에 표시할 내용 결정

검색 영역이라는 섹션에서 검색할 항목을 선택합니다. 제목, 콘텐츠 및 발췌문을 포함하는 기본 설정으로 두겠습니다.

다음으로 게시물 유형을 선택합니다. 게시물, 페이지, 프로젝트, 제품 또는 위의 모든 항목을 검색하도록 할 수 있습니다. 제품을 선택하고 있습니다.

검색 위치:

• 제목
• 콘텐츠
• 발췌

게시물 유형:

• 제품

표시할 항목 선택

표시 영역까지 아래로 스크롤하여 결과가 표시되는 방식을 선택합니다. 검색 아이콘, 제목, 발췌문 및 추천 이미지에 대한 기본 설정을 유지하고 있습니다. 또한 제품 가격을 활성화하고 기둥 수를 4로 변경하고 벽돌을 사용하도록 선택했습니다. 이것은 내가 원하는 레이아웃을 줄 것입니다.

검색 아이콘 표시:

• 예

표시 필드:

• 제목
• 발췌
• 나타난 그림
• 제품 가격

열 수:

• 4

벽돌 사용:

• 예

스크롤바 표시

스크롤 막대 설정으로 이동하여 스크롤 막대를 표시하거나 숨길지 결정합니다. 사용자가 스크롤할 수 있다는 것을 더 잘 알 수 있도록 스크롤 막대를 포함하고 있습니다.

스크롤 바:

• 보여 주다

Divi Ajax 검색 결과

검색어를 입력하면 검색 필드 아래에 결과가 표시됩니다. 이것은 훌륭해 보이지만 웹 사이트의 내용에서 눈에 띄지 않습니다. 사이트의 디자인에 맞고 상품 이미지와 어울리지 않게 스타일링 해 드립니다.

3. 웹사이트에 맞게 모듈 스타일 지정

검색 상자의 스타일을 지정하기 위해 사용 중인 레이아웃의 디자인 요소를 사용합니다. Online Store 레이아웃의 상점 페이지 하단에는 몇 가지 디자인 요소가 있습니다. 하나는 흥미로운 이메일 선택 모듈입니다. 나는 이것을 배경과 현장에 대한 영감으로 사용할 것입니다. 검색 결과에 Shop Now CTA의 배경색도 사용하겠습니다. 저는 특히 세 가지 디자인 요소에 주의를 기울이고 있습니다.

• 뉴스레터 배경색 – #757d79
• 쇼핑 CTA 배경색 – #dcae83
• 둘 다에 대한 패딩 – 50px(위, 아래), 60px(오른쪽, 왼쪽)

검색 필드 스타일 지정

콘텐츠 탭에서 배경 설정을 엽니다. 이 섹션에는 세 가지 배경 영역이 있습니다. 마지막으로 이동합니다. 그냥 배경이라고 합니다. 여기에 색상을 입력합니다.

• 배경색 – #757d79

디자인 탭에서 간격 설정으로 이동하여 패딩을 입력합니다. 이렇게 하면 필드 주변 영역을 볼 수 있으므로 이동하면서 결과를 더 잘 볼 수 있습니다. 이것은 또한 검색 상자 주변에 많은 색상을 제공하여 레이아웃의 요소와 일치합니다.

• 패딩 50px(위, 아래), 60px(오른쪽, 왼쪽)

검색 필드 설정에서 필드 배경색과 필드 텍스트 색상을 추가합니다. 필드를 모듈의 배경과 일치시키고 텍스트에 흰색을 선택했습니다.

• 필드 배경색 – #757d79
• 필드 텍스트 색상 – #ffffff

동일한 설정에서 필드 테두리 색상 까지 아래로 스크롤하고 흰색을 선택합니다. 테두리의 두께와 반경을 조정할 수도 있습니다. optin 모듈의 텍스트 필드와 일치하도록 정사각형으로 두겠습니다.

• 필드 테두리 색상 – #ffffff

검색 아이콘에 대한 설정을 열고 흰색을 선택합니다.

• 검색 아이콘 색상 – #ffffff

로더에 대한 설정을 열고 로더 색상으로 흰색을 선택합니다. 로더는 잠시 동안만 표시되지만 나머지 요소와 일치하면 더 좋아 보일 것입니다.

• 로더 색상 – #ffffff

결과 필드 스타일 지정

콘텐츠 탭에서 배경 설정을 열고 검색 결과 상자 및 검색 결과 항목 배경에 색상을 추가합니다. 모듈이 검색 결과를 표시할 때만 표시되기 때문에 모듈의 스타일을 지정하는 동안에는 표시되지 않습니다.

• 배경색 – #dcae83

디자인 탭에서 검색 결과 항목 텍스트에 대한 설정을 엽니다. 제목 탭에서 모두 대문자 글꼴 스타일을 선택하고 텍스트 색상으로 흰색을 선택합니다. 다른 모든 제목 설정은 기본적으로 그대로 둡니다.

• 제목 글꼴 스타일 – TT
• 제목 텍스트 색상 – #ffffff

발췌 탭을 열고 발췌 텍스트 색상으로 흰색을 선택합니다.

• 발췌 텍스트 색상 – #ffffff

가격 탭을 엽니다. 가격 가중치로 Semi Bold를 선택하고 텍스트 색상으로 흰색을 선택하십시오.

• 가격 글꼴 두께 - 반 굵게
• 발췌 텍스트 색상 – #ffffff

결과

다음은 Ajax Search가 내 스타일로 Desktop에서 어떻게 보이는지 보여줍니다. 검색 결과는 거의 즉시 표시됩니다. 우아하고 매끄럽게 보입니다.

폰에서는 이렇게 보입니다. 결과가 누적되고 화면에 맞게 조정됩니다.

마무리 생각

Divi Ajax 검색 플러그인을 사용하면 Divi 웹사이트에 Ajax 검색을 빠르고 쉽게 추가할 수 있습니다. 사용하기 쉽고 웹 사이트에 맞게 스타일을 지정하기 쉽고 결과가 빠르고 환상적입니다. 검색할 수 있는 게시물 유형과 결과에 표시할 콘텐츠 유형에 대한 많은 옵션이 있습니다.

이제 귀하의 Divi 웹사이트는 방문자가 높이 평가할 전문적으로 설계된 Ajax 검색 기능을 가질 수 있습니다!

우리는 당신의 의견을 듣고 싶습니다. Divi 웹사이트에 실시간 Ajax 검색을 추가했습니까? 의견에 귀하의 경험에 대해 알려주십시오.

Kroster/Shutterstock.com을 통한 추천 이미지