[ad_1]

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

ภาพรวมของช่องค้นหา Divi

สำนัก

ช่องค้นหา Divi เวอร์ชันเดสก์ท็อป

ตอบสนอง

ช่องค้นหาของ Divi รุ่นมือถือ

ดาวน์โหลดและ / หรือแก้ไขส่วนหัวส่วนกลาง

สำหรับบทความนี้ เราจะใช้ส่วนหัว / ส่วนท้ายฟรีที่มาพร้อมกับแพ็คเลย์เอาต์การจัดส่งของชำของเรา คุณสามารถดาวน์โหลด .Zip *: ฝรั่งเศส เก็บถาวรและดึงข้อมูลที่จำเป็น .json ไฟล์บนคอมพิวเตอร์ของคุณ

ไฟล์ json

หลังจากนั้นไปที่แดชบอร์ด WordPress ของคุณและไปที่ Divi - ตัวสร้างธีม. จากนั้นคุณต้องคลิกที่ ไอคอนลูกศรขึ้นและลง เพื่อเปิดตัวเลือกการพกพา

ตัวสร้างธีมสำหรับช่องค้นหา Divi

ในกิริยาใหม่ ให้คลิกที่ นำเข้า แท็บและค้นหา .json ไฟล์ที่คุณดาวน์โหลด เมื่อคุณพร้อม เลือก นำเข้ารุ่นเครื่องกำเนิดไฟฟ้าจาก ธีม Divi เพื่อเริ่มการดาวน์โหลด

นำเข้าไฟล์

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

ส่วนหัวทั่วโลก

เพิ่มช่องค้นหาในแถบเมนูรอง

การใช้ Divi Visual Builder คุณควรเห็นบางสิ่งที่คล้ายคลึงกันนี้ในฐานะ Global Header

ตัวแก้ไขส่วนหัวทั่วโลก

สิ่งแรกที่เราต้องการทำคือสร้างพื้นที่สำหรับช่องค้นหา เราต้องการให้แน่ใจว่าทุกคนสามารถเข้าถึงช่องค้นหาได้ง่าย ผู้เข้าชมดังนั้น เราจะเพิ่มลงในเมนูรอง (เหนือ หน้าแรก / ติดต่อ ไลน์).

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

โมดูลการค้นหาในคอลัมน์ที่สาม

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

ข้อความตัวยึดตำแหน่งภายในช่องค้นหา Divi

ช่องค้นหาที่อยู่ในคอลัมน์ที่สามไม่ดี ดังนั้นเราจึงต้องการที่จะเข้าสู่ โมดูลการวิจัย การตั้งค่าและไปที่ ออกแบบ ลิ้น. ค้นหามัน หม้อแปลงไฟฟ้า ตัวเลือก จากนั้นไปที่ แปลความ แท็บ (ที่สอง) จากนั้นคุณสามารถลากโมดูลการค้นหาเข้าที่ และ Divi จะจัดการ CSS และระยะห่างทั้งหมดสำหรับโมดูลนั้น

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

ตัวเลือกการแปลงร่าง

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

แปลงร่างสำหรับมือถือ

จัดแต่งทรงผมโมดูลการค้นหา Divi

แม้ว่าคุณจะไม่มีตัวเลือกการจัดรูปแบบมากมายสำหรับช่องค้นหา แต่คุณก็มีสองสามตัวเลือก นั่นคือสีของข้อความและของฟิลด์เอง ทั้งเมื่อไม่ได้ใช้งานและเมื่อผู้ใช้คลิกที่ข้อความ (และระยะห่างและขนาดและตัวเลือกการออกแบบ Divi มาตรฐานอื่น ๆ แน่นอน)

หากต้องการค้นหาตัวเลือกสี ให้ไปที่ Champ เมนูใน ออกแบบ ลิ้น. เมื่อขยายแล้ว คุณสามารถปรับเปลี่ยนสีของข้อความของตัวยึดตำแหน่ง สีพื้นหลังของฟิลด์ และสีของข้อความในฟิลด์ (ข้อความที่ผู้ใช้ป้อน กล่าวคือ) นอกจากนี้ มีสมาธิ รูปแบบต่างๆ คือเมื่อผู้ใช้โต้ตอบกับช่องค้นหาโดยเฉพาะ

สไตล์ช่องค้นหา

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

ตรวจสอบการตั้งค่าการมองเห็น

เลย์เอาต์และชุดส่วนหัวฟรีบางส่วนของเรามีตัวเลือกการแสดงผลที่แตกต่างกันสำหรับเดสก์ท็อปและอุปกรณ์มือถือ หากคุณเห็นม็อดสีจาง/เป็นสีเทาในตัวสร้างภาพ แสดงว่าม็อดถูกปิดใช้งานในอุปกรณ์บางตัว

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

ตัวเลือกสาย

จากนั้นไปที่ ความคืบหน้า ลิ้น และนำทางไปยัง ความชัดเจน ตัวเลือก. ที่นี่ตรวจสอบให้แน่ใจว่าตัวเลือกทั้งหมดภายใต้ ยกเลิกการใช้งาน เกี่ยวกับ ไม่ถูกเลือก สำหรับคอลัมน์ที่มีช่องค้นหาของคุณ คลิกปุ่มบันทึก (เห็บสีเขียว) และโมดูลควรปรากฏเป็นสีและไม่เปลี่ยนสีอีกต่อไป

ช่องค้นหา

เมื่อคุณแน่ใจว่าทุกอย่างมองเห็นได้ คุณก็พร้อมที่จะนำสิ่งนี้ไปออนไลน์!

บันทึกงานของคุณ

ตรวจสอบให้แน่ใจว่าคุณคลิกที่ ปุ่มบันทึกสีเขียว ที่ด้านล่างขวาของหน้าจอ

บันทึกการเปลี่ยนแปลงของคุณ

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

ช่องค้นหา Divi บันทึกการเปลี่ยนแปลง

ผลสุดท้าย

ที่เหลือก็แค่ชื่นชมผลงานของคุณในไซต์ของคุณ!

สำนัก

เวอร์ชันเดสก์ท็อป

ตอบสนอง

รุ่นมือถือ

สรุปกับช่องค้นหา Divi

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



[ad_2]

การเชื่อมโยงแหล่งที่มา