วิธีเปลี่ยนสไตล์ของหลายองค์ประกอบเมื่อวางเมาส์เหนือหรือคลิกใน Divi

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

นี่คือการออกแบบเลย์เอาต์ของส่วนที่เปลี่ยนไปเมื่อวางเมาส์เหนือปุ่ม

และนี่คือการออกแบบเลย์เอาต์ของส่วนเดียวกันที่เปลี่ยนแปลงด้วยการคลิกปุ่ม สังเกตว่าข้อความปุ่มยังเปลี่ยนไปเมื่อคลิก

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

ส่วนที่ 1: การออกแบบเค้าโครงส่วน

ในการเริ่มต้น ให้สร้างแถวสองคอลัมน์ใหม่

การตั้งค่ามาตรา

ก่อนเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าสำหรับส่วนนั้น และอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: #ffffff

• สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
• ตัวแบ่งสีด้านบน: #ffffff
• ความสูงของตัวแบ่งด้านบน: 5vw

• สไตล์ตัวแบ่งด้านล่าง: เหมือนกัน
• ตัวแบ่งสีด้านล่าง: #ffffff
• ความสูงของตัวแบ่งด้านล่าง: 5vw

• Padding: บน 6vw, 6vw ล่าง

ก่อนภาพ

ในคอลัมน์ด้านซ้ายของแถวสองคอลัมน์ ให้เพิ่มโมดูลรูปภาพใหม่

จากนั้นอัปโหลดภาพที่คุณต้องการแสดง สำหรับบทช่วยสอนนี้ เราใช้รูปภาพจาก Learning Management (LMS) Layout Pack ซึ่งมีขนาดประมาณ 800px x 550px

ใต้แท็บการออกแบบ ให้อัปเดตการจัดตำแหน่งและเปิดใช้งานตัวเลือกบังคับเต็มความกว้าง

• การจัดตำแหน่งภาพ: center
• บังคับเต็มความกว้าง: ใช่

ภาพติดตา

ต่อไป เราจะสร้างภาพอื่นที่เราจะแสดงเมื่อเราวางเมาส์เหนือ/คลิกที่ปุ่ม

หากต้องการสร้างรูปภาพ ให้ทำซ้ำโมดูลรูปภาพก่อนหน้า

แล้วอัพโหลดภาพใหม่ รูปภาพควรมีขนาดเท่ากับรูปภาพอื่น เนื่องจากจะแทนที่รูปภาพอื่นเมื่อวางเมาส์เหนือ/คลิก

สำหรับภาพนี้ เราจะให้ตำแหน่งที่แน่นอนแก่มัน ซึ่งจะทำให้รูปภาพนั่งตรงเหนือรูปภาพอื่นโดยไม่กินพื้นที่จริงบนหน้า

• ตำแหน่ง: Absolute

ใต้แท็บ ออกแบบ ให้เปลี่ยนความทึบใต้ตัวเลือกตัวกรองเพื่อให้มองไม่เห็นรูปภาพโดยสมบูรณ์

• ความทึบ: 0%

เพิ่มหัวเรื่องข้อความ

ในคอลัมน์ด้านขวา เพิ่มโมดูลข้อความใหม่

จากนั้นวาง HTML ต่อไปนี้ลงในพื้นที่เนื้อหา:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

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

ภายใต้แท็บการออกแบบ ให้อัปเดตตัวเลือกสไตล์ H3 ดังนี้:

• หัวข้อ 3 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อ 3 น้ำหนักแบบอักษร: Ultra Bold
• ส่วนหัว 3 รูปแบบตัวอักษร: TT
• หัวเรื่อง 3 ขนาดข้อความ: 65px (เดสก์ท็อปและแท็บเล็ต), 40px (โทรศัพท์)
• หัวเรื่อง 3 ระยะห่างตัวอักษร: 0.8em
• ส่วนหัว 3 ความสูงของบรรทัด: 1.3em

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

สร้างส่วนสำหรับปุ่ม

สร้างส่วนปกติใหม่ด้านล่างส่วนปัจจุบัน

