ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับโมดูลรายการไอคอนของ Divi 5

เผยแพร่แล้ว: 2025-08-31

หนึ่งในการอัปเดต Divi 5 ล่าสุดแนะนำ Carousels และ Lottie Animations รวมถึงสิ่งที่ทุกไซต์สามารถใช้ได้: โมดูลรายการไอคอนใหม่ แทนที่จะเป็นกระสุนปืนธรรมดาคุณสามารถสร้างรายการสไตล์ด้วยไอคอนที่มีความหมายซึ่งเพิ่มความชัดเจนและดึงดูดความสนใจ

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

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

สารบัญ
  • 1 โมดูลรายการไอคอนคืออะไร?
    • 1.1 คุณสมบัติที่สำคัญ
  • 2 วิธีใช้โมดูลรายการไอคอน
    • 2.1 การเพิ่มพื้นที่ระหว่างรายการไอคอน
    • 2.2 การตั้งค่าการออกแบบสากลสำหรับรายการไอคอนทั้งหมด
  • 3 ตัวอย่างที่ใช้งานได้จริงโดยใช้โมดูลรายการไอคอน
    • 3.1 บล็อกการเดินทาง
    • 3.2 คุณสมบัติในเว็บไซต์ธุรกิจ
    • 3.3 คู่มือกระบวนการทีละขั้นตอน
    • 3.4 หน้าร้านค้าอีคอมเมิร์ซ
  • 4 ดาวน์โหลดฟรี
  • 5 ใช้โมดูลรายการไอคอนใน Divi 5

โมดูลรายการไอคอนคืออะไร?

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

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

โมดูลรายการไอคอนใน Divi 5

คุณสมบัติที่สำคัญ

โมดูลรายการไอคอนมีคุณสมบัติที่ทำให้เป็นส่วนเสริมที่ยอดเยี่ยมสำหรับ Divi 5 นี่คือคุณสมบัติที่สำคัญ:

การสร้างรายการง่าย ๆ

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

ตัวเลือกการปรับแต่งที่กว้างขวาง

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

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

วิธีใช้โมดูลรายการไอคอน

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

โมดูลรายการไอคอนใน Divi 5

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

โมดูลรายการไอคอนใน Divi 5

ในแท็บเนื้อหาป้อนชื่อใน ฟิลด์ข้อความ

โมดูลรายการไอคอนใน Divi 5

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

โมดูลรายการไอคอนใน Divi 5

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

โมดูลรายการไอคอนใน Divi 5

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

โมดูลรายการไอคอนใน Divi 5

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

โมดูลรายการไอคอนใน Divi 5

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

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

โมดูลรายการไอคอนใน Divi 5

เมื่อคุณจัดรูปแบบรายการไอคอนรายการแรกคุณสามารถคัดลอกเปลี่ยนไอคอนและอัปเดตข้อความได้อย่างง่ายดาย

การเพิ่มพื้นที่ระหว่างรายการไอคอน

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

โมดูลรายการไอคอนใน Divi 5

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

โมดูลรายการไอคอนใน Divi 5

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

โมดูลรายการไอคอนใน Divi 5

การตั้งค่าการออกแบบสากลสำหรับรายการไอคอนทั้งหมด

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

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

โมดูลรายการไอคอนใน Divi 5

ตัวอย่างที่ใช้งานได้จริงโดยใช้โมดูลรายการไอคอน

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

บล็อกการเดินทาง

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

โมดูลรายการไอคอนใน Divi 5

คุณสมบัติในเว็บไซต์ธุรกิจ

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

โมดูลรายการไอคอนใน Divi 5

คู่มือกระบวนการทีละขั้นตอน

สร้างรายการที่สรุปขั้นตอนของกระบวนการเช่น“ วิธีลงทะเบียน” ใช้ CheckMarks เพื่อแนะนำผู้ใช้ในแต่ละขั้นตอนทำให้ข้อมูลที่ซับซ้อนสามารถย่อยได้มากขึ้น

โมดูลรายการไอคอนใน Divi 5

หน้าร้านค้าอีคอมเมิร์ซ

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

โมดูลรายการไอคอนใน Divi 5

ดาวน์โหลดไฟล์
ดาวน์โหลดฟรี

ดาวน์โหลดฟรี

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

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

ใช้โมดูลรายการไอคอนใน Divi 5

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

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

ดาวน์โหลด Divi 5Learn เพิ่มเติมเกี่ยวกับ Divi 5