วิธีติดป้ายกำกับภาพพื้นหลังด้วยคำแนะนำเครื่องมือที่มีส่วนร่วมใน Divi

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

ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นถึงวิธีการติดป้ายกำกับภาพพื้นหลังด้วยข้อความแจ้งที่จะทำหน้าที่เป็นคำแนะนำเครื่องมือข้อมูลเกี่ยวกับผลิตภัณฑ์ของคุณ ในการทำเช่นนี้ ฉันจะใช้หน้า Landing ของ Fitness Gym เพื่อติดป้ายกำกับภาพพื้นหลังพร้อมข้อมูลเกี่ยวกับฟิตเนสที่มีคุณภาพ

มาเริ่มกันเลย.

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

สิ่งที่คุณต้องการ

สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• ธีม Divi
• หน้า Landing Page ของ Fitness Gym จาก Fitness Gym Layout Pack (หาได้จาก Divi Builder)
• รูปภาพที่จะใช้สำหรับภาพพื้นหลังของคุณที่มีขนาด 320 x 507 พิกเซลพอดี อย่าลังเลที่จะลากอันนี้ไปไว้บนเดสก์ท็อปของคุณและใช้สำหรับบทช่วยสอนนี้
  

การเตรียมเค้าโครงล่วงหน้า

ในการเริ่มต้น ให้สร้างหน้าใหม่ เพิ่มชื่อ แล้วปรับใช้ Visual Builder จากนั้นเลือก "เลือกเค้าโครงที่สร้างไว้ล่วงหน้า" จากป๊อปอัปโหลดจากไลบรารี เลือกเลย์เอาต์หน้า Landing Page ของฟิตเนสยิม แล้วคลิก "ใช้เลย์เอาต์นี้"

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

ใช้ตัวแก้ไขแบบอินไลน์เพื่อเปลี่ยนข้อความชื่อในคอลัมน์ด้านขวาเป็น "Smart Fitness"

การเพิ่มภาพพื้นหลังและปรับแต่งการตั้งค่าแถว

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

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

คอลัมน์ 1 ขนาดภาพพื้นหลัง: ขนาดจริง
คอลัมน์ 1 ตำแหน่งภาพพื้นหลัง: กลางซ้าย
คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ

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

ความกว้างที่กำหนดเอง: 700px
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

การตั้งค่าความกว้างเป็น 700px จะทำให้แน่ใจว่าแถวจะไม่เล็กลงในขนาดหน้าจอที่เล็กกว่าก่อนเบรกพอยต์ของแท็บเล็ต

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

height: 507px;

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

การเพิ่ม Tooltip Labels บนภาพพื้นหลังโดยใช้ Blurbs

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

ชื่อเรื่อง “โฟกัส”
เนื้อหา: “กุญแจสู่ความสำเร็จ!”
ใช้ไอคอน: ใช่
ไอคอน: ดูภาพหน้าจอ

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

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

สีไอคอน: #edf000
ไอคอนวงกลม: ใช่
วงกลมสี: rgba(0,0,0,0)
แสดงเส้นขอบวงกลม: ใช่
สีเส้นขอบของวงกลม (ค่าเริ่มต้น): rgba(0,0,0,0)
สีเส้นขอบของวงกลม (โฮเวอร์): #edf000
ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
ใช้ขนาดตัวอักษรของไอคอน: ใช่
ขนาดตัวอักษรของไอคอน: 40px

ปรับการตั้งค่าการออกแบบต่อไปดังนี้:

น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
ชื่อข้อความสี (ค่าเริ่มต้น): rgba(0,0,0,0)
สีข้อความของชื่อเรื่อง (ค่าเริ่มต้น): #edf000
สีข้อความเนื้อหา (ค่าเริ่มต้น): rgba(0,0,0,0)
สีข้อความเนื้อหา (ค่าเริ่มต้น): #ffffff

(โปรดสังเกตว่าสีข้อความเริ่มต้นจะโปร่งใสโดยสมบูรณ์เพื่อซ่อนไว้จนกว่าคุณจะวางเมาส์เหนือประกาศ)

ระยะขอบที่กำหนดเอง: บน 15px, ด้านล่าง 0px, ซ้าย 90px
ช่องว่างภายในแบบกำหนดเอง: บน 5px ล่าง 5px ขวา 5px

(ระยะขอบที่กำหนดเองคือวิธีที่คุณวางตำแหน่งไอคอนประกาศในตำแหน่งเฉพาะเหนือรูปภาพ)

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -154px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
สีเงา (ค่าเริ่มต้น): rgba(0,0,0,0)
สีเงา (โฮเวอร์): #1e2441

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

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

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

ระยะขอบที่กำหนดเอง: 0px บน, 0px ล่าง, 15px ซ้าย

หากต้องการสร้างการนำเสนอครั้งที่สาม คุณสามารถทำซ้ำการนำเสนอครั้งที่สองได้

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

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

direction: rtl;

CSS รูปภาพนำเสนอ:

padding-left: 15px;

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

ระยะขอบที่กำหนดเอง: ด้านบน 35px, ด้านล่าง 0px, ด้านซ้าย 0px

นอกจากนี้เรายังต้องปรับเงากล่องให้มาจากด้านซ้ายแทนด้านขวา ดังนี้

ตำแหน่งแนวนอนของกล่องเงา: 150px

ตรวจสอบคำแนะนำเครื่องมือย้อนกลับบนไซต์สด

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

จากนั้นอัปเดตระยะขอบดังนี้:

ระยะขอบที่กำหนดเอง: ด้านบน 0px, ซ้าย 100px

ตอนนี้ตรวจสอบผลลัพธ์สุดท้ายของการออกแบบ!

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

มันตอบสนองหรือไม่

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

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

width: 100%;

ความกว้างที่กำหนดเองของคุณที่ 700px จะยังคงเป็นความกว้างสูงสุดบนเดสก์ท็อป แต่ตอนนี้จะเป็น 100% บนมือถือ

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็นด้านล่าง

ไชโย!