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

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

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

การสำรวจ

นี่คือตัวอย่างของสิ่งที่กำลังจะมา ...

ปุ่มแบบอักษรของไอคอน

เปลี่ยนขนาดของปุ่ม divi image.gif

ปุ่มการสาธิต divi list delements.png

คุณต้องการอะไร?

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

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

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

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

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

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

เพิ่มปุ่ม divi builder.jpg

ลากแบบอักษรไอคอนที่มีสไตล์

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

แยกไฟล์ zip divi.jpg

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

วาง divi.jpg ออนไลน์

ตอนนี้คุณจะสามารถเข้าถึงแบบอักษรไอคอนที่มีสไตล์เมื่อปรับแต่งฟอนต์ mod ในตัวสร้างภาพ

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

ปุ่ม font divi.jpg

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

การใช้ icon button.jpg

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

ปุ่มไอคอน divi 5.jpg

ไอคอนปุ่มแลกเปลี่ยนเมื่อวางเมาส์เหนือ

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

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

ปุ่มปรับแต่ง divi.jpg

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

margin-left0 !important;

เพิ่มขอบปุ่ม diiv.png

ตอนนี้ไอคอนปุ่มของคุณจะถูกแทนที่ด้วยไอคอนวางเมาส์เหนือ

ปุ่มสาธิตถูกแทนที่ที่ hover.gif

ปุ่มไอคอนสร้างสรรค์ที่มีการปรับขนาดวงกลมพร้อมขนาดข้อความของปุ่ม

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

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

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

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

ช่องว่างด้านซ้าย 30px + 30px สำหรับ font-icon + ช่องว่างด้านขวาของ 30px = ผลรวม 90px

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

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

ดังนั้น ...

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

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

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

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

ปุ่มรัศมีขอบ: 50%
เบาะรองนั่ง: 0.65em Top, 0.65em Bottom, 1em Straight, 1em ด้านซ้าย

แก้ไขปุ่ม button.png

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

กำหนดขนาดของ button.gif

การเพิ่มปุ่มบน Divi

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

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

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

เลือกเค้าโครง divi.png

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

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

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

divi.png

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

divi.png ข้อความปุ่ม

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

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

วางโมดูล style.jpg

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

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

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

แพ็ดดิ้งที่กำหนดเอง: 0.65em Top, 0.65em Bottom, 1em ซ้าย, 1em ขวา

ปุ่มแบบอักษรของไอคอน

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

การปรับแต่งปุ่ม button.png

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

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

Custom Margin: -60px ด้านบน

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

เปลี่ยนการจัดตำแหน่งของปุ่ม divi.png

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

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

ขยายรูปภาพ style.jpg

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

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

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

ปุ่มออกแบบขั้นสุดท้าย divi.png

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

ปุ่มแสดงตัวอย่างบน mobile.png

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

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

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

รายการไอคอนที่มี divi.png

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

คิดสุดท้าย

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

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