วิธีเพิ่มการค้นหา Ajax แบบเรียลไทม์ไปยังเว็บไซต์ Divi ของคุณ

Ajax เป็นวิธีที่ยอดเยี่ยมในการเพิ่มการค้นหาแบบสดให้กับ Divi ด้วย Ajax หน้าจะไม่ต้องโหลดซ้ำเพื่อแสดงผลการค้นหาให้ผู้ใช้เห็น ซึ่งช่วยให้ผู้เข้าชมเห็นผลลัพธ์เร็วขึ้นมาก ซึ่งช่วยให้พวกเขาอยู่ในหน้าเว็บของคุณนานขึ้น ผลลัพธ์ที่ได้คือเว็บไซต์ที่ดูสะอาดตาและทำงานได้ราบรื่นขึ้น

การค้นหา Ajax ไม่ได้สร้างขึ้นใน Divi แต่สามารถเพิ่มได้อย่างง่ายดายโดยใช้ปลั๊กอินของบุคคลที่สาม ในบทช่วยสอนนี้ เราจะดูวิธีเพิ่มการค้นหา Ajax ลงใน Divi และดูวิธีจัดรูปแบบการค้นหาให้เหมาะกับการออกแบบเว็บไซต์ของคุณ

ไปที่การกวดวิชา

แอบมอง

ก่อนที่เราจะเริ่มต้น มาดูว่าการค้นหา Ajax ของเราจะเป็นอย่างไรเมื่อเราดำเนินการเสร็จสิ้น นี่คือมุมมองเดสก์ท็อป ฉันจะเพิ่มการค้นหา Ajax ลงในร้านค้า WooCommerce ฉันกำลังใช้หน้าแสดงจากชุดเค้าโครงร้านค้าออนไลน์ เราจะจัดรูปแบบการค้นหาให้ตรงกับการจัดวาง แน่นอน เนื่องจากนี่เป็นไซต์ทดสอบ ฉันจึงโกงและใช้ผลิตภัณฑ์ทดสอบของ WooCommerce ผลลัพธ์จะทำงานเหมือนกันกับผลิตภัณฑ์ใดๆ

นี่คือลักษณะการออกแบบเดียวกันบนโทรศัพท์

วิธีเพิ่มการค้นหา Ajax แบบเรียลไทม์ไปยังเว็บไซต์ Divi ของคุณ

สมัครสมาชิกช่อง Youtube ของเรา

1. การติดตั้ง Divi Ajax Search

ขั้นแรก ซื้อ Divi Ajax Search จาก Divi Marketplace ปกติราคา $29 และรวมการใช้งานไม่จำกัดและการสนับสนุนและอัปเดตหนึ่งปี Divi Ajax Search ให้คุณค้นหาหน้า โพสต์ โครงการ และผลิตภัณฑ์ WooCommerce มันทำงานเหมือนกันกับโพสต์แต่ละประเภทเหล่านี้ สามารถค้นหาชื่อเรื่อง ข้อความที่ตัดตอนมา และรูปภาพเด่น และแสดงตามการตั้งค่าของคุณ

ในการติดตั้งปลั๊กอิน ให้ไปที่ ปลั๊กอิน > เพิ่มใหม่ แล้วเลือก อัปโหลดปลั๊กอิน

เลือก เลือกไฟล์ และไปที่ตำแหน่งของไฟล์บนคอมพิวเตอร์ของคุณแล้วเลือก คลิก ติดตั้ง ทันที

เมื่อติดตั้งปลั๊กอินแล้ว ให้เลือก เปิดใช้งานปลั๊กอิน

2. เพิ่มการค้นหา Ajax ในเว็บไซต์ Divi ของคุณ

มาดูเค้าโครงเดิมกันบ้าง ประกอบด้วยส่วนหัว หมวดหมู่ที่ซ้อนทับภาพส่วนหัว และโมดูล WooCommerce เพื่อแสดงผลิตภัณฑ์ ฉันจะเพิ่มคุณสมบัติการค้นหา Ajax เหนือโมดูลร้านค้า ฉันจะจัดสไตล์ให้เข้ากับองค์ประกอบของเลย์เอาต์ด้วย

เพิ่ม Divi Ajax Search ลงในเลย์เอาต์

คลิกไอคอนใต้โมดูลร้านค้าเพื่อเปิดโมดูลโมดอล เลื่อนไปที่หรือค้นหา Divi Ajax Search และเพิ่มลงในเลย์เอาต์ ฉันกำลังแสดงมุมมองโครงร่าง แต่มุมมองใด ๆ ก็ทำงานเหมือนกัน

ลากและวางโมดูลเหนือโมดูลร้านค้า

การกำหนดค่าช่องค้นหา

คลิกเฟืองเพื่อเปิดตัวเลือก ฉันเปลี่ยนไปใช้มุมมองเดสก์ท็อปเพื่อให้เห็นการเปลี่ยนแปลงแบบสด

