วิธีวางคำแนะนำเครื่องมือโฮเวอร์ที่ใดก็ได้บนเพจของคุณด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงคำแนะนำเครื่องมือโฮเวอร์ฟรี

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

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

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

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

ดาวน์โหลด

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

สร้างหน้าใหม่โดยใช้เค้าโครงหน้าแรกของ Dog Walker

เพิ่มหน้าใหม่

สิ่งแรกที่คุณต้องทำคือสร้างเพจใหม่โดยไปที่ Pages > Add New ดำเนินการต่อโดยตั้งชื่อเพจของคุณ เผยแพร่เพจ และเปลี่ยนไปใช้ Visual Builder

อัปโหลดหน้า Landing Page ของ Dog Walker

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

สร้างการออกแบบคำแนะนำเครื่องมือโฮเวอร์

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

โครงสร้างคอลัมน์ (กำหนดจำนวนคำแนะนำเครื่องมือที่คุณต้องการ)

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

ความกว้างสูงสุดของแถว

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

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

ระยะห่าง

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

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

ล้น

เรายังทำให้แน่ใจว่าการล้นของแถวจะปรากฏในแท็บขั้นสูง

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

เพิ่มโมดูลข้อความคำแนะนำเครื่องมือในคอลัมน์ 1

เพิ่มเนื้อหาลงในกล่องเนื้อหา

เครื่องหมายคำถาม Span

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

คำแนะนำเครื่องมือ Div

ดำเนินการต่อโดยเพิ่ม div ลงในกล่องเนื้อหาด้วยคลาส 'tooltip-content' เพิ่มเนื้อหาคำแนะนำเครื่องมือที่คุณเลือกใน div นี้

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

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

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #ffffff

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

แก้ไขการตั้งค่าข้อความ H3 ด้วย

• แบบอักษรของหัวข้อที่ 3: Amatic SC
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ: 30px

ขนาด

เรากำลังเล่นกับความกว้างและความสูงของโมดูลเพื่อสร้างเอฟเฟกต์โฮเวอร์

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

ระยะห่าง

เพิ่มแผ่นรองด้านบนด้วย

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

การมองเห็นเริ่มต้น

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

โฮเวอร์การมองเห็น

อย่างไรก็ตาม เมื่อวางเมาส์เหนือ เราต้องการให้ทุกอย่างปรากฏขึ้น เราจะทำอย่างนั้นโดยทำให้มองเห็นโอเวอร์โฟลว์ได้เมื่อวางเมาส์ไว้

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

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

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

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

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

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

โคลนโมดูลข้อความคำแนะนำเครื่องมือสองครั้ง & วางในคอลัมน์ที่เหลือ

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

เปลี่ยนเนื้อหาคำแนะนำเครื่องมือ

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาคำแนะนำเครื่องมือของแต่ละรายการที่ซ้ำกัน

เปลี่ยนตำแหน่งคำแนะนำเครื่องมือ (โดยใช้ Transform Translate)

เคล็ดลับเครื่องมือ #1

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

• ขวา: -450px (เดสก์ท็อป), -2000px (แท็บเล็ต), -1900px (โทรศัพท์)

เคล็ดลับเครื่องมือ #2

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

• ขวา: -400px (เดสก์ท็อป), -1300px (แท็บเล็ต), -1250px (โทรศัพท์)

เคล็ดลับเครื่องมือ #3

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

• ขวา: -500px (เดสก์ท็อป), -600px (แท็บเล็ตและโทรศัพท์)

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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