วิธีเพิ่มช่องค้นหาในเมนูรอง Divi
[ad_1]
ภาพรวมของช่องค้นหา Divi
สำนัก
ตอบสนอง
ดาวน์โหลดและ / หรือแก้ไขส่วนหัวส่วนกลาง
สำหรับบทความนี้ เราจะใช้ส่วนหัว / ส่วนท้ายฟรีที่มาพร้อมกับแพ็คเลย์เอาต์การจัดส่งของชำของเรา คุณสามารถดาวน์โหลด .Zip *: ฝรั่งเศส เก็บถาวรและดึงข้อมูลที่จำเป็น .json ไฟล์บนคอมพิวเตอร์ของคุณ
หลังจากนั้นไปที่แดชบอร์ด WordPress ของคุณและไปที่ Divi - ตัวสร้างธีม. จากนั้นคุณต้องคลิกที่ ไอคอนลูกศรขึ้นและลง เพื่อเปิดตัวเลือกการพกพา
ในกิริยาใหม่ ให้คลิกที่ นำเข้า แท็บและค้นหา .json ไฟล์ที่คุณดาวน์โหลด เมื่อคุณพร้อม เลือก นำเข้าโมเดลตัวสร้างธีม Divi เพื่อเริ่มการดาวน์โหลด
ณ จุดนี้คุณพร้อมที่จะเข้าสู่ ส่วนหัวทั่วโลก ส่วนหนึ่งของ เทมเพลตเว็บไซต์เริ่มต้น. นำเข้าจาก .json ไฟล์ควรใช้ freebie เป็นส่วนหัวของไซต์โดยรวมโดยอัตโนมัติ
เพิ่มช่องค้นหาในแถบเมนูรอง
การใช้ Divi Visual Builder คุณควรเห็นบางสิ่งที่คล้ายคลึงกันนี้ในฐานะ Global Header
สิ่งแรกที่เราต้องการทำคือสร้างพื้นที่สำหรับช่องค้นหา เราต้องการให้แน่ใจว่าผู้เยี่ยมชมทุกคนสามารถเข้าถึงช่องค้นหาได้อย่างง่ายดาย ดังนั้นเราจะเพิ่มลงในเมนูรอง (เหนือ หน้าแรก / ติดต่อ ไลน์).
ในการเริ่มต้น เราจะเพิ่มช่องค้นหาโดยใช้ปุ่ม โมดูลค้นหา Divi ในคอลัมน์ที่สามของแถวแรก
ข้อความตัวยึดตำแหน่งมีความสำคัญสำหรับช่องค้นหา ดังนั้นเมื่อโมดูลของคุณพร้อมแล้ว ให้ไปที่ การตั้งค่าโหมด และตั้งค่า .ของคุณ พื้นที่สงวน ข้อความถึงสิ่งที่เตือนผู้ใช้ว่าต้องค้นหาอะไร เราใส่ หาของ! เป็นตัวยึดตำแหน่ง เพื่อให้ผู้ใช้รู้ว่านี่คือสิ่งที่พวกเขาสามารถค้นหาได้ เนื่องจากเราใช้ชุดเค้าโครงการจัดส่งของชำ
ช่องค้นหาที่อยู่ในคอลัมน์ที่สามไม่ดี ดังนั้นเราจึงต้องการที่จะเข้าสู่ โมดูลการวิจัย การตั้งค่าและไปที่ ออกแบบ ลิ้น. ค้นหามัน หม้อแปลงไฟฟ้า ตัวเลือก จากนั้นไปที่ แปลความ แท็บ (ที่สอง) จากนั้นคุณสามารถลากโมดูลการค้นหาเข้าที่ และ Divi จะจัดการ CSS และระยะห่างทั้งหมดสำหรับโมดูลนั้น
เรายังใช้% สำหรับค่านี้ เพื่อให้ยังคงสัมพันธ์กันโดยไม่คำนึงถึงวิวพอร์ตบนเดสก์ท็อป โดยใช้ พิกเซล อาจบิดเบือนความละเอียดที่แตกต่างกันบางอย่าง
Divi หม้อแปลงแปล ตัวเลือกยังต้องได้รับการปรับสำหรับมือถือ ถ้าคุณทำไม่ได้ก็เหมือนกัน ดังนั้นอย่าลืมไปที่ การเกิดปฏิกิริยา พารามิเตอร์และกำหนดตำแหน่งของโมดูลการค้นหาในตัวเลือกของเมนูรอง เราเพิ่งปรับตำแหน่งแนวตั้งของมือถือเพราะการวางไว้ในคอลัมน์ที่สามของแถวจะแสดงที่ด้านล่างของรายการในแถวโดยอัตโนมัติ
จัดแต่งทรงผมโมดูลการค้นหา Divi
แม้ว่าคุณจะไม่มีตัวเลือกการจัดรูปแบบมากมายสำหรับช่องค้นหา แต่คุณก็มีสองสามตัวเลือก นั่นคือสีของข้อความและของฟิลด์เอง ทั้งเมื่อไม่ได้ใช้งานและเมื่อผู้ใช้คลิกที่ข้อความ (และระยะห่างและขนาดและตัวเลือกการออกแบบ Divi มาตรฐานอื่น ๆ แน่นอน)
หากต้องการค้นหาตัวเลือกสี ให้ไปที่ Champ เมนูใน ออกแบบ ลิ้น. เมื่อขยายแล้ว คุณสามารถปรับเปลี่ยนสีของข้อความของตัวยึดตำแหน่ง สีพื้นหลังของฟิลด์ และสีของข้อความในฟิลด์ (ข้อความที่ผู้ใช้ป้อน กล่าวคือ) นอกจากนี้ มีสมาธิ รูปแบบต่างๆ คือเมื่อผู้ใช้โต้ตอบกับช่องค้นหาโดยเฉพาะ
เมื่อได้สไตล์ตามที่คุณต้องการแล้ว ให้คลิกปุ่มบันทึก
ตรวจสอบการตั้งค่าการมองเห็น
เลย์เอาต์และชุดส่วนหัวฟรีบางส่วนของเรามีตัวเลือกการแสดงผลที่แตกต่างกันสำหรับเดสก์ท็อปและอุปกรณ์มือถือ หากคุณเห็นม็อดสีจาง/เป็นสีเทาในตัวสร้างภาพ แสดงว่าม็อดถูกปิดใช้งานในอุปกรณ์บางตัว
สำหรับส่วนหัวของการจัดส่งของชำ สองคอลัมน์สุดท้ายจะถูกปิดใช้งานบนมือถือ เราต้องการที่จะเข้าสู่ การตั้งค่าสาย และคลิกที่การตั้งค่าของคอลัมน์ที่คุณต้องการแสดงบนมือถือ ในกรณีนี้มันเป็นครั้งที่สาม
จากนั้นไปที่ ความคืบหน้า ลิ้น และนำทางไปยัง ความชัดเจน ตัวเลือก. ที่นี่ตรวจสอบให้แน่ใจว่าตัวเลือกทั้งหมดภายใต้ ยกเลิกการใช้งาน เกี่ยวกับ ไม่ถูกเลือก สำหรับคอลัมน์ที่มีช่องค้นหาของคุณ คลิกปุ่มบันทึก (เห็บสีเขียว) และโมดูลควรปรากฏเป็นสีและไม่เปลี่ยนสีอีกต่อไป
เมื่อคุณแน่ใจว่าทุกอย่างมองเห็นได้ คุณก็พร้อมที่จะนำสิ่งนี้ไปออนไลน์!
บันทึกงานของคุณ
ตรวจสอบให้แน่ใจว่าคุณคลิกที่ ปุ่มบันทึกสีเขียว ที่ด้านล่างขวาของหน้าจอ
ตอนนี้คุณพร้อมที่จะปิดโปรแกรมสร้างภาพโดยใช้ X ที่มุมขวาบน ในหน้าจอถัดไป คุณจะต้องแน่ใจว่าตัวสร้างธีม Divi ได้บันทึกตัวเลือกทั้งหมดของคุณแล้ว ถ้าเขาว่า บันทึกการเปลี่ยนแปลง, คลิกที่ปุ่ม ถ้าเขาว่า บันทึกการเปลี่ยนแปลงทั้งหมดแล้วแสดงว่าช่องค้นหาของคุณอยู่ในเมนูรอง Divi แล้ว
ผลสุดท้าย
ที่เหลือก็แค่ชื่นชมผลงานของคุณในไซต์ของคุณ!
สำนัก
ตอบสนอง
สรุปกับช่องค้นหา Divi
ช่องค้นหาเป็นส่วนพื้นฐานของประสบการณ์การใช้งานที่ดีสำหรับไซต์ของคุณ หากคุณต้องการให้บริการที่ดีที่สุดแก่ผู้เยี่ยมชมของคุณ ตรวจสอบให้แน่ใจว่าเนื้อหาของคุณสามารถค้นหาได้ควรเป็นหนึ่งในความสำคัญสูงสุดของคุณ ฉันหวังว่าคุณจะสามารถใช้วิธีการที่ง่ายและรวดเร็วนี้และนำไปใช้กับไซต์ Divi ของคุณในไม่ช้า!
[ad_2]
