วิธีสร้างเอฟเฟกต์โฮเวอร์ปุ่มติดตามโซเชียลมีเดียที่ไม่ซ้ำใครด้วย Divi

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

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

ตรวจสอบออก!

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของเอฟเฟกต์โฮเวอร์ที่เราจะสร้าง

ส่วนที่ 1: การย้ายเงาของกล่องเพื่อเน้นปุ่มติดตามโซเชียลมีเดียของคุณ

พรมแดนสู่จุด

จุดสู่พรมแดน

เงาสะท้อน 1

เงาสะท้อน2

เริ่มสร้างเอฟเฟกต์โฮเวอร์ตอนที่ 1

ส่วนที่ 2: การเปลี่ยนสี ขนาด และรูปร่างบน Hover

การเปลี่ยนขนาดและสี

การเปลี่ยนขนาด สี และรูปร่าง

เริ่มสร้างเอฟเฟกต์โฮเวอร์ส่วนที่ 2

ส่วนที่ 3: เอฟเฟกต์ฟิลเตอร์

เริ่มสร้างเอฟเฟกต์โฮเวอร์ตอนที่ 3

ส่วนที่ 4: ไอคอนขนาดใหญ่พร้อมการผสมผสานหน้าจอและเอฟเฟกต์ฟิลเตอร์

เริ่มสร้างส่วนที่ 4 เอฟเฟกต์โฮเวอร์

เริ่มต้น

สมัครสมาชิกช่อง Youtube ของเรา

ในการเริ่มใช้งานบทช่วยสอนนี้ สิ่งที่คุณต้องมีจริงๆ คือ Divi Theme ที่ติดตั้งและใช้งานได้ จากนั้นสร้างหน้าใหม่และตั้งชื่อหน้าของคุณ จากนั้นคลิกเพื่อใช้ Divi Builder และเลือกตัวเลือกเพื่อใช้เค้าโครงที่สร้างไว้ล่วงหน้า จากโมดอลป๊อปอัป Load from Library ให้เลือก App Developer Layout Pack จากนั้นคลิกเพื่อใช้ปุ่ม เพื่อเริ่มต้นการออกแบบโซเชียลมีเดียของเรา เราจะใช้เค้าโครงหน้าแรกของนักพัฒนาแอป

เผยแพร่เพจของคุณและคลิกปุ่มเพื่อสร้างบนส่วนหน้า

ตอนนี้ลบทุกส่วนของหน้ายกเว้นส่วนที่มีปุ่มติดตามโซเชียลมีเดียที่ด้านล่างของหน้า

สิ่งนี้จะทำหน้าที่เป็นเทมเพลตเริ่มต้นสำหรับการสร้างเอฟเฟกต์โฮเวอร์ของเรา

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

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

ตอนนี้คุณพร้อมที่จะเริ่มสร้างเอฟเฟกต์โฮเวอร์แล้ว

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

#1 การย้ายเงาของกล่องเพื่อเน้นปุ่มติดตามโซเชียลมีเดียของคุณ

พรมแดนสู่จุด

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

