ไฮไลท์ปลั๊กอิน Divi: ไอคอนอัปโหลด Divi

ไอคอนอัปโหลด Divi เป็นปลั๊กอินของบุคคลที่สามสำหรับ Divi ที่ทำให้ง่ายต่อการเพิ่มไอคอนใน Divi Builder ต่างจากปลั๊กอินไอคอนอื่นๆ ที่รวมเฉพาะ Font Awesome และ Material Icons เท่านั้น ปลั๊กอินนี้ให้คุณเพิ่มชุดไอคอนใดก็ได้ที่คุณต้องการ ต้องเป็นประเภทไฟล์ที่เข้ากันได้เท่านั้น และบังเอิญใช้ไฟล์ยอดนิยมห้าประเภท

ปลั๊กอินจะเพิ่มตัวอัปโหลดลงในการติดตั้ง WordPress ซึ่งคุณจะลากและวางไฟล์ไอคอนของคุณ จากนั้นไอคอนจะถูกเพิ่มลงในโมดูล Divi ที่แสดงไอคอน เช่นเดียวกับไอคอน Divi มาตรฐาน ชุดไอคอนใดๆ ที่คุณอัปโหลดสามารถจัดสไตล์ด้วย Divi Builder ในไฮไลต์ปลั๊กอิน Divi นี้ เราจะดูที่ Divi Upload Icons และดูว่าใช้งานง่ายเพียงใด

การติดตั้งและเปิดใช้งานไอคอนอัปโหลด Divi

อัปโหลดและเปิดใช้งานปลั๊กอินตามปกติ จากนั้นไปที่การ ตั้งค่า > ไอคอนอัปโหลด Divi ในเมนูแดชบอร์ดเพื่อป้อนรหัสเปิดใช้งานของคุณ

การอัปโหลดไอคอนด้วยไอคอนอัปโหลด Divi

นอกจากนี้ในหน้าจอการตั้งค่ายังเป็นคุณสมบัติการอัปโหลด ที่นี่ คุณจะอัปโหลดไอคอนของคุณ ไอคอนต้องอยู่ในรูปแบบ .eot, .svg, .ttf, .woff, .woff2 และ .css คุณสามารถดาวน์โหลดไอคอนจากแหล่งใดก็ได้ที่คุณต้องการและใช้กับไอคอนอัปโหลด Divi ตราบใดที่ไอคอนเหล่านั้นอยู่ในรูปแบบเหล่านี้และรวมไฟล์ CSS ไว้ด้วย ในการติดตั้งไอคอน ให้ลากและวางลงในหน้าต่างอัปโหลด คำแนะนำมีให้ในพื้นที่อัปโหลดและมีวิดีโอสั้น ๆ ที่แสดงวิธีใช้งาน

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

ไฟล์ในตัวอย่างนี้ถูกต้อง ฉันได้อัปโหลดประเภทไฟล์ที่รองรับด้วยไฟล์ CSS แล้ว ตอนนี้ฉันมีไอคอนใหม่มากกว่า 2,500 ไอคอน ฉันดาวน์โหลดจาก iconfont, Dripicons, Foundation Icon Fonts และ Map Icons นักพัฒนารักษารายการไอคอนที่ได้รับการทดสอบแล้ว และคุณสามารถใช้กับไอคอนอัปโหลด Divi ได้ แน่นอนว่ายังมีไอคอนอีกมากมายที่คุณสามารถใช้ได้

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

รูปภาพนี้มีไอคอนทั้งหมด 2,500 ไอคอนที่ฉันอัปโหลด ตอนนี้ฉันมีไอคอนให้เลือกมากมาย และแถบสำหรับหน้าต่างมีขนาดเล็กลงมาก คุณสามารถดูไอคอนใน Visual Builder ได้ แต่ไม่มีตัวกรองและเครื่องมือค้นหาใหม่

Divi อัปโหลดไอคอนตัวกรองและค้นหา

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

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

