วิธีสร้างปุ่มแบบอักษรไอคอนด้วย Divi

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

ไฮไลท์บางส่วนของบทช่วยสอนนี้ได้แก่:

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

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของสิ่งที่จะเกิดขึ้น…

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

สำหรับบทช่วยสอนนี้ ฉันจะใช้สิ่งต่อไปนี้:

• ธีม Divi (ชัด)
• ไอคอนฟอนต์ที่สวยงาม – เมื่อคุณดาวน์โหลดไฟล์ zip จากโพสต์ในบล็อก เราจะลากไฟล์ฟอนต์ eleganticons.ttf เพื่อใช้เป็นฟอนต์แบบกำหนดเองสำหรับโมดูลปุ่มของเรา
• เค้าโครงหน้าแรกของ Bed & Breakfast (ใช้ได้ฟรีจาก Divi Builder)

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

การเพิ่มแบบอักษรไอคอนที่สวยงามให้กับโมดูลปุ่มของคุณ

เพิ่มโมดูลปุ่ม

ในการเริ่มต้น ให้สร้างหน้าใหม่และปรับใช้ตัวสร้างภาพ เลือก “สร้างตั้งแต่เริ่มต้น” จากนั้น เมื่อปรับใช้ตัวสร้างภาพแล้ว ให้เพิ่มแถวคอลัมน์หนึ่งแถวในส่วนนั้น แล้วเพิ่มโมดูลปุ่มลงในแถว

ลากในแบบอักษรไอคอนที่หรูหรา

หากต้องการรับแบบอักษรของไอคอนที่สง่างาม ให้ไปที่โพสต์บล็อกแบบอักษรของไอคอนที่สง่างาม และดาวน์โหลดไฟล์แบบอักษร แยกเนื้อหาไฟล์ zip และค้นหาไฟล์ฟอนต์ไอคอนที่สวยงามโดยไปที่ elegant_font > HTML CSS > ฟอนต์ จากนั้นลากไฟล์ “ElegantIcons.ttf” จากไฟล์คอมพิวเตอร์ของคุณและวางลงในตัวสร้างภาพ

การดำเนินการนี้จะแสดงโมดอลอัปโหลดฟอนต์โดยอัตโนมัติ เพียงคลิกปุ่มอัปโหลดเพื่ออัปโหลดแบบอักษรไปยัง Divi Builder

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

ไปที่การตั้งค่าโมดูลปุ่มและอัปเดตแบบอักษรของปุ่มด้วยแบบอักษรไอคอนที่สวยงามใหม่ที่คุณเพิ่งอัปโหลด จะปรากฏในรายการไอคอนภายใต้ "แบบอักษรที่กำหนดเอง"

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

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

แลกเปลี่ยนไอคอนปุ่มบนโฮเวอร์

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

ขนาดข้อความของปุ่ม: 30px
ไอคอนปุ่ม: ดูภาพหน้าจอ (นี่จะเป็นไอคอนที่จะแทนที่แบบอักษรของไอคอนที่ใช้สำหรับปุ่ม)
สีของไอคอนปุ่ม: #0c71c3 (ควรตรงกับสีที่ใช้สำหรับข้อความของปุ่ม)
ตำแหน่งไอคอนปุ่ม: ซ้าย
สีข้อความของปุ่มโฮเวอร์: rgba(255,255,255,0) (นี่คือความโปร่งใสอย่างสมบูรณ์เพื่อซ่อนแบบอักษรของไอคอนปุ่มเมื่อวางเมาส์เหนือ)
Custom Padding: 1em ซ้าย 1em ขวา (ช่องว่างภายในนี้จะแทนที่ padding เริ่มต้นของปุ่มและป้องกันไม่ให้ขยายเมื่อวางเมาส์เหนือ)

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

margin-left: 0 !important;

ตอนนี้ไอคอนปุ่มของคุณจะถูกแทนที่ด้วยไอคอนโฮเวอร์บนโฮเวอร์

การสร้างปุ่มไอคอนวงกลมที่สมบูรณ์แบบซึ่งปรับขนาดด้วยขนาดตัวอักษรของปุ่ม

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

เคล็ดลับคือการเว้นวรรคปุ่มของคุณโดยใช้หน่วยความยาว "em" หน่วยความยาวนี้สัมพันธ์กับขนาดข้อความของปุ่ม ดังนั้น หากคุณปุ่มขนาดข้อความคือ 30px 1em ก็คือ 30px (2em จะเป็น 60px เป็นต้น…) เมื่อรู้อย่างนี้แล้ว เราแค่ต้องแน่ใจว่าการบุปุ่มรอบๆ ปุ่มของเราจะเหมือนกันทั้ง 4 ด้าน แต่สิ่งที่คุณอาจไม่ได้พิจารณาก็คือความสูงของบรรทัดข้อความของปุ่มคือ 1.7em โดยค่าเริ่มต้น นั่นหมายความว่าเราจำเป็นต้องคำนึงถึงสิ่งนั้นเมื่อเพิ่มค่าการเติมด้านบนและด้านล่างของเรา

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

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

