5 การออกแบบโมดูลปุ่ม Divi ที่สร้างสรรค์และวิธีสร้าง

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

มาขุดกันเถอะ!

แอบมอง

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

1. ปุ่มขอบลูกศรซ้าย

2. ปุ่มย้ายเส้น

3. ปุ่มดึงแท็บ

4. ปุ่มโลโก้วงกลม

5. ปุ่มเรืองแสง

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

5 การออกแบบโมดูลปุ่ม Divi & วิธีสร้าง

1. ปุ่มขอบลูกศรซ้าย

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

จากนั้นเปลี่ยนข้อความเนื้อหาเริ่มต้นของปุ่มเป็น "เริ่มต้นใช้งาน" (หรืออะไรก็ได้ที่คุณต้องการจริงๆ)

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

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: #324376
ความกว้างของเส้นขอบ: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.2em
แบบอักษรของปุ่ม: Fira Sans
รูปแบบตัวอักษร: TT (ตัวพิมพ์ใหญ่), U (ขีดเส้นใต้)
ขีดเส้นใต้สี: rgba(255,255,255,0.2)
สไตล์การขีดเส้นใต้: double
ไอคอนปุ่ม: ดูภาพหน้าจอ
ปุ่มไอคอนสี: #ff4751
ตำแหน่งไอคอนปุ่ม: ซ้าย

ช่องว่างภายในที่กำหนดเอง: ซ้าย 40px, 20px ขวา

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: 22px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
Shadow Color: #ff4751

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

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

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

2. ปุ่มย้ายเส้น

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ปุ่มสีข้อความ: #3b7986
• ปุ่มไล่ระดับสีพื้นหลังซ้าย: rgba(255,255,255,0)
• ปุ่มไล่ระดับสีพื้นหลังด้านขวา: #3b7986
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 96%
• ตำแหน่งสุดท้าย: 0%
• ความกว้างของขอบปุ่ม: 10px
• สีเส้นขอบของปุ่ม: rgba(0,0,0,0)
• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 6px
• แบบอักษรของปุ่ม: Exo 2
• น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษร: Tt (ตัวพิมพ์เล็ก)
• ไอคอนปุ่ม: ลูกศรขวา (ดูภาพหน้าจอ)
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: NO
• ช่องว่างภายในที่กำหนดเอง: 0px Bottom
• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวนอนของกล่องเงา: -15px
• Box Shadow ตำแหน่งแนวตั้ง: 15px
• ความแรงของการกระจายเงาของกล่อง: -13px
• สีเงา: #3b7986

คุณอาจต้องตั้งค่าสีพื้นหลังเป็น #ffffff เมื่อโฮเวอร์เช่นกัน เนื่องจากนี่เป็นการตั้งค่าเริ่มต้นสำหรับปุ่ม

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

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

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

จากนั้นคลิกที่แท็บโฮเวอร์และเปลี่ยนค่าเป็น 13px
คุณจะเห็นเอฟเฟกต์โฮเวอร์ที่แสดงตัวอย่างในตัวสร้างภาพ

นี่คือลักษณะของเอฟเฟกต์โฮเวอร์:

3. ปุ่มดึงแท็บ

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

ในการสร้างปุ่ม ขั้นแรก ให้สร้างส่วนใหม่ที่มีแถวหนึ่งคอลัมน์ แล้วเพิ่มโมดูลปุ่มลงในแถว

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

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

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
สีข้อความของปุ่ม: #ffffff
ปุ่มไล่ระดับสีพื้นหลังซ้าย: #7D80DA
ปุ่มไล่ระดับสีพื้นหลังด้านขวา: #8EEDF7
ทิศทางการไล่ระดับสี: 90deg
ความกว้างของขอบปุ่ม: 0px
รัศมีเส้นขอบของปุ่ม: 10px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
แบบอักษรของปุ่ม: Source Sans Pro
น้ำหนักแบบอักษร: ตัวหนา
รูปแบบตัวอักษร: TT
ไอคอนปุ่ม: ดูภาพหน้าจอ
สีไอคอนปุ่ม: #ffffff
ช่องว่างภายในแบบกำหนดเอง: 1em ซ้าย, 2.5em ขวา
กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวนอนของกล่องเงา: -35px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
สีเงา: #7d80da

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

ไปที่แท็บขั้นสูงและป้อน CSS ต่อไปนี้ในกล่องอินพุตหลังจาก:

position: absolute;
right: 5%;

CSS นี้กำหนดเป้าหมายตำแหน่งของไอคอนและให้ตำแหน่งที่แน่นอน 5% จากขอบด้านขวาของปุ่ม

ตรวจสอบการออกแบบเพื่อให้ห่างไกล

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

แพ็ดดิ้งที่กำหนดเอง: 4em ขวา

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

4. ปุ่มโลโก้วงกลม

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

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

