ทำเว็บไซต์ด้วย WordPress กับวิธีเพิ่ม icon ของเราเองลงใน Elementor

สวัสดีครับ กลับมาพบกันอีกครั้งสำหรับบทความเรื่องของการทำเว็บนะครับ วันนี้ผมจะมาพูดถึงเครื่องมือในการทำเว็บที่ได้รับความนิยมเป็นอย่างมากในการใช้งานร่วมกับการ ทำเว็บไซต์ด้วย WordPress นั่นก็คือปลักอินที่ชื่อว่า Elementor ครับ โดยปลักอินนี้คร่าวๆก็คือเป็นปลักอินที่ช่วยให้เราสามารถออกแบบหน้าตาเว็บได้อย่างง่ายขึ้นมาก จนแทบจะไม่ต้องแตะต้องโค้ดเลยด้วยซ้ำครับ เป็น tools ที่ผมใช้ให้กับทุกเว็บที่ผมทำเลย เพราะมันช่วยให้เราสามามารถออกแบบและแก้ไขหน้าตาเว็บไซต์ได้อย่างง่ายดาย ประหยัดเวลาได้มากโขเลย ผมแนะนำมากๆครับ ตอนนี้ยอดติดตั้งปลักอินนี้ก็มากกว่า 1 ล้านเว็บแล้ว!! เป็นสิ่งที่ช่วยย้ำถึงความเจ๋งของมันได้เป็นอย่างดีเลยทีเดียวครับ

แต่ทีนี้ครับบางอย่างมันก็อาจจะมาไม่ตรงกับความต้องการของเรา เราก็ต้องปรับแต่งเพิ่มนิดหน่อย อย่างในครั้งนี้จะมาดูเรื่องของการเพิ่ม icon ที่เราอยากจะเพิ่มเข้าไปใน Elementor ครับ

เจ้าตัว Elementor มันจะมีเครื่องมือที่ช่วยให้เราแทรก icon ได้ครับ ซึ่งจะเอามาจาก FontAwesome แต่ทีนี้บางไอคอนมันดันไม่ตรงใจเรา แล้วถ้าเราอยากจะใช้ไอคอนของตัวเองละ ทำยังไง? ง่ายมากครับ มาดูวิธีกัน

  1. ให้เราลงปลักอินที่ชื่อว่า Custom Icons for Elementor ครับ ปลักอินนี้จะทำให้เราสามารถอัพโหลด icon ลงไปในเว็บได้ ติดตั้งปลักอินให้เรียบร้อยนะครับ
  2. เตรียมไอคอนที่เราต้องการไว้ครับ โดยต้องเป็นแบบ SVG เท่านั้นนะครับ มีเว็บที่แจกไอคอนก็คือ Flaticon.com ครับ ลองเข้าไปโหลดจากที่นี้ดูได้
    เว็บไซต์ Flaticon เป็นเว็บสำหรับโหลด icon มาใช้งาน
  3. ทำการ Generate icon ของเราให้กลายเป็น font ก่อน ที่เว็บนี้ครับ Fontello โดยลากไฟล์ SVG ที่เราโหลดมาไปใส่ในช่องที่เค้ากำหนด สามารถลากหลายๆไฟล์ลงไปได้พร้อมกันครับ
    อัพโหลด SVG icon ลงไปในเว็บไซต์นี้เพื่อทำการ Generate ไอคอน ให้กลายเป็น Font
  4. จากนั้นถ้าเราต้องการแก้ไขพวกชื่อหรือ Keyword สำหรับไว้ค้นหาใน elementor ก็คลิกที่ รูปดินสอ ของไอคอนแต่ละตัวที่เราอัพโหลดไปครับ
    คลิกที่รูปดินสอ เพื่อแก้ไขรายละเอียดของไอคอน
    มันจะมีช่องขึ้นมาแบบนี้ ก็ใส่ชื่อ ใส่ Keyword ที่เราต้องการได้เลย
    แก้ไขรายละเอียดของไอคอน เช่นชื่อ CSS หรือคำสำหรับค้นหา
  5. เสร็จแล้วตั้งชื่อ Font ของเราตรงช่องก่อนปุ่มดาวน์โหลดครับ แล้วก็กดปุ่มดาวน์โหลด เลือกโหลดแบบ Zip นะครับ
  6. ไปที่เว็บของเราครับ เมนู Elementor > Custom Icons  แล้วก็ให้เราลากไฟล์ zip ที่เราโหลดมาก่อนหน้าลงไปได้เลยครับ เสร็จแล้วก็คลิก Refresh หน้าเว็บไซต์หนึ่งครั้ง
    Upload Fontello Zip
  7. ถ้าทำถูกต้องก็จะมีไอคอนที่เราเพิ่มลงไปปรากฎตรงนี้ครับ
    Fonts หรือ Icons ที่เราอัพโหลดแล้วจะแสดงตรงนี้
  8. ต่อไปเวลาเราใช้งาน Elementor ที่ตรงไหนสามารถเลือก icon ได้ เราก็สามารถเอาไอคอนที่เราเพิ่มลงไปมาใช้งานได้แล้วครับ สามารถปรับแต่งได้ทุกอย่าง ไม่ว่าจะเป็นขนาด สี เจ๋งมากๆ
    การใช้งาน Custom Icon ใน Elementor

และนี่แหละครับคือวิธีการเพิ่ม icon ของเราเองลงไปใช้งานกับ Elementor ไม่ยากเลยครับ ผมใช้งานกับโปรเจ็คของลูกค้าหลายท่านแล้ว สะดวกจริงสะดวกจังมาก จริงๆมันก็มีวิธีอื่นนะครับเช่นการเขียน code ลงไปในไฟล์ functions.php ของเราเอง แต่ผมมองว่า เวลาคือสิ่งสำคัญครับ ในเมื่อเรามีเครื่องมือมาช่วยอยู่แล้ว ก็ไม่จำเป็นต้องทำชีวิตให้ยุ่งยากครับ ข้อดีของ WordPress ก็คือเรามีชุมชนคนใช้งานที่เข้มแข็ง และมีเครื่องมือมาแบ่งปันกันเพียบอยู่แล้ว ก็นำมาใช้ให้เกิดประโยชน์ครับ

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

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

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

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

  • คุกกี้เพื่อการวิเคราะห์

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

  • คุกกี้เพื่อปรับเนื้อหาให้เข้ากับกลุ่มเป้าหมาย

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

บันทึก