ไฮไลท์ปลั๊กอิน Divi: โมดูล Divi Ribbon

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

การติดตั้ง Divi Ribbon Module

1. ไปที่และดาวน์โหลดปลั๊กอิน
2. ในแดชบอร์ด WordPress ให้ไปที่ Plugins > Add New
3. คลิก อัปโหลดปลั๊กอิน
4. เลือกไฟล์ซิปจากคอมพิวเตอร์ของคุณ
5. คลิก ติดตั้งทันที
6. เมื่อคุณเห็น “ติดตั้งปลั๊กอินสำเร็จ” ให้คลิก เปิดใช้งานปลั๊กอิน
7. ไปที่ เครื่องมือ > ใบอนุญาตปลั๊กอิน Divi Ribbon แล้วป้อนรหัสใบอนุญาตของคุณ

โมดูล Divi Ribbon

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

แท็บเนื้อหา Divi Ribbon

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

การตั้งค่าหลัก

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

Ribbon แต่ละประเภทมีตัวเลือกตำแหน่งที่แตกต่างกันขึ้นอยู่กับความสามารถในการแสดงผล ตัวอย่างนี้แสดง ribbon มุม สามารถวางไว้ที่ด้านบนซ้ายหรือขวาหรือด้านล่างซ้ายหรือขวา

ส้อมสามารถแสดงที่ด้านบนซ้ายหรือขวา

ความกว้างเต็มสามารถแสดงด้านบนหรือด้านล่าง

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

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

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

Blurb Rotation

การหมุน Blurb เพิ่มตัวเลือกการพลิก 3D ที่แสดงเนื้อหาหลังจากที่การ์ดพลิกด้านข้าง และรูปภาพและไอคอนเพื่อแสดงบนแบบอักษร

เพิ่มรูปภาพจากไลบรารีสื่อและไอคอนจากรายการ รูปภาพ/ไอคอนจะแสดงก่อน จากนั้นการ์ดจะพลิกเพื่อแสดงเนื้อหาเมื่อวางเมาส์เหนือ คุณยังสามารถเพิ่มรูปภาพเป็นพื้นหลังได้

ปุ่ม

ปุ่มประกอบด้วยข้อความ ลิงก์ ตัวเลือกหน้าต่าง ช่องว่างภายใน และระยะขอบ ฉันได้เพิ่มระยะขอบซ้ายเพื่อดึงปุ่มออกจากใต้ริบบิ้น

แท็บออกแบบริบบิ้น Divi

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

รูปภาพและไอคอน

การตั้งค่ารูปภาพและไอคอนช่วยให้คุณปรับความกว้างของรูปภาพ เส้นขอบ กล่องเงา สี โหมดผสมผสาน ฯลฯ

การหมุน

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

ในตอนแรก ค่อนข้างสับสนเล็กน้อยที่การปรับไอคอนอยู่ที่นี่แทนที่จะเป็นการตั้งค่ารูปภาพและไอคอน แต่ควรอยู่ในส่วนนี้ การวางการตั้งค่าภาพที่นี่ก็สมเหตุสมผลเช่นกัน แต่มีหลายอย่างที่ต้องแยกแท็บ

ระยะห่างข้อความ

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

การตั้งค่าริบบิ้น

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

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

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

ข้อความ

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

ปุ่ม

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

ตัวอย่างริบบิ้น Divi

ต่อไปนี้คือตัวอย่างบางส่วนของลักษณะ Ribbon ของ Divi ภายในเค้าโครง Divi

ขายริบบิ้น

สำหรับตัวอย่างแรก ฉันจะแทนที่ CTA ทางด้านขวา

มันถูกสร้างขึ้นด้วยสามโมดูล: รูปภาพ ข้อความ และปุ่ม ฉันจะใช้พื้นหลัง ข้อความและปุ่มเดียวกัน และสร้างใหม่ด้วยโมดูล Divi Ribbon เดียว

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

ฉันไม่ได้ใส่รูปภาพที่หยักศก (รูปคลื่นสามเหลี่ยม) แต่สามารถเพิ่มลงในพื้นที่เนื้อหาได้อย่างง่ายดาย ชื่อจะต้องถูกย้ายไปยังพื้นที่เนื้อหาเพื่อให้กราฟิกปรากฏเหนือชื่อเรื่อง ริบบิ้นลดราคาทำให้ดูโดดเด่นขึ้นอีกเล็กน้อย

โครงการล่าสุด Ribbon

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

ริบบิ้น CTA สินค้า

สำหรับตัวอย่างนี้ ฉันได้เพิ่มโมดูล Divi Ribbon ในส่วนฮีโร่ของหน้าร้านค้าของเลย์เอาต์ Leather Company ฉันแทนที่ CTA การขายมาตรฐานโดยใช้รูปภาพจากเลย์เอาต์ ริบบิ้นและปุ่มใช้สีจากเค้าโครง ฉันย้ายริบบิ้นไปที่มุมล่างขวาและนำปลายริบบิ้นออก

นี่คือส่วนพิเศษ ฉันดีใจที่เห็นว่าใช้งานได้ดีในส่วนพิเศษ โมดูลของบริษัทอื่นจำนวนมากไม่เข้ากันได้กับส่วนประเภทนี้เสมอไป

ทดสอบและซื้อ

คุณสามารถซื้อ Divi Ribbon Module ได้จากเว็บไซต์ของผู้พัฒนาในราคา $11 สำหรับการใช้งานส่วนตัวหรือเชิงพาณิชย์บนเว็บไซต์เดียว

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

จบความคิด

Divi Ribbon Module เป็นโมดูลที่น่าสนใจสำหรับ Divi Builder ประกอบด้วยที่ต่างๆ สำหรับเพิ่มรูปภาพ และคุณสามารถใส่ชื่อ เนื้อหา ไอคอน และปุ่มได้ ด้วยคุณสมบัติทั้งหมดเหล่านี้ มันใช้งานได้ดีเป็นการนำเสนอ คำกระตุ้นการตัดสินใจ ลิงก์ผลิตภัณฑ์ ลิงก์บล็อก ฯลฯ เพิ่มริบบิ้นที่จัดสไตล์ได้เพื่อเรียกความสนใจไปยังฝ่ายขายหรือ CTA อื่นๆ และปลั๊กอินนี้มีตัวเลือกการจัดสไตล์ที่ยากต่อการใช้งาน รับด้วยโมดูลเดียว

Divi Ribbon Module ใช้งานได้ดีกับ Visual Builder และ Theme Builder เป็นปลั๊กอินที่ยอดเยี่ยมที่ง่ายต่อการแนะนำ

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

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