จากนั้นคัดลอกสีพื้นหลังที่ใช้สำหรับไอคอนไปยังคลิปบอร์ดของคุณ (#3b5998) สีนี้จะใช้สำหรับเงาของกล่อง

ตอนนี้เปิดแท็บการออกแบบและอัปเดตสิ่งต่อไปนี้:

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งของกล่องเงา: 0px (ค่าเริ่มต้น), -46px (โฮเวอร์)
ความแรงของกล่องเงาเบลอ: 0px
ความแรงของการกระจายเงาของกล่อง: 5px (ค่าเริ่มต้น), -16px (โฮเวอร์)

สำหรับสีเงา ให้วางสีพื้นหลัง (#3b5998) และลดความทึบลง 50% วิธีนี้จะทำให้คุณได้สีพื้นหลังของปุ่มที่เบากว่า

เงาสี: rgba(59,89,152,0.5)

ตอนนี้ให้คลิกขวาที่ประเภทสไตล์ Box Shadow และเลือก Copy Box Shadow Styles

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

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

ต่อไปนี้คือสีเงาของกล่องสำหรับแต่ละเครือข่ายโซเชียลที่เหลือ:

Twitter Box Shadow Color: rgba(0,172,237,0.5)
สีเงาของกล่อง Instagram: rgba(234,44,89,0.5)
สีเงากล่องเลี้ยงลูก: rgba(234,76,141,0.5)
Youtube กล่องเงาสี: rgba(168,36,0,0.5)

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

จุดสู่พรมแดน

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

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

ตำแหน่งแนวตั้งของกล่องเงา: -46px (ค่าเริ่มต้น), 0px (โฮเวอร์)
ความแรงของการกระจายเงาของกล่อง: -16px (ค่าเริ่มต้น), 5px (โฮเวอร์)

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

เมื่อเสร็จแล้ว การออกแบบขั้นสุดท้ายของคุณจะมีลักษณะดังนี้

เอฟเฟกต์เงาสะท้อน

สำหรับเวอร์ชันถัดไปของการออกแบบและเอฟเฟกต์โฮเวอร์ เราจะให้เงากล่อง (จุด) ของแต่ละปุ่มเริ่มต้นในตำแหน่งเดียวกันโดยค่าเริ่มต้น สิ่งนี้จะสร้างเอฟเฟกต์การตีกลับ

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

ตำแหน่งแนวนอนของกล่องเงา: 140px (ค่าเริ่มต้น), 0px (โฮเวอร์)
ตำแหน่งแนวตั้งของกล่องเงา: -70px (ค่าเริ่มต้น), 0px (โฮเวอร์)

สำหรับเครือข่ายโซเชียล Twitter ให้อัปเดตสิ่งต่อไปนี้:

ตำแหน่งแนวนอนของกล่องเงา: 70px (ค่าเริ่มต้น), 0px (โฮเวอร์)
ตำแหน่งแนวตั้งของกล่องเงา: -70px (ค่าเริ่มต้น), 0px (โฮเวอร์)

สำหรับเครือข่ายโซเชียล Instagram ให้อัปเดตสิ่งต่อไปนี้:

ตำแหน่งแนวนอนของกล่องเงา: 70px (ค่าเริ่มต้น), 0px (โฮเวอร์)
ตำแหน่งแนวตั้งของกล่องเงา: -70px (ค่าเริ่มต้น), 0px (โฮเวอร์)

สำหรับเครือข่ายโซเชียล Dribble ให้อัปเดตสิ่งต่อไปนี้:

ตำแหน่งแนวนอนของกล่องเงา: -70px (ค่าเริ่มต้น), 0px (โฮเวอร์)
ตำแหน่งแนวตั้งของกล่องเงา: -70px (ค่าเริ่มต้น), 0px (โฮเวอร์)

สำหรับเครือข่ายโซเชียล Youtube ให้อัปเดตสิ่งต่อไปนี้:

ตำแหน่งแนวนอนของกล่องเงา: -140px (ค่าเริ่มต้น), 0px (โฮเวอร์)
ตำแหน่งแนวตั้งของกล่องเงา: -70px (ค่าเริ่มต้น), 0px (โฮเวอร์)

ตรวจสอบผลลัพธ์สุดท้าย

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

#2 การเปลี่ยนสี ขนาด และรูปร่างบน Hover

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

เปลี่ยนสี

การเปลี่ยนสีของปุ่มโซเชียลมีเดียบนโฮเวอร์นั้นค่อนข้างตรงไปตรงมา สำหรับตัวอย่างนี้ เรามาเริ่มด้วยสีพื้นหลังสีเทาเข้มตามค่าเริ่มต้นที่เปลี่ยนเป็นสีโซเชียลเน็ตเวิร์ก

ในการดำเนินการนี้ ให้เปิดโมดูล Social Media Follow จากนั้นเปิดการตั้งค่าเครือข่าย Facebook อัปเดตสิ่งต่อไปนี้:

สีพื้นหลัง: #333333 (ค่าเริ่มต้น), #3b5998 (โฮเวอร์)

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

สีพื้นหลัง Twitter: #333333 (ค่าเริ่มต้น), #00aced (โฮเวอร์)
สีพื้นหลัง Instagram: #333333 (ค่าเริ่มต้น), #ea2c59 (โฮเวอร์)
สีพื้นหลังเลี้ยงลูก: #333333 (ค่าเริ่มต้น), #ea4c8d (โฮเวอร์)
สีพื้นหลัง Youtube: #333333 (ค่าเริ่มต้น), a82400 (โฮเวอร์)

นี่คือผลลัพธ์

การเปลี่ยนขนาด

ในการเปลี่ยนขนาดของปุ่ม เราสามารถเพิ่มเงากล่องบนโฮเวอร์ได้ ซึ่งช่วยให้ปุ่มขยายใหญ่ขึ้นโดยไม่ต้องเพิ่มพื้นที่จริงใดๆ ให้กับปุ่มที่จะผลักปุ่มที่อยู่ติดกันออกไปเมื่อวางเมาส์ไว้

ในการดำเนินการนี้ ให้เปิดการตั้งค่าเครือข่าย Facebook และเพิ่มสไตล์เงาของกล่องดังต่อไปนี้:

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของกล่องเงาเบลอ: 0px
ความแรงของการกระจายเงาของกล่อง: 0px (ค่าเริ่มต้น), 10px (โฮเวอร์)
Shadow Color: #3b5998 (ควรเป็นสีเดียวกับสีพื้นหลังของปุ่ม)

เพื่อเพิ่มความเร็วในกระบวนการเพิ่มการออกแบบกล่องเงาแบบเดียวกันกับปุ่มโซเชียลเน็ตเวิร์กที่เหลือ ให้คลิกขวาที่หมวดเงาของกล่องของเครือข่าย Facebook แล้วคลิก "บันทึกรูปแบบเงาของกล่อง"

บันทึกการตั้งค่าแล้วคลิกขวาที่แต่ละเครือข่ายสังคมและเลือก "วางรูปแบบรายการ"

ตอนนี้สิ่งที่คุณต้องทำคืออัปเดตสีเงาของกล่องด้วยสีโซเชียลเน็ตเวิร์กที่ถูกต้องซึ่งตรงกับสีพื้นหลังของโฮเวอร์

ให้ทำการอัปเดตดังต่อไปนี้:

สีเงาของกล่องทวิตเตอร์: #00aced
สีเงากล่องอินสตาแกรม: #ea2c59
Dribble Box สีเงา: #ea4c8d
Youtube Box Shadow สี: #a82400

นี่คือผลลัพธ์สุดท้าย

เปลี่ยนรูปร่าง

หากต้องการเปลี่ยนรูปร่างของปุ่มเมื่อวางเมาส์เหนือ สิ่งที่คุณต้องทำคือปรับตัวเลือก "มุมโค้งมน" โมดูลการติดตามโซเชียลมีเดียนี้ในปัจจุบันมีมุมโค้งมนที่ตั้งไว้ที่ 40px ทำให้ปุ่มเป็นวงกลม หากเราต้องการเปลี่ยนเป็นสี่เหลี่ยมจัตุรัส สิ่งที่คุณต้องทำคือปรับมุมโค้งมนเป็น 0px เมื่อวางเมาส์เหนือ

ในการดำเนินการนี้ ให้เปิดการตั้งค่าเครือข่าย Facebook และอัปเดตสิ่งต่อไปนี้:

มุมโค้งมน (โฮเวอร์): 4px ทั้งสี่มุม

จากนั้นคัดลอกสไตล์เส้นขอบและวางลงในแต่ละเครือข่ายที่เหลือ

นี่คือการออกแบบขั้นสุดท้าย

#3 เอฟเฟกต์ฟิลเตอร์

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

เอฟเฟกต์ความอิ่มตัวและกลับด้านฟิลเตอร์บนโฮเวอร์

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

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

ความอิ่มตัว: 0% (ค่าเริ่มต้น), 100% (โฮเวอร์)
กลับด้าน: 100% (ค่าเริ่มต้น), 0% (โฮเวอร์)

ตรวจสอบผลลัพธ์

#4 ไอคอนสีขนาดใหญ่พร้อมการผสมผสานหน้าจอและเอฟเฟกต์ฟิลเตอร์

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

จากนั้นเปิดโซเชียลมีเดียตามการตั้งค่าและลบเครือข่ายโซเชียล Twitter เริ่มต้นเหลือเพียงรายการโซเชียลเน็ตเวิร์ก facebook

จากนั้นอัปเดตโซเชียลมีเดียตามการตั้งค่าดังนี้:

สีพื้นหลัง: #ffffff
การจัดตำแหน่งรายการ: ศูนย์
โหมดผสมผสาน: หน้าจอ

ถัดไป เปิดการตั้งค่ารายการ Facebook Social network และอัปเดตสิ่งต่อไปนี้:

สีพื้นหลัง: #000000
ระยะขอบที่กำหนดเอง: ซ้าย 10px, 10px ขวา
ช่องว่างภายในที่กำหนดเอง: บน 10px, ด้านล่าง 10px, ซ้าย 10px, 10px ขวา
ความอิ่มตัว: 0% (ค่าเริ่มต้น), 100% (โฮเวอร์)
กลับด้าน: 100% (ค่าเริ่มต้น), 0% (โฮเวอร์)

บันทึกการตั้งค่า.

จากนั้นทำซ้ำรายการโซเชียลเน็ตเวิร์ก facebook 4 ครั้งเพื่อให้คุณมีปุ่มโซเชียลเน็ตเวิร์กทั้งหมด 5 ปุ่ม

ตอนนี้เปิดแต่ละรายการโซเชียลเน็ตเวิร์กที่ซ้ำกัน และอัปเดตโซเชียลเน็ตเวิร์กและสีพื้นหลังเป็น #000000

บันทึกการตั้งค่า.

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

ในการดำเนินการนี้ ให้เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

คอลัมน์ 1 สีพื้นหลัง: #0c71c3

สังเกตว่าสีของไอคอนเปลี่ยนไปเป็นสีพื้นหลังนี้อย่างไร

ตอนนี้ตรวจสอบผลลัพธ์จนถึงตอนนี้

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

เปิดโมดูลติดตามโซเชียลมีเดียและเพิ่มรหัส CSS ต่อไปนี้ภายใต้แท็บขั้นสูง

CSS ID: ไอคอนขนาดใหญ่

ถัดไป เปิดการตั้งค่าหน้าของคุณ และเพิ่ม css แบบกำหนดเองต่อไปนี้

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

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

ตรวจสอบผลลัพธ์สุดท้าย

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

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

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

ไชโย!