[ad_1]
Divi 검색 상자 개요
국
변하기 쉬운
전역 헤더 다운로드 및/또는 수정
이 기사에서는 식료품 배달 레이아웃 팩과 함께 제공되는 무료 머리글/바닥글을 사용할 것입니다. 당신은 단순히 다운로드 할 수 있습니다 .Zip * : 프랑스어 필요한 아카이브 및 추출 .json 파일을 컴퓨터에 저장합니다.
그런 다음 WordPress 대시보드로 이동하여 Divi - 테마 생성기. 거기에서 당신은 위아래 화살표 아이콘 이식성 옵션을 엽니다.
새 모달에서 수입 탭하고 찾기 .json 다운로드한 파일. 준비가 되면 선택 빌더 모델 가져오기 디비 테마 다운로드를 시작합니다.
이 시점에서 당신은 입력 준비가 글로벌 헤더 일부 웹사이트 템플릿 기본적으로. 다음에서 가져오기 .json 파일은 전체 사이트 헤더로 공짜를 자동으로 적용했어야 합니다.
보조 메뉴 모음에 검색 필드 추가
Divi Visual Builder를 사용하면 이와 유사한 Global Header를 볼 수 있습니다.
가장 먼저 할 일은 검색 필드를 위한 공간을 만드는 것입니다. 모든 사람이 검색 필드에 쉽게 액세스할 수 있도록 하고 싶습니다. 방문자, 그래서 우리는 그것을 보조 메뉴에 추가할 것입니다(위의 홈 / 연락처 선).
먼저 다음을 사용하여 검색창을 추가하겠습니다. Divi 검색 모듈 첫 번째 행의 세 번째 열에 있습니다.
자리 표시자 텍스트는 검색 필드에 중요하므로 모듈이 제자리에 있으면 다음으로 이동하십시오. 매개 변수 그리고 당신의 예약 영역 사용자에게 무엇을 찾아야 하는지 상기시켜주는 텍스트입니다. 우리는 넣어 아이템을 찾아라! 우리가 식료품 배달 레이아웃 팩을 사용하고 있기 때문에 사용자가 이것이 검색할 수 있다는 것을 알 수 있도록 자리 표시자로 사용합니다.
세 번째 열에 있는 검색 상자는 좋지 않습니다. 그래서 우리는 입력하고 싶습니다 연구 모듈 설정으로 이동하여 설계 혀. 그것을 찾아라 변신 로봇 옵션으로 이동한 다음 번역 탭(두 번째). 그런 다음 검색 모듈을 제자리로 드래그하면 Divi가 모든 CSS와 간격을 처리합니다.
또한 이 값에 %를 사용하여 데스크탑의 뷰포트에 관계없이 상대적으로 유지합니다. 사용 픽셀 일부 다른 해상도를 왜곡할 수 있습니다.
Divi 변압기 번역 옵션도 모바일에 맞게 조정해야 합니다. 그렇지 않은 경우에도 마찬가지입니다. 그러니 꼭 가보세요. 반동 설정 및 보조 메뉴 옵션에서 검색 모듈의 위치를 설정합니다. 행의 세 번째 열에 배치하면 행 항목의 맨 아래에 자동으로 표시되기 때문에 모바일의 수직 배치를 조정했습니다.
Divi 검색 모듈 스타일링
검색 상자에 대한 스타일 옵션이 많지는 않지만 몇 가지 있습니다. 즉, 비활성 상태일 때와 사용자가 클릭했을 때의 텍스트와 필드 자체의 색상입니다. (물론 간격 및 크기 조정 및 기타 표준 Divi 디자인 옵션도 있습니다.)
색상 옵션을 찾으려면 챔피언 메뉴 설계 혀. 확장되면 자리 표시자의 텍스트 색상, 필드의 배경 색상 및 필드 텍스트의 색상(사용자가 입력한 텍스트, 즉 말)을 수정할 수 있습니다. 또한 집중하다 변형은 사용자가 검색창과 구체적으로 상호작용하는 경우입니다.
원하는 대로 스타일이 지정되면 저장 버튼을 클릭합니다.
가시성 설정 확인
무료 레이아웃 및 헤더 팩 중 일부는 데스크탑 및 모바일 장치에 대한 다양한 디스플레이 옵션과 함께 제공됩니다. 시각 생성기에서 모드가 흐리게 표시되거나 회색으로 표시되면 일부 장치에서 모드가 비활성화되었음을 나타냅니다.
식료품 배달 헤더의 경우 모바일에서는 마지막 두 열이 비활성화됩니다. 우리는 입력하고 싶습니다 라인 설정 모바일에 표시하려는 열의 설정을 클릭합니다. 이 경우 세 번째입니다.
그런 다음 진행 혀 로 이동 시계 옵션. 여기에서 아래의 모든 옵션이 비활성화 약 체크되지 않은 검색 필드가 포함된 열의 경우. 저장 버튼(녹색 진드기), 모듈은 색상으로 나타나야 하며 더 이상 변색되지 않아야 합니다.
모든 것이 표시되는지 확인했으면 이 항목을 온라인에 올릴 준비가 된 것입니다!
작업 저장
를 클릭했는지 확인하십시오. 녹색 저장 버튼 화면 오른쪽 하단에 있습니다.
이제 오른쪽 상단 모서리에 있는 X를 사용하여 시각적 생성기를 닫을 준비가 되었습니다. 다음 화면에서 Divi 테마 빌더가 모든 옵션을 저장했는지 확인하고 싶을 것입니다. 그가 말한다면 변경 사항 저장, 버튼을 클릭합니다. 그가 말한다면 모든 변경 사항이 저장됨, 검색 필드가 이미 Divi 보조 메뉴에 있습니다.
최종 결과
사이트에서 작업에 감탄하는 일만 남았습니다!
국
변하기 쉬운
Divi 검색 필드로 결론
검색 상자는 귀하의 사이트에 대한 좋은 사용자 경험의 기본적인 부분입니다. 고객님께 최상의 서비스를 제공하고 싶으시다면 방문자, 콘텐츠가 검색 가능한지 확인하는 것이 최우선 순위 중 하나여야 합니다. 이 빠르고 쉬운 방법을 사용하여 곧 Divi 사이트에 적용할 수 있기를 바랍니다!
[ad_2]
