การอัปเดต Beaver Builder ล่าสุดมีฟีเจอร์อันทรงพลังที่ฉันตื่นเต้นมากที่จะสาธิตให้คุณวันนี้ นอกจาก Font Awesome, Foundation Icons ของ Zurb และ Dashicons ของ WordPress แล้ว ตอนนี้คุณสามารถสร้างแบบอักษรไอคอนของคุณเองด้วย Icomoon หรือ Fontello แล้วอัปโหลดเพื่อใช้โดยตรงภายในอินเทอร์เฟซ Beaver Builder ไม่ต้องเขียนโค้ด!

การสร้างแบบอักษรที่กำหนดเอง

ในการสาธิตนี้ ฉันจะใช้แอป Icomoon แต่ขั้นตอนควรจะคล้ายกันหากคุณเลือกใช้ Fontello ในการเริ่มต้น ให้ไปที่ไซต์ Icomoon และคลิกปุ่ม แอป Icomoon ขนาดใหญ่ที่มุมขวาบน

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

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

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

การตั้งค่าคำนำหน้าคลาสคือสิ่งที่ช่วยระบุไอคอนของคุณบนเพจเมื่อเพิ่มลงในโครงร่าง Beaver Builder หากปล่อยไว้ไม่เปลี่ยนแปลง แบบอักษรของไอคอนหลายแบบที่ใช้คำนำหน้า ไอคอน จะขัดแย้งกัน ทำให้บางส่วนแสดงไม่ถูกต้องในตัวเลือกไอคอนของ Beaver Builder คุณสามารถเปลี่ยนการตั้งค่านั้นเป็นสิ่งใดก็ได้ที่คุณต้องการ เช่น my-icon1- หรือ my-icon2- แต่สิ่งที่สำคัญที่สุดคือมีการเปลี่ยนแปลง

คุณอาจต้องการเปลี่ยนการตั้ง ค่าชื่อแบบอักษร เพื่อให้ระบุแบบอักษรไอคอนที่กำหนดเองของคุณได้อย่างง่ายดายภายในตัวเลือกไอคอนของ Beaver Builder (ต้องเลือกชื่อที่กำหนดเองสำหรับ Fontello) เมื่อคุณปรับแต่งการตั้งค่าเสร็จแล้ว ให้คลิกปุ่ม ดาวน์โหลด ที่มุมขวาล่างและเตรียมพร้อมที่จะอัปโหลดแบบอักษรไอคอนใหม่ของคุณไปยัง Beaver Builder!

การอัปโหลดแบบอักษรไอคอนของคุณไปยัง Beaver Builder

หากต้องการอัปโหลดแบบอักษรไอคอนที่กำหนดเองไปยัง Beaver Builder ให้เข้าสู่ระบบไซต์ WordPress ของคุณและไปที่การตั้งค่า > ตัวสร้างเพจ > ไอคอน จากนั้นคลิกปุ่ม อัปโหลดชุดไอคอน และอัปโหลดไฟล์ zip ที่คุณดาวน์โหลดจาก Icomoon โดยใช้โปรแกรมอัปโหลดสื่อ WordPress ดั้งเดิม หลังจากนั้น เลือกไฟล์ zip ที่อัปโหลดแล้วคลิกปุ่ม เลือกไฟล์ เพื่อเพิ่มแบบอักษรไอคอนที่กำหนดเองของคุณให้กับ Beaver Builder หน้าจะรีเฟรชและแบบอักษรไอคอนที่กำหนดเองของคุณจะปรากฏในรายการแบบอักษรไอคอน Beaver Builder ที่พร้อมใช้งานซึ่งคล้ายกับภาพด้านล่าง

การจัดการแบบอักษรของไอคอนที่มีอยู่

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

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

ด้วยพลังอันยิ่งใหญ่ มาพร้อมกับความรับผิดชอบอันยิ่งใหญ่

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

สมมติว่าคุณได้เพิ่มไอคอนจาก Font Awesome และ Foundation ในหน้าเดียวกัน ในการแสดงไอคอนเหล่านั้น Beaver Builder จะต้องโหลดสไตล์ชีทและไฟล์ฟอนต์สำหรับทั้ง Font Awesome และ Foundation เพื่อเพิ่มเวลาในการโหลดให้กับเพจของคุณ แทนที่จะใช้แบบอักษรไอคอนหลายแบบในหน้าเดียวกัน พยายามอย่างดีที่สุดเพื่อให้เป็นแบบอักษรเดียวหรือดีกว่านั้น เพื่อผลลัพธ์ที่ดีที่สุด ให้สร้างแบบอักษรไอคอนของคุณเองด้วยเฉพาะไอคอนที่คุณต้องการและใช้แบบอักษรนั้นแทน!

มีความสุข!

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

เครดิตรูปภาพ: โทมัส เอส.