ในตัวอย่างนี้ ฉันได้เลือก ไอคอนแผนที่ ที่ฉันอัปโหลด มีไอคอนเกือบ 200 ไอคอนในตระกูลไอคอนนี้

นี่คือ ไอคอนมูลนิธิ นอกจากนี้ยังมีไอคอนเกือบ 200 รายการ

นี่คือ Icofonts ตระกูลไอคอนนี้เพิ่มมากกว่า 2,000 ไอคอน

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

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

ตัวอย่างไอคอนอัปโหลด Divi

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

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

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

ฉันเปลี่ยนสีเพื่อให้เข้ากับเลย์เอาต์ เช่นเดียวกับรูปภาพดั้งเดิมที่เลย์เอาต์ใช้

สำหรับอันนี้ ฉันได้เลือกใช้ขนาดแบบอักษรสำหรับไอคอนและปรับเป็น 32px มันดูคล้ายกับการออกแบบดั้งเดิมมากขึ้น แต่ด้วยไอคอนของฉัน

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

ไอคอนจะวางอยู่ทางด้านซ้ายของข้อความดังนี้

ในภาพนี้ ฉันได้แทนที่รูปภาพในเลย์เอาต์ของ Golf Course ด้วยไอคอนต่างๆ ฉันใช้สีจากเลย์เอาต์และปรับขนาดเป็น 48px

สำหรับตัวอย่างนี้ ฉันได้ปิดใช้งานการปรับขนาดแบบอักษรสำหรับไอคอน นี่คือขนาดเริ่มต้นที่ 96px เข้ากันได้ดีกับการออกแบบเลย์เอาต์

พวกเขายังดูน่าทึ่งเมื่อใช้การตั้งค่าไอคอนวงกลม ฉันเปลี่ยนสีไอคอนเป็นสีขาวและใช้สีแทนจากเลย์เอาต์เป็นสีของวงกลม ไอคอนยังคงอยู่ที่ 48px

สำหรับอันนี้ ฉันใช้เฉดสีเขียวหนึ่งเฉดจากเลย์เอาต์ การปรับแต่งของ Divi Builder มีความเป็นไปได้มากมาย

Divi อัพโหลดไอคอน ราคา

ไอคอนอัปโหลด Divi คือ 24.97 เหรียญ มีการใช้งานและอัปเดตไม่จำกัด คุณสามารถซื้อ Divi Upload Icon ในตลาดซื้อขายได้

จบความคิด

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

เนื่องจากคุณกำลังอัปโหลดไอคอนไปยัง Divi Builder ไอคอนเหล่านี้จึงถูกจัดเก็บไว้ในเซิร์ฟเวอร์ของคุณ ฉันอัปโหลดไอคอนมากกว่า 2,500 รายการและไม่มีปัญหาเรื่องความเร็วกับ Divi Builder หรือเว็บไซต์ของฉัน

โปรดทราบว่ามันต้องใช้ฟอนต์ที่มีไฟล์ฟอนต์และไฟล์ CSS ง่ายต่อการอัปโหลดแบบอักษรที่ไม่ถูกต้อง (เดาว่าฉันรู้ได้อย่างไร) ตรวจสอบให้แน่ใจว่าคุณปฏิบัติตามคำแนะนำอย่างเคร่งครัด ไม่เช่นนั้นแบบอักษรจะเป็นช่องสี่เหลี่ยมว่างเปล่า นอกจากนี้ยังใช้ไม่ได้กับ Font Awesome 5 แต่ใช้งานได้ดีกับ 4.7

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

หากคุณสนใจที่จะเพิ่มไอคอนของคุณเองลงใน Divi Builder ไอคอนการอัปโหลด Divi ก็ควรค่าแก่การดู

เราต้องการได้ยินจากคุณ คุณลองไอคอนอัปโหลด Divi แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

ภาพเด่นผ่าน hanss / shutterstock.com