จากนั้นเพิ่มแถวหนึ่งคอลัมน์ในส่วน

เพิ่มปุ่ม

ในคอลัมน์ เพิ่มโมดูลปุ่มใหม่

เปลี่ยนข้อความปุ่มเป็น "See After"

ข้ามไปที่แท็บการออกแบบและอัปเดตการออกแบบของปุ่มดังต่อไปนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #ffffff
• พื้นหลังปุ่ม: #4b4baf
• พื้นหลังปุ่ม (โฮเวอร์): #67ddc1
• ความกว้างของขอบปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 4px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: TT

ส่วนที่ 2: การเพิ่มคลาส CSS ให้กับองค์ประกอบ

เมื่อการออกแบบของเราพร้อมแล้ว เราจะดำเนินการเปลี่ยนแปลงการออกแบบที่เหลือให้สำเร็จโดยใช้โค้ดที่กำหนดเอง (CSS และ JQuery) แต่ก่อนที่เราจะเริ่มเพิ่มโค้ดที่กำหนดเอง เราจำเป็นต้องเพิ่ม CSS Classes ให้กับองค์ประกอบทั้งหมดที่เราต้องการเปลี่ยนเมื่อวางเมาส์เหนือ/คลิกปุ่ม

เพิ่มคลาส CSS ให้กับ Section

หากต้องการเพิ่มคลาส CSS ในส่วน ให้เปิดการตั้งค่าส่วน แล้วคลิกแท็บขั้นสูง จากนั้นป้อนคลาส CSS ต่อไปนี้:

• CSS Class: et-change-style_section

เพิ่มคลาส CSS ให้กับรูปภาพ

ถัดไป เปิดการตั้งค่าสำหรับรูปภาพแรกในคอลัมน์ด้านซ้าย และเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: et-before-image

นี่จะเป็นภาพที่แสดง "ก่อน" ปุ่มโฮเวอร์/คลิก

ใช้ modal ของเลเยอร์ เปิดการตั้งค่าสำหรับรูปภาพที่สอง (รูปภาพที่ถูกซ่อนด้วยตัวกรองความทึบ) และเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: et-after-image

นี่จะเป็นภาพที่แสดง "หลัง" ปุ่มโฮเวอร์/คลิก

เพิ่มคลาส CSS ให้กับ Text

ถัดไป เพิ่มคลาส CSS ต่อไปนี้ไปยังโมดูลข้อความในคอลัมน์ด้านขวา:

• CSS Class: et-style-text

เพิ่มคลาส CSS ให้กับ Button

สุดท้าย เพิ่ม CSS Class แบบกำหนดเองปุ่มในส่วนด้านล่างดังนี้:

• CSS Class: et-toggle-button

เราต้องการให้คลาสนี้กำหนดเป้าหมายปุ่มสำหรับฟังก์ชันโฮเวอร์/คลิกในโค้ดในภายหลัง

ส่วนที่ 3: เพิ่มรหัสที่กำหนดเองเพื่อเปลี่ยนรูปแบบเมื่อวางเมาส์เหนือหรือคลิก

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

เพิ่มโมดูลโค้ด

หากต้องการเพิ่มโค้ด ให้เพิ่มโมดูลโค้ดใต้ปุ่มในส่วนด้านล่าง

วางรหัส jQuery

จากนั้นวาง JQuery ต่อไปนี้ ตรวจสอบให้แน่ใจว่าได้ใส่โค้ดในแท็กสคริปต์แล้ว เนื่องจากเรากำลังเพิ่มโค้ดลงในเอกสาร HTML (ไม่ใช่ไฟล์ JS)

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

หากคุณดูโค้ด คุณควรรู้จัก CSS Classes ที่เราเพิ่มลงในปุ่มและส่วน

คลาสปุ่ม (“.et-toggle-button”) ถูกใช้เพื่อกำหนดเป้าหมายองค์ประกอบที่จะเริ่มต้นฟังก์ชันเมื่อวางเมาส์เหนือ