อันดับแรก เราจะปรับข้อความที่พัก ข้อความตัวแทนเริ่มต้นใช้คำว่าค้นหา ไม่เป็นไร แต่ฉันจะเปลี่ยนเป็น ค้นหาผลิตภัณฑ์ของเรา เพื่อให้ผู้ใช้รู้ว่าพวกเขากำลังค้นหาในร้านค้า มากกว่าที่จะเป็นบล็อกโพสต์หรือเนื้อหาอื่นๆ ฉันจะปล่อยให้ Order By , Order และ No Results Text เป็น ค่าเริ่มต้น

• Placeholder text – ค้นหาผลิตภัณฑ์ของเรา
• ผลการค้นหา – 10
• สั่งซื้อโดย – วันที่
• สั่งซื้อ – desc
• ไม่มีข้อความผลลัพธ์ – ไม่พบผลลัพธ์

ตัดสินใจว่าจะแสดงอะไรในผลการค้นหา

ใต้ส่วนที่เรียกว่าพื้นที่ค้นหา ให้เลือกสิ่งที่คุณต้องการค้นหา ฉันจะปล่อยให้เป็นการตั้งค่าเริ่มต้น ซึ่งรวมถึงชื่อเรื่อง เนื้อหา และข้อความที่ตัดตอนมา

จากนั้นเลือกประเภทโพสต์ คุณสามารถกำหนดให้ค้นหาโพสต์ เพจ โครงการ ผลิตภัณฑ์ หรือทั้งหมดข้างต้นได้ ฉันกำลังเลือกสินค้า

ค้นหาใน:

• ชื่อ
• เนื้อหา
• ข้อความที่ตัดตอนมา

ประเภทโพสต์:

• สินค้า

เลือกสิ่งที่จะแสดง

เลื่อนลงไปที่พื้นที่แสดงผลเพื่อเลือกว่าจะแสดงผลลัพธ์อย่างไร ฉันคงการตั้งค่าเริ่มต้นสำหรับไอคอนค้นหา ชื่อ ข้อความที่ตัดตอนมา และรูปภาพเด่น ฉันยังเปิดใช้งานราคาสินค้า เปลี่ยนจำนวนคอลัมน์เป็น 4 และเลือกใช้อิฐก่อ นี่จะให้เค้าโครงที่ฉันต้องการ

แสดงไอคอนค้นหา:

• ใช่

ช่องแสดงผล:

• ชื่อ
• ข้อความที่ตัดตอนมา
• ภาพที่โดดเด่น
• ราคาสินค้า

จำนวนคอลัมน์:

• 4

ใช้การก่ออิฐ:

• ใช่

แสดงแถบเลื่อน

ไปที่การตั้งค่าแถบเลื่อนและตัดสินใจที่จะแสดงหรือซ่อนแถบเลื่อน ฉันกำลังรวมแถบเลื่อนเพื่อให้ผู้ใช้ทราบว่าสามารถเลื่อนได้

แถบเลื่อน:

• แสดง

ผลการค้นหา Divi Ajax

การป้อนคำค้นหาจะแสดงผลลัพธ์ใต้ช่องค้นหา สิ่งนี้ดูดี แต่ไม่โดดเด่นจากเนื้อหาของเว็บไซต์ เราจะจัดสไตล์ให้เข้ากับการออกแบบของไซต์และไม่กลมกลืนกับรูปภาพผลิตภัณฑ์

3. จัดรูปแบบโมดูลให้เข้ากับเว็บไซต์ของคุณ

ในการจัดรูปแบบช่องค้นหา ฉันจะใช้องค์ประกอบการออกแบบจากเค้าโครงที่ฉันใช้ ที่ด้านล่างของหน้าร้านค้าของเลย์เอาต์ร้านค้าออนไลน์จะมีองค์ประกอบการออกแบบสองสามอย่าง หนึ่งคือโมดูล optin อีเมลที่น่าสนใจ ฉันจะใช้สิ่งนี้เป็นแรงบันดาลใจสำหรับภูมิหลังและภาคสนาม ฉันจะใช้สีพื้นหลังของ Shop Now CTA สำหรับผลการค้นหาด้วย ฉันให้ความสำคัญกับองค์ประกอบการออกแบบสามประการเป็นพิเศษ:

• สีพื้นหลังจดหมายข่าว – #757d79
• Shop CTA สีพื้นหลัง – #dcae83
• ช่องว่างภายในสำหรับทั้งคู่ – 50px (บน, ล่าง), 60px (ขวา, ซ้าย)

การจัดรูปแบบช่องค้นหา

เปิดการตั้งค่าพื้นหลังในแท็บเนื้อหา ส่วนนี้มีพื้นที่พื้นหลังที่แตกต่างกันสามส่วน ไปที่สุดท้าย เรียกว่า พื้นหลัง ใส่สีที่นี่

• สีพื้นหลัง – #757d79

