ตัวเลือกการแปลงในตัวของ Divi ได้รับการพิสูจน์แล้วว่าเป็นเครื่องมือออกแบบที่มีประโยชน์อย่างยิ่ง ช่วยให้คุณปรับขนาด หมุน เอียงหรือวางตำแหน่งองค์ประกอบใดๆ บนหน้าได้อย่างง่ายดาย และคุณยังสามารถเลือกที่จะเปลี่ยนไอเท็มให้เป็นสถานะโฮเวอร์เพื่อเอฟเฟกต์โฮเวอร์ที่ยอดเยี่ยมได้อีกด้วย ดังนั้นวันนี้เราจะแสดงวิธีการปรับใช้แอนิเมชั่นเหล่านี้ในคลิกเดียว
วิธีนี้ต้องใช้ jQuery ข้อดีของเทคนิคนี้คือ คุณสามารถใช้พารามิเตอร์การออกแบบในตัวของ Divi เพื่อจัดสไตล์คุณสมบัติการแปลง จากนั้นเปิดใช้งาน (หรือปิดใช้งาน) คุณสมบัติการแปลงเหล่านั้นด้วยการคลิกเมาส์ สิ่งนี้จะเปิดโอกาสให้เปิดเผยความเป็นไปได้มากมาย เนื้อหา ซ่อนไว้โดยการย้ายรายการเมื่อคลิกแทนที่จะวางเมาส์เหนือ และยังช่วยลดความจำเป็นในการรู้จัก CSS มากมายอีกด้วย
ขอเริ่มต้น
สิ่งที่คุณต้องเริ่มต้น
สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีคือ Divi. ในการเริ่มต้น ไปที่แดชบอร์ด WordPress ของคุณ สร้างเพจใหม่ ตั้งชื่อเพจของคุณ และออกแบบต่อด้วยตัวสร้าง Divi ในเบื้องหน้า เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น" ตอนนี้คุณพร้อมที่จะไปแล้ว!
อธิบายแนวคิดพื้นฐาน
ก่อนที่ฉันจะลงรายละเอียดมากเกินไปในบทช่วยสอนนี้ฉันจะแนะนำวิธีการทำงานของเทคนิคนี้ในไม่กี่คำ
ทุกครั้งที่คุณปรับแต่งองค์ประกอบ (ส่วนเส้นหรือโมดูล) ใน Divi คุณจะเพิ่ม CSS ที่กำหนดเองให้กับองค์ประกอบนี้ในพื้นหลัง ตัวอย่างเช่นเมื่อใช้การตั้งค่าในตัวของ Divi คุณสามารถเพิ่มคุณสมบัติการหมุนการเปลี่ยนแปลงให้กับโมดูลการแจ้งเตือนเพื่อให้โมดูลหมุนตามแกน Z ได้ 20 องศา
แต่เบื้องหลังคุณสร้าง CSS แบบกำหนดเองที่เพิ่มเข้ากับโมดูลข้อความนี้และมีลักษณะดังนี้:
.et_pb_text_0 {transform: rotateZ (20deg); }
ง่ายพอ สมมติว่าคุณต้องการเพิ่มตัวเลือกการแปลงโฮเวอร์เดียวกันนั้น คุณเพียงแค่ต้องใช้คุณสมบัติการแปลงสำหรับสถานะโฮเวอร์ในการตั้งค่าของ Divi Builder
และโค้ดจะมีลักษณะดังนี้:
.et_pb_text_0: โฮเวอร์ {transform: rotateZ (20deg); }
อย่างไรก็ตามหากคุณต้องการปรับใช้คุณสมบัติการแปลงเมื่อคลิกสิ่งต่างๆจะต้องทำงานแตกต่างกันเล็กน้อย คุณจะต้องป้อนรหัสจาวาสคริปต์เพื่อทริกเกอร์เหตุการณ์การคลิกบนองค์ประกอบ (หรือโมดูลข้อความ)
จากตัวอย่างปัจจุบันเป้าหมายหลักของเราคือการเปิดและปิดคุณสมบัติการแปลง "transform: rotationZ (20deg)" เมื่อคลิก วิธีง่ายๆในการทำเช่นนี้คือการสร้างคลาส CSS ที่กำหนดเองด้วยคุณสมบัติ "transformer: none!" สำคัญ” ในการตั้งค่าเพจ (หรือสไตล์ชีตภายนอก) มันจะเป็นแบบนี้
.toggle-transform-animation {แปรรูป: ไม่มี! สำคัญ; }
ด้วย CSS นั้น เราสามารถเพิ่มคลาส CSS "toggle-transform-animation" ให้กับองค์ประกอบโมดูลการนำเสนอซึ่งมีคุณสมบัติการแปลงของเรา
การดำเนินการนี้จะปิดใช้งาน (แทนที่) คุณสมบัติการแปลงและป้องกันไม่ให้เปิดใช้งานในขั้นต้น แม้ว่าจะมีการเพิ่มสไตล์ของคุณสมบัติการแปลงแล้วก็ตาม
ตอนนี้สิ่งที่คุณต้องทำคือเปิดใช้งาน (เพิ่มและลบ) คลาส CSS ที่กำหนดเองนี้เมื่อคุณคลิกที่องค์ประกอบ ดังนั้นทุกครั้งที่เราคลิกที่องค์ประกอบชั้นเรียนจะถูกลบและคุณสมบัติการเปลี่ยนแปลง (ที่คุณเพิ่มด้วย Divi) จะถูกปรับใช้
นี่คือตัวอย่างง่ายๆในการทำเช่นนี้ ขั้นแรกให้เพิ่มคลาส CSS อื่นในโมดูลการนำเสนอที่ชื่อว่า "transform_target"
จากนั้นไปที่ Divi > Theme Options > Integration และเพิ่มสคริปต์ jQuery ต่อไปนี้ที่ส่วนหัวของ บล็อกของคุณ:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
นั่นคือทั้งหมด! ทุกครั้งที่คุณคลิกที่โมดูลการนำเสนอคุณสมบัติการเปลี่ยนแปลงที่คุณเพิ่มลงในงานนำเสนอใน Divi จะถูกเปิดใช้งานหรือปิดใช้งาน
ตอนนี้มาสร้างตัวอย่างเพื่อที่คุณจะได้เห็นว่ามันจะมีประโยชน์กับโครงการของคุณอย่างไร
วิธีการเปลี่ยนคุณสมบัติการแปลงในคลิกเพื่อแสดงเนื้อหาใน Divi
สำหรับตัวอย่างนี้ เราจะยึดตามตัวอย่างคำโปรยง่ายๆ ที่ใช้ด้านบน ต่อไป เราจะเพิ่มคำนำเสนอเพิ่มเติมเบื้องหลังสิ่งนี้ เพื่อว่าเมื่อใดก็ตามที่คุณคลิกที่ข้อความนำเสนอด้านบน ข้อความนำเสนอนั้นจะเคลื่อนออกไปเพื่อเผยให้เห็น เนื้อหา คำประกาศเพิ่มเติมที่อยู่ด้านหลังเอกสาร
การสร้างโมดูล Blurb ด้านหน้าและด้านหลัง
จากนั้นเพิ่มโมดูลการนำเสนอลงในคอลัมน์ 1
อัพเดต เนื้อหา ประกาศแจ้งเพื่อรวมเฉพาะชื่อเรื่อง (ลบเนื้อหาเนื้อหาเริ่มต้น) จากนั้นเพิ่มไอคอนประกาศแจ้ง
จากนั้นอัพเดตพารามิเตอร์การออกแบบดังนี้:
สีพื้นหลัง: #4c5866
ไอคอนสี: #ffffff
การวางแนวของข้อความ: กึ่งกลาง
สีข้อความ
: ส่วนต่างที่กำหนดเองที่มีน้ำหนักเบา: 0px ที่ด้านล่าง
การเติมเต็มที่กำหนดเอง: 15% ที่ด้านบน, 15% ที่ด้านล่าง, 10% ทางด้านซ้าย, 10% ที่ด้านขวา
เราจะกลับมาที่โมดูลนี้ในภายหลัง แต่สำหรับตอนนี้เราต้องสร้างโมดูล Blurb ตัวที่สองซึ่งจะทำหน้าที่เป็นโมดูล "ส่งคืน" พร้อมเนื้อหาเพิ่มเติม
เมื่อต้องการทำสิ่งนี้ให้ทำซ้ำโมดูลการนำเสนอที่คุณเพิ่งสร้างขึ้น
จากนั้นในโมดูลที่สองให้ลบไอคอนการนำเสนอ (และรูปภาพเริ่มต้น) และเพิ่มเนื้อหาเนื้อหากลับไปที่โมดูล จากนั้นอัปเดตพารามิเตอร์การออกแบบดังนี้:
สีพื้นหลัง: rgba (76,88,102,0.3)
สีข้อความ: ดำ
ช่องว่างภายในที่กำหนดเอง: ด้านบน 20%
วางตำแหน่งโมดูลก่อนสรุป
ตอนนี้ภาพเบลอทั้งสองของเรามีสไตล์แล้วเราต้องกลับไปที่ข้อความแจ้งเตือนด้านหน้า (ด้านบน) และวางตำแหน่งไว้เหนือข้อความแจ้งเตือนด้านหลัง (ด้านล่าง) ในการทำเช่นนี้เราจะกำหนดตำแหน่งที่แน่นอนโดยมีความสูง 100% และความกว้าง 100%
ก่อนอื่นให้เปิดการตั้งค่าโมดูลการนำเสนอด้านบน / ด้านหน้าและอัพเดตต่อไปนี้:
ความสูง: 100%;
ความกว้าง: 100%;
จากนั้นเพิ่มโค้ด CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:
ตำแหน่ง: สัมบูรณ์! สำคัญ; การเปลี่ยนแปลง: .5 ทั้งหมด
จากนั้นอัปเดตดัชนี z ดังนี้:
ดัชนี Z: 2000
ตำแหน่งที่แน่นอนเมื่อรวมกับความสูงและความกว้าง 100% และดัชนี z ช่วยให้มั่นใจได้ว่าโมดูลการนำเสนอจะอยู่ด้านบนของโมดูลการนำเสนอด้านหลัง ในความเป็นจริงคุณสมบัติการเปลี่ยนแปลงคือระยะเวลาของการเปลี่ยนแปลงของตัวเลือกการเปลี่ยนแปลงที่เราจะปรับใช้ในคลิกถัดไป และ“ เคอร์เซอร์: ตัวชี้” คือการเปลี่ยนเคอร์เซอร์เพื่อให้องค์ประกอบนั้นปรากฏให้ผู้ใช้คลิกได้
การเพิ่มตัวเลือกการแปลงและคลาสที่กำหนดเองไปที่การประกาศแจ้งความด้านหน้า
ตอนนี้เป็นเวลาที่จะเพิ่มคุณสมบัติการแปลงของเราลงในข้อความแจ้งเตือนด้านหน้า จากนั้นเราจะเพิ่มคลาส CSS ที่กำหนดเองที่จำเป็นสำหรับ jQuery ของเราเพื่อสลับคุณสมบัติเหล่านี้เมื่อคลิก
ภายใต้พารามิเตอร์การออกแบบการประกาศแจ้งทางด้านหน้าให้เพิ่มคุณสมบัติการแปลงต่อไปนี้:
ระดับการเปลี่ยนแปลง X และ y: 20%
แปลงกำเนิด: ศูนย์กลางด้านบน
โปรดจำไว้ว่าการออกแบบการเปลี่ยนแปลงที่คุณเห็น ณ จุดนี้จะเป็นแบบที่ถูกกระตุ้นเมื่อคลิก เราใช้ประโยชน์จาก Divi builder เพื่อให้ได้ดีไซน์ที่ต้องการ ในกรณีนี้ข้อความแจ้งเตือนด้านหน้าจะหดตัวและอยู่กึ่งกลางที่ด้านบนเหมือนไอคอนที่คลิกได้
เมื่อเสร็จแล้วให้เพิ่มคลาส CSS สองคลาสที่จำเป็นในการกำหนดเป้าหมายส่วนหน้าด้วย jQuery ดังนี้:
CSS คลาส: toggle-transform-animation transform_target
(ให้แน่ใจว่าได้แยกชื่อแต่ละชั้นด้วยช่องว่าง)
จากนั้นเพิ่มโค้ด CSS แบบกำหนดเองต่อไปนี้ที่จะใช้เพื่อเปิดใช้งานและปิดใช้งานคุณสมบัติการแปลงด้วย jQuery
.toggle-transform-animation {transform: none! important; }
คุณจะสังเกตเห็นว่าคุณสมบัติการแปลงเสียงที่เพิ่มก่อนหน้านี้ถูกปิดใช้งานเนื่องจากคลาสนี้ถูกใช้กับมัน
ไปที่ Divi> ตัวเลือกธีม> การรวมและเพิ่มสคริปต์ jQuery ต่อไปนี้ที่ส่วนหัวของบล็อก:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
เรามาดูผลสุดท้ายกัน
คุณสามารถใช้ตัวอย่างนี้เพื่อสร้างงานออกแบบที่น่าประทับใจยิ่งขึ้น อย่าลังเลที่จะแบ่งปันความคิดเห็นของคุณในส่วนความคิดเห็น