เมื่อวางเมาส์เหนือ ฟังก์ชันจะค้นหาองค์ประกอบที่มีคลาสส่วน “.et-change-style_section” และสลับ/เพิ่มคลาสใหม่ (“.et-change-style-active”) เมื่อเคอร์เซอร์วางเมาส์เหนือปุ่ม

ปุ่มนี้ยังถูกกำหนดเป้าหมาย (ผ่าน “$this”) เพื่อสลับคลาสใหม่ (“.et-toggle-button_active”) ในสถานะโฮเวอร์

กุญแจสำคัญในการเปลี่ยนรูปแบบขององค์ประกอบเหล่านี้บนโฮเวอร์คือการเพิ่ม/สลับคลาส CSS ใหม่เพิ่มเติมเหล่านี้ไปยังส่วนและปุ่ม

ตัวอย่างเช่น เมื่อส่วนที่มีคลาส ".et-change-style_section" ได้รับคลาสเพิ่มเติมนั้น (".et-change-style_active") เราสามารถใช้ CSS แบบกำหนดเองเพื่อเปลี่ยนรูปแบบของส่วนที่ได้รับจากเดิมผ่าน ตัวเลือก Divi ในตัว

การเปลี่ยนสไตล์ขององค์ประกอบด้วย CSS ที่กำหนดเอง

เปิดโมดูลโค้ดและวาง CSS แบบกำหนดเองต่อไปนี้ไว้เหนือสคริปต์ JQuery ตรวจสอบให้แน่ใจว่าได้ใส่ไว้ในแท็กสไตล์ที่จำเป็น

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

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

ถัดไป วาง CSS เพิ่มเติมต่อไปนี้ภายในแท็กสไตล์

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

เนื่องจากส่วนหลักได้รับคลาสเมื่อวางเมาส์เหนือ คุณจึงสามารถกำหนดเป้าหมายองค์ประกอบย่อยของส่วน (เช่น รูปภาพ) ได้โดยใช้คลาส CSS เดียวกัน แต่เนื่องจากเป็นคลาสในคอนเทนเนอร์/ส่วนพาเรนต์ คลาส CSS ควรอยู่ก่อนหน้าคลาสขององค์ประกอบที่คุณต้องการเปลี่ยนแปลง ในตัวอย่างนี้ คลาส CSS (“.et-change-style_active”) ที่มอบให้กับส่วนพาเรนต์มาก่อนคลาสที่ให้อิมเมจย่อย (“.et-after-image” และ “.et-before-image”)

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

ถัดไป วางในส่วนที่เหลือของ CSS ภายในแท็กสไตล์:

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

ข้อมูลโค้ด CSS เหล่านี้ใช้แนวคิดเดียวกันในการเปลี่ยนรูปแบบขององค์ประกอบเมื่อส่วน (หรือปุ่ม) มีคลาสใหม่

ผลลัพธ์สุดท้าย (โฮเวอร์)

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

การเปลี่ยนรูปแบบเมื่อคลิกแทนโฮเวอร์

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

หากต้องการเพิ่มฟังก์ชันการคลิก ให้แทนที่ JQuery ปัจจุบันด้วยสิ่งต่อไปนี้ (อีกครั้ง ตรวจสอบให้แน่ใจว่าถูกรวมไว้ในแท็กสคริปต์):

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

นี่คือผลลัพธ์สุดท้าย

ความคิดสุดท้าย

ความสามารถในการกำหนดเป้าหมายและเปลี่ยนรูปแบบขององค์ประกอบหลายอย่างบนหน้าเว็บเมื่อวางเมาส์เหนือหรือคลิกบนบางสิ่งเป็นทักษะที่เป็นประโยชน์ในการออกแบบเว็บ คุณสามารถใช้เทคนิคนี้สำหรับกรณีการใช้งานที่หลากหลาย (ก่อนและหลัง CTA ฯลฯ ...) แน่นอนว่าการรู้ CSS และ JS/JQuery เล็กน้อยจะช่วยได้ แต่อย่างที่คุณเห็นในบทช่วยสอนนี้ คุณไม่จำเป็นต้องรู้รหัสใดๆ เพื่อให้ได้ผลลัพธ์ที่น่าประหลาดใจ!

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!