Divi: วิธีเปลี่ยนรูปแบบขององค์ประกอบต่าง ๆ เมื่อวางเมาส์เหนือหรือหลังจากคลิก

คุณต้องการเปลี่ยนสไตล์ขององค์ประกอบต่างๆ หรือไม่ Divi บนโฮเวอร์หรือหลังจากคลิก?

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

ขั้นแรกเราจะใช้ประโยชน์จากตัวเลือกการออกแบบในตัวของ Divi เพื่อออกแบบเค้าโครงส่วน 

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

นี่อาจฟังดูซับซ้อน (โดยเฉพาะสำหรับผู้เริ่มต้น) แต่คุณอาจแปลกใจกับความเรียบง่ายที่ทำ

ขอเริ่มต้น!

การสำรวจ

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

การเปลี่ยนองค์ประกอบบนปุ่มโฮเวอร์

การปรับเปลี่ยนองค์ประกอบหลังจากคลิกที่ปุ่ม

เริ่มต้นด้วยการสร้างเพจด้วย Divi Builder

ดูสิ่งนี้ด้วย: Divi: วิธีสร้างเมนูล้อหมุนบนโฮเวอร์

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

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

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

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

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

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

• ความเป็นมา: #ffffff

มาเพิ่มตัวคั่นส่วนกัน

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

• ตัวแบ่ง (ล่าง)
  • สไตล์: ดูการจับภาพ
  • สี: #ffffff
  • ส่วนสูง: 5vw
  • Padding (บนและล่าง): 6vw

รูปภาพ (ก่อนโฮเวอร์)

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

ถัดไป อัปโหลดภาพที่คุณต้องการเน้น 

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

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

รูปภาพ (เมื่อวางเมาส์เหนือหรือหลังจากคลิก)

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

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

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

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

• ตำแหน่ง: Absolute

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

• ความทึบ: 0%

เพิ่มโมดูลข้อความ

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

จากนั้นวางโค้ด HTML ต่อไปนี้ลงในช่อง เนื้อหา จากร่างกาย :

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

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

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

• หัวข้อที่ 3:
  • แบบอักษร: มอนต์เซอร์รัต
  • น้ำหนักแบบอักษร น้ำหนักแบบอักษร: Ultra Bold
  • สไตล์: TT
  • ขนาดตัวอักษร: 60 px (คอมพิวเตอร์และแท็บเล็ต), 40 px (โทรศัพท์)
  • ระยะห่างระหว่างตัวอักษร: 0,06em
  • ความสูงของสาย: 2 em

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

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

ก่อนอื่นเราต้องสร้างส่วนปกติใหม่ภายใต้ส่วนปัจจุบัน

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

เพิ่มปุ่ม

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

เปลี่ยนข้อความของปุ่มเป็น "ดำเนินการต่อ..."

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

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

อ่าน: Divi: วิธีเพิ่มไอคอนแฮมเบอร์เกอร์ในโมดูลเมนู

• ระยะห่างระหว่างตัวอักษรของปุ่ม: 4px
• แบบอักษร: มอนต์เซอร์รัต
• น้ำหนักแบบอักษร: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: TT

• มาร์จิ้น (ล่าง): 0px
• Padding (บนและล่าง): 1.5em
• Padding (ซ้ายและขวา): 4em

ส่วนที่ 2: เพิ่มคลาส CSS ให้กับ Elements

เมื่อการออกแบบของเราพร้อมแล้ว เราจะทำการเปลี่ยนแปลงการออกแบบที่เหลือโดยใช้โค้ดที่กำหนดเอง (CSS และ JQuery)

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

เพิ่มคลาส CSS ในส่วน

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

• CSS Class: et-change-style_section

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

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

• คลาส CSS: et-before-image

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

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

• คลาส CSS: et-after-image

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

เพิ่มคลาส CSS ให้กับโมดูลข้อความ

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

• คลาส CSS: et-style-text

เพิ่มคลาส CSS ให้กับโมดูลปุ่ม

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

• คลาส CSS: 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 . ที่กำหนดเอง

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

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

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

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

จากนั้นวาง 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 ปัจจุบันด้วยสิ่งต่อไปนี้ (อีกครั้ง ตรวจสอบให้แน่ใจว่าถูกห่อด้วยแท็กสคริปต์):

(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('Précédent...');
            } else {
                $this.text('Suite...');
            }
        });
    });
})( jQuery );

นี่คือผลสุดท้าย

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

คุณสามารถใช้เทคนิคนี้กับกรณีการใช้งานที่หลากหลาย (ก่อนและหลัง CTA เป็นต้น)

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

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...