30px ของช่องว่างภายในด้านซ้าย + 30px ของแบบอักษรของไอคอน + 30px ของช่องว่างด้านขวา = ทั้งหมด 90px

ความสูงของบรรทัดข้อความปุ่มคือ 1.7em ซึ่งเทียบเท่ากับ 170% ของขนาดข้อความของปุ่ม (30px) ซึ่งเท่ากับ 51px

สำหรับการเติมด้านบนและด้านล่าง ให้ตั้งค่าทั้งคู่เป็น 0.65em 0.65em เท่ากับ 65% ของขนาดข้อความของปุ่ม (30px) ซึ่งเท่ากับ 19.5px

ดังนั้น…

19.5px ของช่องว่างภายในด้านบน + 51px ของความสูงของบรรทัด + 19.5px ของช่องว่างภายในด้านล่าง = ทั้งหมด 90px

ซึ่งหมายความว่าเมื่อตั้งค่าข้อความปุ่มเป็น 30px ขนาดปุ่มทั้งหมดจะเท่ากับ 90px คูณ 90px (สี่เหลี่ยมจัตุรัสที่สมบูรณ์แบบ) อันที่จริงคุณสามารถคิดได้ด้วยวิธีนี้ สิ่งที่คุณกำหนดเป็นขนาดข้อความของปุ่ม ขนาดรวมของปุ่มจะเป็น 3 เท่าของค่านั้น ดังนั้น ข้อความปุ่ม 40px จะสร้างปุ่มที่มีขนาด 120px คูณ 120px เป็นต้น

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

นี่คือสิ่งที่คุณต้องเปลี่ยนปุ่มของคุณให้เป็นปุ่มวงกลม:

รัศมีเส้นขอบของปุ่ม: 50%
ช่องว่างภายในที่กำหนดเอง: 0.65em ด้านบน, 0.65em ด้านล่าง, 1em ขวา, 1em ซ้าย

อย่าลืมว่าคุณสามารถปรับขนาดข้อความของปุ่มได้ และปุ่มจะยังคงวงกลมอย่างสมบูรณ์เมื่อขยายขนาดช่องว่างภายในตามขนาดของข้อความ

การเพิ่มปุ่มไอคอนให้กับเค้าโครง Divi ของคุณ

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

สำหรับตัวอย่างนี้ ฉันจะแสดงวิธีเพิ่มปุ่มไอคอนเดียวให้กับเค้าโครงหน้าแรกของ Bed & Breakfast

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

การเพิ่มปุ่มไอคอนให้กับรูปภาพ

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

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

จากนั้นเปิดการตั้งค่าปุ่มและใส่ตัวพิมพ์ใหญ่ "P" ลงในช่องข้อความของปุ่ม สิ่งนี้จะเปลี่ยนเป็นไอคอนของเราเมื่อคุณเลือกฟอนต์ Elegant เป็นฟอนต์ปุ่ม

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

ตอนนี้ให้คลิกขวาที่โมดูลปุ่มที่คุณเพิ่มไว้ใต้ภาพและเลือก "วางลักษณะปุ่ม"

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

แบบอักษรของปุ่ม: แบบอักษรที่หรูหรา
ความกว้างของขอบปุ่ม: 0px
แสดงไอคอนปุ่ม: NO

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

ช่องว่างภายในที่กำหนดเอง: 0.65em ด้านบน, 0.65em ด้านล่าง, 1em ซ้าย, 1em ขวา

ในการวางตำแหน่งปุ่มเพื่อให้ซ้อนทับมุมล่างขวาของรูปภาพ ก่อนอื่นคุณต้องกำจัดระยะขอบด้านล่างของโมดูลรูปภาพด้านบน เปิดการตั้งค่าโมดูลรูปภาพของรูปภาพโดยตรงเหนือปุ่ม และตั้งค่าระยะขอบด้านล่างเป็น 0px

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

ระยะขอบที่กำหนดเอง: -60px ด้านบน

จากนั้นเราสามารถจัดตำแหน่งปุ่มของเราให้อยู่ด้านขวาโดยปรับการจัดตำแหน่งปุ่มไปทางขวา

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

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

ในป๊อปอัปขยายลักษณะ เลือก "ส่วนนี้" สำหรับตัวเลือกตลอด และคลิกปุ่มขยาย ตอนนี้รูปภาพทั้งหมดมีระยะขอบด้านล่างเป็น 0px

ขั้นตอนสุดท้ายคือการคัดลอกและวางโมดูลปุ่มใต้รูปภาพแต่ละรูป

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

และเนื่องจากเราใช้เทคนิคการเว้นวรรคอย่างเหมาะสม ปุ่มจึงจะคงอยู่กับที่บนมือถือเช่นกัน...

ไอคอนที่พร้อมใช้งานโดยใช้โมดูลปุ่ม

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

นี่คือภาพหน้าจอของตัวละครที่มีไอคอนแบบอักษรที่เกี่ยวข้อง:

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

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

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

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

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

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

ไชโย!