วิธีเพิ่มเคอร์เซอร์ที่มีสไตล์และกลับด้านในหน้า Divi ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. สร้างหน้าใหม่/เปิดหน้าที่มีอยู่

สร้างหน้าใหม่หรือเปิดหน้าที่มีอยู่

เริ่มต้นด้วยการสร้างหน้าใหม่หรือเปิดหน้าที่มีอยู่

อัปโหลดเค้าโครงที่คุณเลือก

เพื่อเน้นที่สาระสำคัญของบทช่วยสอนนี้ เราจะใช้ Bike Repair Layout Pack แต่อย่าลังเลที่จะใช้เลย์เอาต์อื่นที่คุณเลือก

เพิ่มส่วนใหม่ที่ด้านล่างของหน้า

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

ระยะห่าง

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

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

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

ลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมดด้วย

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

เพิ่มโมดูลข้อความ (เคอร์เซอร์)

เว้นช่องเนื้อหาว่างไว้

ถึงเวลาเพิ่ม Text Module ซึ่งเราจะใช้เป็นเคอร์เซอร์ในภายหลัง! ปล่อยให้กล่องเนื้อหาว่างเปล่า

ขนาด

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

• ความกว้าง:
  • เดสก์ท็อป: 100px
  • แท็บเล็ต: 60px
  • โทรศัพท์: 40px
• ส่วนสูง:
  • เดสก์ท็อป: 100px
  • แท็บเล็ต: 60px
  • โทรศัพท์: 40px

ชายแดน

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

• ทุกมุม: 100%
• ความกว้างของเส้นขอบ: 3px
• สีเส้นขอบ: #ffffff

โหมดผสมผสาน

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

• โหมดผสมผสาน: ความแตกต่าง

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

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

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

ตำแหน่ง

เราจะใช้ตำแหน่งคงที่สำหรับโมดูลเช่นกัน

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

CSS Class

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

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

2. เพิ่มฟังก์ชันการทำงาน

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

ตอนนี้เรามีโมดูลข้อความเคอร์เซอร์แล้ว ก็ถึงเวลาเน้นที่การทำงาน! เพิ่มโมดูลโค้ดด้านล่างโมดูลข้อความเคอร์เซอร์ของส่วนใหม่ของคุณ

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

เราจะรวม CSS และ JQuery Code เข้าด้วยกัน ดังนั้นให้เพิ่มแท็กสไตล์และสคริปต์ลงในโมดูลโค้ดของคุณ

การเปิดรหัส JQuery

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

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

เปลี่ยนตำแหน่งโมดูลข้อความเคอร์เซอร์

เมื่อสร้างรากฐานภายใน Code Module แล้ว เราจะไปทีละขั้นตอน สิ่งแรกที่เราจะทำคือวางโมดูลข้อความที่เราสร้างขึ้นหลังจากเนื้อหาภายในของตัวสร้าง ซึ่งจะทำให้เราใช้เคอร์เซอร์ทั้งหน้าได้

$('.cursor').insertAfter('.et_builder_inner_content');

ลบเคอร์เซอร์เริ่มต้นของเพจ

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

body {
cursor: none;
}

ตั้งค่าโมดูลข้อความเคอร์เซอร์เป็นเคอร์เซอร์

ต่อไป เราจะอนุญาตให้เคอร์เซอร์ติดตามการเคลื่อนไหวของผู้เยี่ยมชมโดยใช้โค้ด JQuery ต่อไปนี้:

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

สลับเอฟเฟกต์เมื่อวางเมาส์เหนือโมดูลโดยเฉพาะ

เพิ่ม เพิ่มคลาส CSS

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

.increase-size {
transform: scale(5);
background-color: white;
}

โมดูลปุ่มทั้งหมด

เราจะสลับคลาส CSS นี้โดยใช้โค้ด JQuery รหัสด้านล่างกำหนดเป้าหมายโมดูลปุ่มทั้งหมดในหน้า Divi ของคุณทีละรายการ

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

โมดูลปุ่มเฉพาะ

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

• CSS Class: ปุ่มเคอร์เซอร์

จากนั้นแทนที่คลาส CSS ในโค้ดที่คุณใช้ในขั้นตอนก่อนหน้า แค่นั้นแหละ!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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