จากนั้นเปิดการตั้งค่าการออกแบบปุ่ม ใต้แท็บเนื้อหา ให้เพิ่มคำว่า "ไป" สำหรับข้อความปุ่ม

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

เมื่อคุณเพิ่มภาพพื้นหลังแล้ว ตรวจสอบให้แน่ใจว่าได้ตั้งค่าขนาดภาพพื้นหลังเป็น “ขนาดจริง” เพื่อให้แน่ใจว่ารูปภาพยังคงขนาดเดิม (118px x 118px)

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

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

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

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

สีข้อความของปุ่ม (ค่าเริ่มต้น): rgba(0,0,0,0)
สีข้อความของปุ่ม (โฮเวอร์): #ffffff

(สิ่งนี้จะซ่อนข้อความของปุ่มโดยค่าเริ่มต้นและแสดงเป็นสีขาวเมื่อวางเมาส์เหนือ)

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

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

ความกว้างของขอบปุ่ม: 0px
รัศมีปุ่ม: 50%;

(การตั้งค่ารัศมีของปุ่มเป็น 50% จะเปลี่ยนปุ่มให้เป็นรูปร่างวงกลม เนื่องจากความสูงและความกว้างของปุ่มถูกตั้งค่าเป็น 118px ใน css ที่กำหนดเอง)

แบบอักษรของปุ่ม: Poppins
น้ำหนักแบบอักษร: ตัวหนา
รูปแบบตัวอักษร: TT
แสดงไอคอนปุ่ม: ไม่ (การมีไอคอนปุ่มจะทำให้ข้อความที่อยู่ตรงกลางหายไป)
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

(สิ่งสำคัญคือต้องถอดช่องว่างด้านบนและด้านล่างออกเพื่อให้ความสูงของบรรทัดที่เราตั้งค่าใน css ที่กำหนดเองจะทำให้ข้อความอยู่กึ่งกลางแนวตั้ง)

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

(สิ่งนี้จะแสดงเงากล่องเล็กน้อยรอบๆ วงกลมเมื่อวางเมาส์ไว้สำหรับเอฟเฟกต์หน้าต่างป็อปเอาท์เพิ่มเติม)

นี่คือการออกแบบขั้นสุดท้ายพร้อมเอฟเฟกต์โฮเวอร์

5. ปุ่มเรืองแสง

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

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

ตอนนี้เปิดการตั้งค่าปุ่ม

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

การจัดตำแหน่งปุ่ม: กึ่งกลาง
ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 18px
สีข้อความของปุ่ม: #ffffff

ปุ่มไล่ระดับสีพื้นหลังซ้าย: #00ff8c
ปุ่มไล่ระดับสีพื้นหลังด้านขวา: #15c39a
ประเภทการไล่ระดับสี: เรเดียล
ทิศทางเรเดียล: ศูนย์กลาง
ตำแหน่งสุดท้าย: 75%

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

ความกว้างของขอบปุ่ม: 0px
รัศมีเส้นขอบของปุ่ม: 100px
ระยะห่างระหว่างตัวอักษรของปุ่ม (ค่าเริ่มต้น): 4px
ระยะห่างระหว่างตัวอักษรของปุ่ม (โฮเวอร์): 5px

(การเพิ่มระยะห่างตัวอักษรเมื่อโฮเวอร์จะขยายปุ่มทั้งหมดเล็กน้อยเพื่อให้ได้เอฟเฟกต์ที่ดี)

น้ำหนักแบบอักษร: Ultra Bold
รูปแบบตัวอักษร: I, TT
ไอคอนปุ่ม: ลูกศรขวา (ดูภาพหน้าจอ)
ช่องว่างภายในแบบกำหนดเอง: บน 20px ล่าง 20px ซ้าย 30px ขวา 50px

(คุณต้องมีช่องว่างภายในที่ถูกต้องมากขึ้นสำหรับไอคอนปุ่มลูกศรขวา)

กล่องเงา: ดูภาพหน้าจอ
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของกล่องเงาเบลอ (ค่าเริ่มต้น): 64px
Box Shadow Blur Strength (โฮเวอร์): 100px
ความแรงของการกระจายเงาของกล่อง: -12px
เงาสี: rgba(0,255,140,0.66)

(เงาของกล่องจะเพิ่มเอฟเฟกต์เรืองแสงเมื่อคุณจับคู่สีเงากับสีของปุ่ม การเพิ่มความเบลอเมื่อวางเมาส์ไว้จะขยายการเรืองแสงของปุ่มด้วย)

ตรวจสอบการออกแบบขั้นสุดท้ายด้วยเอฟเฟกต์โฮเวอร์

แรงบันดาลใจปุ่มเพิ่มเติม

หากต้องการเรียนรู้เกี่ยวกับแรงบันดาลใจเกี่ยวกับลักษณะปุ่ม โปรดดูบทความอื่นๆ เหล่านี้:

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

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

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

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

ไชโย!