ปุ่มที่มีฟอนต์สัญลักษณ์มีประโยชน์มากมายในโลกการออกแบบเว็บ เนื่องจากฟอนต์ที่เป็นสัญลักษณ์ยังคงมีสีสันและการออกแบบที่คมชัดเมื่อปรับขนาดเป็นขนาดต่างๆจึงควรใช้ในปุ่มต่างๆ และการสร้างปุ่มที่มีฟอนต์สัญลักษณ์บน Divi นั้นค่อนข้างง่ายโดยใช้ฟอนต์จากไลบรารี " ElegantIcons". ในบทช่วยสอนนี้ฉันจะแสดงให้คุณเห็นว่าคุณสามารถใช้แบบอักษรไอคอนกับโมดูลปุ่ม Divi เพื่อสร้างปุ่มไอคอนเดียวได้อย่างไร
ไฮไลต์บางส่วนของบทแนะนำนี้ ได้แก่ :
- ความคิดเห็น utiliser ElegantIcons เพื่อเพิ่มไอคอนเป็นข้อความปุ่ม
- วิธีเพิ่มช่องว่างภายในและรัศมีขอบเพื่อให้ปุ่มมีลักษณะเป็นสี่เหลี่ยมจัตุรัสหรือวงกลมที่สมบูรณ์แบบ
- วิธีแทนที่ไอคอนปุ่มด้วยไอคอนอื่นเมื่อวางเมาส์เหนือ
- วิธีวางตำแหน่งไอคอนปุ่มเพื่อวางซ้อนภาพ
- และอื่น ๆ ...
การสำรวจ
นี่คือตัวอย่างของสิ่งที่กำลังจะมา ...
คุณต้องการอะไร?
สำหรับบทช่วยสอนนี้ฉันจะใช้สิ่งต่อไปนี้:
- ธีม Divi (อย่างชัดเจน)
- ไอคอนตัวอักษรที่ทันสมัยสอนเกี่ยวกับ ธีมที่สง่างาม แม่นยำกว่ามาก เมื่อคุณดาวน์โหลดไฟล์ zip จากบล็อกโพสต์แล้วเราจะลากลงในไฟล์ฟอนต์ eleganticons.ttf เพื่อใช้เป็นฟอนต์ที่กำหนดเองสำหรับโมดูลปุ่มของเรา
- หน้าแรกของ Bed & Breakfast (พร้อมใช้งานฟรีจากเครื่องมือสร้าง Divi)
เริ่มกันเลย!
เพิ่มแบบอักษรไอคอนที่สง่างามให้กับโมดูลปุ่มของคุณ
เพิ่มโมดูลปุ่ม
ในการเริ่มต้นให้สร้างเพจใหม่และปรับใช้ตัวสร้างภาพ เลือก "Build from Scratch" จากนั้นหลังจากปรับใช้ตัวสร้างภาพแล้วให้เพิ่มแถวคอลัมน์ในส่วนจากนั้นเพิ่มโมดูลปุ่มลงในแถว
ลากแบบอักษรไอคอนที่มีสไตล์
เพื่อให้ได้เกมสี ElegantFontsคุณสามารถดาวน์โหลด ชุดตัวอักษรนี้ผ่านทางลิงค์นี้. สกัดมัน เนื้อหา จากไฟล์ zip และค้นหาไฟล์ฟอนต์ไอคอนหรูหราโดยไปที่ Elegant_font > HTML CSS > class จากนั้นลากไฟล์ “ElegantIcons.ttf” ไปยังคอมพิวเตอร์ของคุณและวางลงในเครื่องมือสร้างภาพ
สิ่งนี้จะแสดงโมดอลดาวน์โหลดฟอนต์อัตโนมัติ เพียงคลิกที่ปุ่มดาวน์โหลดเพื่อดาวน์โหลดแบบอักษรไปยัง Divi Builder
ตอนนี้คุณจะสามารถเข้าถึงแบบอักษรไอคอนที่มีสไตล์เมื่อปรับแต่งฟอนต์ mod ในตัวสร้างภาพ
ไปที่การตั้งค่าโมดูลปุ่มและอัปเดตแบบอักษรของปุ่มด้วยแบบอักษร Elegant Icon ใหม่ที่คุณเพิ่งดาวน์โหลด จะปรากฏในรายการไอคอนใต้“ แบบอักษรที่กำหนดเอง”
คุณอาจสังเกตเห็นว่าข้อความปุ่มของคุณถูกเปลี่ยนเป็นไอคอนมากมาย แท้จริงแล้วอักขระแต่ละตัวที่ป้อนในพื้นที่ป้อนข้อความของปุ่มตอนนี้มีไอคอนที่ตรงกับตัวอักษร / อักขระที่ใช้ในปัจจุบัน
เนื่องจากเราต้องการเพียงไอคอนเดียวสำหรับปุ่มของเราคุณสามารถเลือกอักขระใดก็ได้บนแป้นพิมพ์เพื่อสร้างไอคอนที่เกี่ยวข้องกับอักขระนั้น ตัวอย่างเช่นป้อนตัวเลข 5 สำหรับข้อความบนปุ่มเพื่อให้ได้ลูกศรที่ถูกต้อง
ไอคอนปุ่มแลกเปลี่ยนเมื่อวางเมาส์เหนือ
ดังที่คุณทราบโมดูลปุ่มมีตัวเลือกในการเพิ่มไอคอนเมื่อวางเมาส์เหนือ เราสามารถใช้คุณสมบัตินี้เพื่อแทนที่ฟอนต์ไอคอนด้วยไอคอนโฮเวอร์เพื่อเอฟเฟกต์โฮเวอร์ที่ดี สิ่งที่เราต้องทำคือเปลี่ยนการตั้งค่าปุ่มดังนี้:
ขนาดข้อความของปุ่ม: 30px ไอคอนปุ่ม: ดูภาพหน้าจอ (จะเป็นไอคอนที่จะแทนที่ไอคอนแบบอักษรที่ใช้สำหรับปุ่ม) ไอคอนสีของปุ่ม: # 0c71c3 (ซึ่งควรตรงกับสีที่ใช้สำหรับข้อความปุ่ม ) ตำแหน่งไอคอนปุ่ม: สีของข้อความเลื่อนปุ่มซ้าย: rgba (255,255,255,0) (ซึ่งโปร่งใสอย่างสมบูรณ์เพื่อซ่อนแบบอักษรของไอคอนปุ่มเลื่อน) การเติมแบบกำหนดเอง: ซ้ายที่ 1, ขวาที่ 1 (การเติมนี้จะแทนที่การขยายขณะที่วางเมาส์เหนือ)
ตอนนี้สิ่งที่เราต้องทำคือแทนที่ระยะขอบสำหรับองค์ประกอบด้านหน้าใน css ที่กำหนดเอง ไปที่แท็บขั้นสูงและป้อนรหัส CSS ต่อไปนี้ในช่องด้านหน้า:
margin-left : 0 !important ; |
ตอนนี้ไอคอนปุ่มของคุณจะถูกแทนที่ด้วยไอคอนวางเมาส์เหนือ
ปุ่มไอคอนสร้างสรรค์ที่มีการปรับขนาดวงกลมพร้อมขนาดข้อความของปุ่ม
ปุ่มรูปวงกลมใช้งานได้ดีสำหรับปุ่มไอคอนเดียว และหากคุณเข้าใจการทำงานภายในของการเว้นระยะห่างโมดูลปุ่มคุณสามารถสร้างปุ่มวงกลมที่สมบูรณ์แบบที่ปรับขนาดตามขนาดของข้อความปุ่มได้
เคล็ดลับคือเว้นระยะห่างของปุ่มโดยใช้หน่วยความยาว "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 ด้านซ้าย
โปรดจำไว้ว่าคุณสามารถปรับขนาดข้อความของปุ่มได้และปุ่มจะอยู่ในวงกลมอย่างสมบูรณ์แบบเช่นการเติมขนาดข้อความ
การเพิ่มปุ่มบน Divi
Divi ทำให้ง่ายต่อการเพิ่มและปรับแต่งปุ่มไอคอนที่ไม่ซ้ำใครเพื่อให้เหมาะกับการออกแบบเค้าโครงที่กำหนดไว้ล่วงหน้า
สำหรับตัวอย่างนี้ฉันจะแสดงวิธีเพิ่มปุ่มไอคอนเดียวในเค้าโครงหน้าแรกของ Bed & Breakfast
ในการเพิ่มเค้าโครงให้กับเพจของคุณให้เปิดเมนูการตั้งค่าโดยคลิกที่ไอคอนสีม่วงที่ด้านล่างของหน้า (ตรวจสอบให้แน่ใจว่าตัวสร้างภาพถูกเปิดใช้งาน) จากนั้นคลิกที่ไอคอนโหลดจากไลบรารี เลือกเค้าโครงของโฮมเพจ Bed & Breakfast และคลิกปุ่ม "Use this layout" เพื่อปรับใช้เลย์เอาต์บนเพจ
การเพิ่มปุ่มไอคอนให้กับรูปภาพ
สมมติว่าคุณต้องการเพิ่มปุ่มไอคอนขนาดเล็กเพื่อวางซ้อนมุมของรูปภาพด้วย CTA เพิ่มเติมที่เกี่ยวข้องกับผลิตภัณฑ์หรือบริการหนึ่ง ๆ สิ่งที่คุณต้องทำคือเพิ่มโมดูลปุ่มด้านล่างรูปภาพและปรับแต่งให้มีแบบอักษรของไอคอนและวางซ้อนทับรูปภาพด้วยระยะห่างที่กำหนดเอง
มองหาส่วน "เกี่ยวกับเรา" ในหน้าแรก จากนั้นเพิ่มโมดูลปุ่มด้านล่างภาพใดภาพหนึ่งที่ใช้ในการนำเสนอ "ห้องคู่" (อันแรกในคอลัมน์แรกของแถวสามคอลัมน์)
จากนั้นเปิดการตั้งค่าปุ่มและใส่ตัวพิมพ์ใหญ่ "P" ในกล่องข้อความของปุ่ม สิ่งนี้จะเปลี่ยนไปในไอคอนของเราเมื่อคุณเลือกชุดพื้นหลังที่ยอดเยี่ยมเช่นแบบอักษรของปุ่ม
หากต้องการเริ่มจับคู่การออกแบบปุ่มกับเค้าโครงอย่างรวดเร็วให้บันทึกการตั้งค่าปุ่มของคุณและค้นหาปุ่ม "จองเลย" ที่ด้านบนของเค้าโครง เปิดการตั้งค่าปุ่มและรูปแบบปุ่มคัดลอกโดยคลิกขวาที่ปุ่มตัวเลือกสลับชื่อและเลือกตัวเลือก“ ลักษณะปุ่มคัดลอก” จากรายการ
ตอนนี้คลิกขวาที่โมดูลที่คุณเพิ่มด้านล่างของภาพและเลือก "วางสไตล์ปุ่ม"
จากนั้นอัพเดตการตั้งค่าปุ่มดังต่อไปนี้:
ปุ่มอักษร: ตัวอักษรที่น่าสนใจ
ปุ่มแบบอักษรความกว้างของเส้นขอบ: 0px
แสดงไอคอนปุ่ม: NO
จากนั้นเพิ่มช่องว่างที่กำหนดเองที่ชาญฉลาดของเราเพื่อให้ปุ่มเป็นรูปสี่เหลี่ยมจัตุรัสที่สมบูรณ์แบบ:
แพ็ดดิ้งที่กำหนดเอง: 0.65em Top, 0.65em Bottom, 1em ซ้าย, 1em ขวา
ในการจัดตำแหน่งปุ่มให้ครอบคลุมมุมขวาล่างของรูปภาพก่อนอื่นคุณต้องลบขอบด้านล่างออกจากโมดูลรูปภาพด้านบน เปิดการตั้งค่าโมดูลรูปภาพเหนือปุ่มโดยตรงและตั้งค่าขอบล่างเป็น 0px
ตอนนี้เราต้องลากปุ่มบนรูปภาพโดยใช้ค่าขอบลบที่กำหนดเองเท่ากับความสูงของปุ่ม ในการทำเช่นนี้เราต้องกำหนดความสูงของปุ่มของเรา
ดังที่ได้กล่าวไว้ก่อนหน้านี้ในบทความนี้ด้วยการเติมที่กำหนดเองเราสามารถทราบขนาดที่แน่นอนของปุ่มของเราตามขนาดปัจจุบันของข้อความปุ่ม เนื่องจากขนาดข้อความของปุ่มคือ 20px เราจึงทราบว่าความสูงของปุ่มคือ 3em (3 เท่าของขนาดข้อความของปุ่ม) ซึ่งเป็น 60px ดังนั้นเราจำเป็นต้องตั้งค่าระยะขอบที่กำหนดเองสำหรับปุ่มของเราดังนี้:
Custom Margin: -60px ด้านบน
จากนั้นเราสามารถวางตำแหน่งปุ่มด้านขวาโดยปรับการจัดตำแหน่งของปุ่มทางด้านขวา
ตอนนี้เรามีการออกแบบที่ใช้งานได้สำหรับรูปภาพและปุ่มของเราแล้ว สิ่งที่เราต้องทำคือเพิ่มปุ่มเดียวกันให้กับรูปภาพทั้งหมดในส่วน
เนื่องจากเราได้ลบขอบด้านล่างของรูปภาพออกไปเราจึงสามารถใช้การเปลี่ยนแปลงนี้กับรูปภาพทั้งหมดในส่วนนี้ได้อย่างง่ายดายโดยใช้ตัวเลือกขยายสไตล์ คลิกขวาที่รูปภาพแล้วเลือก "ขยายสไตล์รูปภาพ"
ในกล่องโต้ตอบขยายสไตล์ให้เลือก“ ส่วนนี้” สำหรับตัวเลือกข้ามแล้วคลิกปุ่มขยาย ตอนนี้ภาพทั้งหมดมีขอบล่างของ 0px
ขั้นตอนสุดท้ายคือการคัดลอกและวางโมดูลปุ่มใต้ภาพแต่ละภาพ
นี่คือการออกแบบขั้นสุดท้าย
และเนื่องจากเราใช้เทคนิคการเว้นวรรคที่เหมาะสมปุ่มจะยังคงอยู่ในมือถือ ...
ไอคอนที่ใช้ได้โดยใช้โมดูลปุ่ม
เนื่องจากข้อความของปุ่มโมดูลปุ่มถูก จำกัด ไว้เฉพาะอักขระที่มีอยู่บนแป้นพิมพ์คุณจะต้องสำรวจปุ่มเหล่านี้เพื่อค้นหาไอคอนที่มีอยู่ซึ่งเชื่อมโยงกับแต่ละปุ่ม วิธีง่ายๆในการทำเช่นนี้คือสร้างโมดูลปุ่มโดยตั้งค่าแบบอักษรของปุ่มเป็นแบบอักษรที่หรูหราและพิมพ์อักขระในกล่องข้อความของปุ่ม
นี่คือภาพหน้าจอของตัวละครที่มีไอคอนแบบอักษรที่เกี่ยวข้อง:
หากคุณพบว่ารายการนี้ค่อนข้างละเอียดคุณสามารถใช้โมดูลข้อความเพื่อสร้างลิงก์ไอคอนโดยใช้รหัส Unic ที่แสดงรายการ ไอซีไอ .
คิดสุดท้าย
การใช้ไอคอนที่หรูหราพร้อมโมดูลปุ่มของ Divi เป็นวิธีที่สะดวกในการสร้างปุ่มที่ไม่ซ้ำใครสำหรับคุณ เว็บไซต์เว็บ. ซึ่งเปิดประตูสู่ความคิดสร้างสรรค์ด้วยการตั้งค่าโมดูลเพื่อปรับแต่งปุ่มของคุณด้วยสไตล์ข้อความที่ไม่ซ้ำใคร เอฟเฟกต์โฮเวอร์ และอีกมากมาย ฉันชอบค่าระยะห่างของปุ่มแบบกำหนดเองเป็นพิเศษซึ่งทำให้มั่นใจได้ว่าปุ่มต่างๆ จะมีรูปทรงสี่เหลี่ยมจัตุรัสหรือวงกลมที่สมบูรณ์แบบ
ปุ่มไอคอนมีการใช้งานมากมาย หวังว่าตัวอย่างการใช้งานที่กล่าวถึงในบทช่วยสอนนี้จะช่วยเพิ่มแรงบันดาลใจให้กับโครงการของคุณเอง