ในแท็บออกแบบ ไปที่การตั้งค่าการเว้นวรรคและป้อนช่องว่างภายใน ซึ่งจะทำให้เราเห็นพื้นที่รอบสนามเพื่อให้เราเห็นผลลัพธ์ได้ดีขึ้นเมื่อเราไป นอกจากนี้ยังทำให้ช่องค้นหามีสีมากมายรอบ ๆ ซึ่งจะตรงกับองค์ประกอบในเค้าโครง

• ช่องว่างภายใน 50px (บน, ล่าง), 60px (ขวา, ซ้าย)

ในการตั้งค่าช่องค้นหา ให้เพิ่มสีพื้นหลังของช่องและสีข้อความของช่อง ฉันทำให้ฟิลด์ตรงกับพื้นหลังของโมดูลและเลือกสีขาวสำหรับข้อความ

• สีพื้นหลังของฟิลด์ – #757d79
• สีข้อความของฟิลด์ – #ffffff

ในการตั้งค่าเดียวกัน ให้เลื่อนลงไปที่ Field Border Color แล้วเลือกสีขาว เรายังสามารถปรับความหนาและรัศมีของเส้นขอบได้อีกด้วย ฉันจะปล่อยให้มันเป็นสี่เหลี่ยมจัตุรัสเพื่อให้ตรงกับช่องข้อความของโมดูล optin

• สีเส้นขอบสนาม – #ffffff

เปิดการตั้งค่าสำหรับไอคอนค้นหาและเลือกสีขาว

• ค้นหาไอคอนสี – #ffffff

เปิดการตั้งค่าสำหรับ Loader และเลือกสีขาวสำหรับ Loader Color ตัวโหลดจะเห็นได้เพียงชั่วขณะ แต่จะดูดีขึ้นหากตรงกับองค์ประกอบที่เหลือ

• สีของตัวโหลด – #ffffff

การจัดรูปแบบฟิลด์ผลลัพธ์

เปิดการตั้งค่าพื้นหลังในแท็บเนื้อหาและเพิ่มสีลงในพื้นหลัง ช่อง ผลการค้นหา และ รายการผลการค้นหา ซึ่งจะไม่ปรากฏให้เห็นในขณะที่เรากำลังจัดรูปแบบโมดูล เนื่องจากจะแสดงเฉพาะเมื่อแสดงผลการค้นหาเท่านั้น

• สีพื้นหลัง – #dcae83

ในแท็บออกแบบ เปิดการตั้งค่าสำหรับ ข้อความผลการค้นหารายการ ในแท็บชื่อ เลือกรูปแบบแบบอักษรตัวพิมพ์ใหญ่ทั้งหมด แล้วเลือกสีข้อความเป็นสีขาว ฉันจะปล่อยให้การตั้งค่าชื่ออื่นๆ ทั้งหมดเป็นค่าเริ่มต้น

• รูปแบบตัวอักษรของชื่อเรื่อง – TT
• สีข้อความของชื่อเรื่อง – #ffffff

เปิดแท็บข้อความที่ตัดตอนมาและเลือกสีขาวสำหรับ สีข้อความที่ตัดตอนมา

• สีข้อความที่ตัดตอนมา – #ffffff

เปิดแท็บราคา เลือก Semi Bold สำหรับน้ำหนักของราคา และสีขาวสำหรับสีข้อความ

• น้ำหนักแบบอักษรราคา – กึ่งหนา
• สีข้อความที่ตัดตอนมา – #ffffff

ผลลัพธ์

นี่คือลักษณะที่การค้นหา Ajax บนเดสก์ท็อปพร้อมสไตล์ของฉัน ผลการค้นหาจะแสดงเกือบจะในทันที ดูสง่างามและเรียบเนียน

นี่คือลักษณะที่ปรากฏบนโทรศัพท์ ผลลัพธ์ซ้อนและปรับให้พอดีกับหน้าจอ

จบความคิด

การเพิ่มการค้นหา Ajax ลงในเว็บไซต์ Divi ของคุณนั้นรวดเร็วและง่ายดายด้วยปลั๊กอิน Divi Ajax Search ใช้งานง่าย จัดสไตล์ให้เข้ากับเว็บไซต์ของคุณได้ง่าย และผลลัพธ์ก็รวดเร็วและดูน่าทึ่ง คุณมีตัวเลือกมากมายสำหรับประเภทโพสต์ที่สามารถค้นหาได้และประเภทเนื้อหาที่จะแสดงในผลลัพธ์

ตอนนี้เว็บไซต์ Divi ของคุณสามารถมีคุณลักษณะการค้นหา Ajax ที่ออกแบบอย่างมืออาชีพซึ่งผู้เยี่ยมชมของคุณจะประทับใจ!

เราต้องการได้ยินจากคุณ คุณได้เพิ่มการค้นหา Ajax แบบเรียลไทม์ไปยังเว็บไซต์ Divi ของคุณหรือไม่? แจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณในความคิดเห็น

ภาพเด่นผ่าน Kroster / shutterstock.com