Divi: วิธีสร้างปุ่มไอคอนด้วยโมดูลไอคอน

คุณต้องการที่จะทราบวิธีการใช้โมดูลไอคอนของ Divi เพื่อสร้างไอคอนที่กำหนดเอง?

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

ในบทช่วยสอนวันนี้เราจะแสดงวิธีออกแบบปุ่มไอคอนด้วย Divi. สร้างปุ่มไอคอนใน Divi ค่อนข้างง่ายและสนุกที่จะทำ 

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

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

ขอเริ่มต้น!

การสำรวจ

ต่อไปนี้คือภาพรวมคร่าวๆ ของปุ่มไอคอนที่เราจะสร้างในบทช่วยสอนนี้

สร้างหน้าใหม่ด้วย Divi Builder

ดูสิ่งนี้ด้วย: Divi: วิธีปรับแต่งตะกร้าและไอคอนค้นหาของโมดูล "เมนูเต็มความกว้าง"

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

สร้างปุ่มไอคอนด้วยโมดูล Divi Icons

ส่วนที่ 1: การสร้างปุ่มไอคอน

ในการเริ่มต้น ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนปกติที่เป็นค่าเริ่มต้น

จากนั้นเพิ่มโมดูลใหม่ ไอคอน ไปที่คอลัมน์

ไอคอน URL ลิงก์และสีพื้นหลัง

ภายใต้แท็บ คอนเทนต์ การตั้งค่าโมดูลไอคอน อัปเดตสิ่งต่อไปนี้:

• ไอคอน: ลูกศรขวา (ดูภาพหน้าจอ)
• URL ลิงก์ไอคอน: # (ตอนนี้เป็นเพียงตัวเติม)
• ความเป็นมา: #3e22ff

รัศมีเส้นขอบและเส้นขอบ

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• มุมโค้งมน: 10px
• ความกว้างของเส้นขอบ: 2px
• สีขอบ: #7272ff

กล่องเงา

• กล่องเงา: ดูภาพหน้าจอ
• เงาสี: rgba(62,34,255,0.48)

จับคู่พื้นที่คลิกได้กับขนาดปุ่มไอคอน

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

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

ในตัวอย่างนี้ ความกว้างทั้งหมดของปุ่มคือ 94 พิกเซล

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

max-width: 94px

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

ส่วนที่ 2: สร้างปุ่มไอคอนสี่เหลี่ยม

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

กำหนดความสูงและความกว้างของไอคอนให้ไอคอนอยู่ตรงกลาง

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

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

นี่คือวิธี

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

ลบช่องว่างภายในออกจากโมดูลไอคอน ไม่จำเป็นเพราะเราจะกำหนดความสูงและความกว้างสำหรับไอคอน

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

height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;

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

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

• ไล่ระดับหยุด:
  • 0%: #3e22ff
  • 100%: #ff2000

• สีเส้นขอบ: #fff

นี่คือผลสุดท้าย

สร้างปุ่มไอคอนวงกลม

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

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

• มุมโค้งมน: 50%

และเช่นเดียวกัน เรามีปุ่มไอคอนวงกลม!

หากต้องการเปลี่ยนการออกแบบเล็กน้อย ให้โมดูลไอคอนเป็นไอคอนและสีพื้นหลังที่แตกต่างกันดังนี้:

• ไอคอน: ดูภาพหน้าจอ
• พื้นหลัง: #121212

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

สร้างไอคอนปุ่มเมนูแนวนอน

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

นี่คือวิธีที่จะทำ

ขั้นแรก เพิ่มแถวใหม่ให้กับคอลัมน์ในหน้า

เปิดการตั้งค่าเส้นและอัปเดตความกว้างของรางน้ำเป็น 1

• ความกว้างของรางน้ำ: 1

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

display:flex;
align-items:center;

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

ภายใต้แท็บ คอนเทนต์ การตั้งค่าไอคอน เลือกไอคอนและเพิ่ม URL ลิงก์ไอคอน

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• ไอคอนสี: #3e22ff
• ขนาดไอคอน: 40px

• ระยะขอบ (ซ้ายและขวา): 10px

• ความกว้างของเส้นขอบ: 2px
• สีเส้นขอบ: #3e22ff

ข้อสังเกต : ระยะขอบจะสร้างช่องว่างระหว่างปุ่มที่อยู่ติดกันเมื่อเราเพิ่มในภายหลัง

ภายใต้แท็บ ระดับสูงให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในฟิลด์ องค์ประกอบไอคอน (อย่างที่เราทำก่อนหน้านี้สำหรับปุ่มไอคอนสี่เหลี่ยม):

display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;

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

หลังจากนั้นเราสามารถย้อนกลับและอัปเดตไอคอนได้ตามต้องการ

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

เพิ่มเอฟเฟกต์โฮเวอร์ไปที่ปุ่มไอคอน

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

การเปลี่ยนสีพื้นหลังและสีไอคอนบนโฮเวอร์

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

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

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

เปลี่ยนไอคอนเมื่อโฮเวอร์

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

ขนาดปุ่มไอคอนบนโฮเวอร์

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

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

• แปลงร่าง Y: 118%
• แปลงร่าง X: 118%

สิ่งนี้จะเพิ่มขนาดของปุ่มไอคอนขึ้น 18% เมื่อผู้ใช้วางเมาส์เหนือปุ่มนั้น

หมุนปุ่มไอคอนบนโฮเวอร์

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

ในการทำให้ไอคอนเป็นวงกลม โดยสมมติว่าปุ่มเป็นรูปสี่เหลี่ยมจัตุรัส เพียงอัปเดตการตั้งค่ามุมโค้งมนเป็น 50% ที่มุมทั้งสี่

จากนั้นอัปเดตตัวเลือกการแปลงเพื่อรวมค่าการหมุนของการแปลงต่อไปนี้ในสถานะโฮเวอร์:

• แปลงหมุน Z: 180deg

มาดูการทำงานของเอฟเฟกต์โฮเวอร์ 4 แบบของเรากัน

ผลสุดท้าย

มาดูผลลัพธ์สุดท้ายของบทช่วยสอนของเรากัน

อ่าน: Divi: วิธีเน้นโมดูล "Blurb" เมื่อวางเมาส์เหนือและเบลอคนอื่น

ต่อไปนี้คือปุ่มไอคอนสามปุ่มของเรา (มาตรฐาน สี่เหลี่ยมจัตุรัส และวงกลม)

และนี่คือเมนูปุ่มไอคอนแนวนอนพร้อมเอฟเฟกต์โฮเวอร์

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

หวังว่าเทคนิคในบทความนี้จะช่วยคุณปลดล็อกความมหัศจรรย์ของการออกแบบปุ่มไอคอนของคุณเอง

หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...