วิธีเปลี่ยนเคอร์เซอร์ของคุณให้เป็นปุ่มเมื่อเลื่อนองค์ประกอบโดยใช้ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. สร้างโครงสร้างองค์ประกอบ

เพิ่มมาตราใหม่

สีพื้นหลัง

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

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

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและเปลี่ยนการตั้งค่าระยะห่างดังนี้:

• ช่องว่างภายในด้านบน: 80px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

• ความกว้างสูงสุด: 2580px

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

มาเริ่มกันที่โมดูล เริ่มต้นด้วยโมดูลรูปภาพในคอลัมน์ 1 อัปโหลดรูปภาพที่คุณเลือก

เพิ่มลิงค์

เพิ่มลิงก์ไปยังโมดูลรูปภาพถัดไป

มาตราส่วนโฮเวอร์

จากนั้นไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่ามาตราส่วนโฮเวอร์ของโมดูล

• ทั้งคู่: 90%

CSS Class

ตั้งค่าโมดูลให้สมบูรณ์โดยใช้คลาส CSS ต่อไปนี้ในแท็บขั้นสูง:

• CSS Class: รูปภาพเคอร์เซอร์

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

เพิ่มเนื้อหา H3

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลข้อความที่มีเนื้อหา H3 บางส่วนที่คุณเลือก

การตั้งค่าข้อความ H3

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความ H3 ตามนั้น:

• หัวข้อที่ 3 แบบอักษร: นักแสดง
• หัวเรื่อง 3 สีข้อความ: #000000
• หัวเรื่อง 3 ขนาดข้อความ:
  • เดสก์ท็อป: 35px
  • แท็บเล็ต: 28px
  • โทรศัพท์: 22px
• ส่วนหัว 3 ความสูงของบรรทัด: 1.4em

ระยะห่าง

เพิ่มระยะขอบด้านล่างบางส่วนต่อไป

• ขอบล่าง: 15px

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

เพิ่มเนื้อหา

จากนั้น เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าพร้อมเนื้อหาคำอธิบายที่คุณเลือก

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความของโมดูลดังนี้:

• แบบอักษรของข้อความ: นักแสดง
• สีข้อความ: #75baff
• ขนาดข้อความ:
  • เดสก์ท็อป: 22px
  • แท็บเล็ต: 18px
  • โทรศัพท์: 15px
• ระยะห่างของตัวอักษรข้อความ: 0.5px
• ความสูงของบรรทัดตัวอักษร: 2em

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 1px

• แบบอักษรของปุ่ม: นักแสดง
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• ขอบล่าง: 80px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านขวา: 30px

กล่องเงา

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยใช้การตั้งค่าเงาของกล่องต่อไปนี้:

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• เงาสี: #000000

ลบคอลัมน์2

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

โคลนคอลัมน์ 1

และนำคอลัมน์แรกกลับมาใช้ใหม่โดยการโคลนครั้งเดียว

โคลนทั้งแถว

ดำเนินการต่อโดยโคลนทั้งแถวหนึ่งครั้ง

เปลี่ยนเนื้อหา รูปภาพ และลิงก์ที่ซ้ำกันทั้งหมด

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

2. เพิ่มเคอร์เซอร์

เพิ่มแถวใหม่ให้กับ Section

โครงสร้างคอลัมน์

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

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

เพิ่มเนื้อหา

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

สีพื้นหลัง

จากนั้นเพิ่มสีพื้นหลัง

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

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและจัดรูปแบบข้อความตามลำดับ:

• แบบอักษรของข้อความ: นักแสดง
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #ffffff
• ระยะห่างของตัวอักษรข้อความ: 2px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

เพิ่มค่าความกว้างและความสูงในการตั้งค่าการปรับขนาดถัดไป

• ความกว้าง: 150px
• ส่วนสูง: 150px

ชายแดน

เรากำลังเปลี่ยนโมดูลนี้เป็นวงกลมโดยเปลี่ยนการตั้งค่าเส้นขอบ

• ทุกมุม: 100px

กล่องเงา

เราจะเพิ่มเงาของกล่องที่ละเอียดอ่อนด้วย

• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 20px
• เงาสี: rgba(7,213,255,0.14)

CSS Class

จากนั้นเราจะให้คลาส CSS แก่โมดูลของเรา

• คลาส CSS: เคอร์เซอร์

องค์ประกอบหลัก CSS

เรากำลังเพิ่มบรรทัดโค้ด CSS บางส่วนลงในองค์ประกอบหลักของโมดูลด้วย

transition: all .1s linear;
pointer-events: none;

display: flex;
justify-content: center;
align-items: center;

ตำแหน่ง

และเราจะดำเนินการตั้งค่าโมดูลให้เสร็จสิ้นโดยแก้ไขตำแหน่งในแท็บขั้นสูง:

• ตำแหน่ง: คงที่
• ตำแหน่ง: บนซ้าย
• ดัชนี Z: 2

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

หลังจากที่เราได้ออกแบบเคอร์เซอร์แล้ว ก็ถึงเวลาที่จะทำให้ฟังก์ชันทำงาน ในการทำเช่นนั้น เราจะเพิ่ม Code Module ใหม่ที่ด้านล่างของเคอร์เซอร์ Text Module

เพิ่มแท็กสไตล์และสคริปต์

เพิ่มแท็กสไตล์และสคริปต์ลงในโมดูลโค้ดของคุณ

เพิ่มโค้ด CSS

แทรกโค้ด CSS ต่อไปนี้ระหว่างแท็กสไตล์:

.hide-cursor {
cursor: none;
}

.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;

visibility: hidden;
opacity: 0;
}

.show-cursor {
visibility: visible !important;
opacity: 1;
}

เพิ่มรหัส JQuery

และใช้บรรทัดต่อไปนี้ของรหัส JQuery ระหว่างแท็กสคริปต์:

jQuery(document).ready(function($){

var cursor = $('.cursor');

$('.image-cursor').mousemove(function(e){

cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');

});

$('.image-cursor').mouseleave(function() {

cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');

});

});

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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