คุณต้องการทราบวิธีการเปลี่ยนภาพเมื่อวางเมาส์เหนือด้วย DIVI หรือไม่?
เอฟเฟกต์โฮเวอร์เป็นการโต้ตอบขนาดเล็กที่ง่ายที่สุดที่ผู้ใช้สามารถทำได้ด้วยa เว็บไซต์. ที่ ตัวสร้างธีม Divi นำเสนอชุดเอฟเฟกต์โฮเวอร์ที่เรียบง่ายอย่างเหลือเชื่อที่คุณสามารถใช้เพื่อสร้างการโต้ตอบที่น่าดึงดูดสำหรับทุกคนที่เข้าชม เว็บไซต์.
เอฟเฟกต์ที่โดดเด่นและมีประโยชน์อย่างหนึ่งของ Divi ก็คือสามารถปรับเปลี่ยนรูปภาพได้เมื่อผู้ใช้วางเคอร์เซอร์ไว้เหนือรูปภาพ
เราแสดงให้คุณเห็นในบทช่วยสอนนี้ถึงวิธีการเปลี่ยนภาพที่สวยงามเมื่อวางเคอร์เซอร์ของเมาส์ไว้เหนือภาพ
การสำรวจ
ก่อนที่เราจะเริ่ม มาดูผลลัพธ์ที่เราต้องการบรรลุกันก่อน
สร้างเพจด้วยตัวสร้างธีม Divi
เริ่มต้นด้วยการเพิ่มหน้าใหม่ไปที่ เว็บไซต์เว็บ จากแดชบอร์ด WordPress
ดูเพิ่มเติม: จะสร้างเมนูเลื่อนและกดใน DIVI ได้อย่างไร?
จากนั้น ตั้งชื่อเพจของคุณ จากนั้นคลิกที่ " ใช้ Divi Builder ".
จากนั้นคลิกที่ " เลือกเลย์เอาต์«
ค้นหาและเลือก " หน้าแรกการดูแลสุนัข »
เลือกเค้าโครงและคลิกที่ " เลือกเลย์เอาต์ »
ค้นหาภาพของคุณ
เมื่ออยู่ใน Divi Builder เพียงค้นหารูปภาพที่คุณต้องการเพิ่มเอฟเฟกต์
โปรดทราบว่าคุณสามารถใช้บน องค์ประกอบใด ๆ ที่มีภาพ
เปิดการตั้งค่าโมดูล
เมื่อคุณตัดสินใจแล้ว ให้คลิกที่ไอคอนรูปเฟืองแล้วป้อน พารามิเตอร์โมดูล ซึ่งประกอบด้วยภาพ
ในกรณีของชุดเลย์เอาต์นี้ รูปภาพที่เราจะใช้เอฟเฟกต์โฮเวอร์นั้นเป็นพื้นหลังของคอลัมน์ขวาสุดของแถวแรก
ป้อนการตั้งค่าคอลัมน์
ค้นหารูปภาพในการตั้งค่า
เมื่อคุณอยู่ในการตั้งค่าของ คอลัมน์ ถูกต้อง อย่าลืมเลือกแท็บ เนื้อหา. เลื่อนลงมาจนเจอตัวเลือก ล่าง.
ภายใต้ พื้นหลัง, Divi ให้ตัวเลือกแก่คุณในการใช้สีทึบ ไล่ระดับสี หรือรูปภาพ หรือวิดีโอในรูปแบบ .mp4
และถึงแม้จะใช้เอฟเฟกต์โฮเวอร์กับเอฟเฟกต์ใดก็ได้ แต่เราทำงานในแท็บ รูปภาพ ที่สามจากซ้าย
เปิดใช้งานเอฟเฟกต์โฮเวอร์
เลื่อนเมาส์ไปที่คำว่า พื้นหลัง (คำบรรยายที่เล็กที่สุด) และค้นหาไอคอนลูกศร ในตัวเลือกที่ปรากฏ นี่คือการสลับสำหรับ เอฟเฟกต์ Divi Hover.
เมื่อเปิดใช้งานตัวเลือกนี้ แท็บใหม่สองแท็บจะปรากฏขึ้น แท็บด้านซ้ายเป็นภาพฐานที่ปรากฏขึ้นโดยไม่มีการโต้ตอบ
เลือกภาพใหม่ของคุณ
เมื่อคุณเลื่อนเคอร์เซอร์ไปที่รูปภาพ คุณจะมีตัวเลือกปกติ: เพื่อแทนที่ภาพ ou เพื่อลบภาพ.
หากคุณเลือกไอคอนถังขยะ ไอคอนจะเปิดใช้งานเอฟเฟกต์โฮเวอร์ แต่จะทำให้รูปภาพหายไป
เนื่องจากเราต้องการ เปลี่ยน ภาพบนโฮเวอร์เราก็ คลิกที่ภาพตัวเอง, ไม่ว่าจะบนไอคอนรูปเฟือง .
เลือกภาพโฮเวอร์ (แทน)
นี้จะเปิดไลบรารีสื่อของคุณ จากนั้น คุณสามารถเลือกรูปภาพใหม่ที่คุณต้องการให้ผู้ใช้เห็นเมื่อวางเมาส์เหนือรูปภาพต้นฉบับ คลิกที่ 'อัพโหลดภาพ'
ตรวจสอบข้อผิดพลาดกับภาพต้นฉบับ
เราแนะนำเสมอว่าคุณต้องแน่ใจว่าภาพต้นฉบับยังคงเหมือนเดิม เพื่อตรวจสอบให้คลิกที่ แท็บซ้าย และตรวจสอบให้แน่ใจว่าภาพต้นฉบับยังคงอยู่
ถ้าทุกอย่างเรียบร้อยดี คุณสามารถบันทึกการตั้งค่าของคุณได้
- บันทึกการตั้งค่าคอลัมน์
- กด . อีกครั้ง เห็บสีเขียว เพื่อบันทึกการตั้งค่าสาย
บันทึกการตั้งค่าทั่วไปทั่วไปและเผยแพร่หน้า
ผล
หากคุณทำตามขั้นตอนทั้งหมดในบทช่วยสอนนี้ คุณควรได้รับสิ่งนี้
ดาวน์โหลด DIVI ทันที!!!
สรุป
เครื่องมือสร้างธีมของ Divi เต็มไปด้วยเครื่องมืออันทรงพลังที่ใครๆ ก็สามารถใช้ได้ สร้างเว็บไซต์ น่าสนใจและโต้ตอบได้ การเปลี่ยนแปลงภาพโฮเวอร์ที่เราแสดงให้คุณเห็นในคู่มือนี้เป็นเพียงเครื่องมือหนึ่งในหลายๆ เครื่องมือ
หากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์ของคุณให้เสร็จสมบูรณ์ โปรดอ่านคู่มือของเราที่ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อพูดคุยเกี่ยวกับมัน แต่ในขณะเดียวกัน, แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
