ไฮไลท์ปลั๊กอิน Divi – Divi Portfolio Grid

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

Divi Portfolio Grid เป็นปลั๊กอินของบุคคลที่สามจาก Divi Theme Store ไม่เพียงแต่ให้คุณสมบัติโมดูล Divi มาตรฐานเท่านั้น แต่ยังมีเค้าโครงคอลัมน์ 2, 3 และ 4 พร้อมคุณสมบัติการจัดรูปแบบใหม่ เพื่อให้คุณสามารถสร้างพอร์ตการลงทุนที่ไม่เหมือนใคร นอกจากนี้ยังเพิ่มปุ่มพร้อมข้อความและเอฟเฟกต์โฮเวอร์เพื่อเปลี่ยนสี

ในภาพรวมนี้ เราจะมาดู Divi Portfolio Grid โดยใช้พอร์ตโฟลิโอตัวอย่างที่ฉันสร้างขึ้น ภาพทั้งหมดที่ใช้ในพอร์ตการลงทุนและพื้นหลังนำมาจาก Unsplash.com

การติดตั้งปลั๊กอิน Divi Portfolio Grid

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

คุณสมบัติโมดูลพอร์ตโฟลิโอแบบกำหนดเอง

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

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

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

ตัวอย่าง – การใช้ Divi Custom Portfolio Module

สำหรับตัวอย่างของฉัน ฉันได้สร้างเพจ เพิ่มพื้นหลังเพื่อให้เห็นแสงแฟลร์ ทำให้แถวเต็มความกว้าง และเพิ่ม Portfolio Grid Module ก่อนที่เราจะพิจารณา มาดูภาพรวมอย่างรวดเร็วที่โมดูลพอร์ตโฟลิโอ Divi Building มาตรฐานเพื่อเปรียบเทียบ

โมดูลผลงาน Divi มาตรฐาน

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

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

ตัวอย่างโมดูลพอร์ตโฟลิโอแบบกำหนดเอง

ประกอบด้วยสามเลย์เอาต์ให้เลือก คุณจึงตั้งค่าพอร์ตโฟลิโอของคุณในคอลัมน์ 2, 3 หรือ 4 ได้ มาดูเลย์เอาต์แต่ละอันที่มีการปรับแต่งและฟีเจอร์ต่างๆ กัน

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

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

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

มาดูเค้าโครง 3 คอลัมน์กัน ในตัวอย่างนี้ ฉันได้เปลี่ยนสีพื้นหลังและข้อความของปุ่ม และเปลี่ยนข้อความเพื่อแสดงข้อความของฉันเอง

ปุ่มนี้ยังรวมถึงเอฟเฟกต์เงาโฮเวอร์ ในตัวอย่างนี้ ฉันวางเมาส์เหนือปุ่มเท่านั้น ดังนั้นรูปภาพจึงไม่แสดงผลเมื่อวางเมาส์ไว้ พื้นหลังปุ่มและข้อความเปลี่ยนสี

ตัวอย่างนี้ใช้เค้าโครง 4 คอลัมน์ ฉันได้ตั้งค่ารัศมีของปุ่มเป็น 0 และเปลี่ยนรูปแบบตัวอักษรทั้งหมด

เอฟเฟกต์โฮเวอร์วางโอเวอร์เลย์สีน้ำเงินด้วยความทึบ 47% (ขออภัยเกี่ยวกับตัวเลขคี่ แต่มันเป็นตำแหน่งที่เมาส์ของฉันหยุด ดังนั้นฉันจึงไปกับมัน) และไอคอนช่องทำเครื่องหมายสีแดง ปุ่มเปลี่ยนจากสีเทาเข้มพร้อมข้อความแท็บสีอ่อนเป็นสีขาวนวลพร้อมข้อความสีเทาเข้ม

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

ปุ่มจะแสดงเฉพาะเมื่อคุณแสดงชื่อเท่านั้น ตัวอย่างนี้แสดงเฉพาะหมวดหมู่

ตัวอย่างนี้แสดงเฉพาะชื่อโครงการ เนื่องจากชื่อเรื่องปรากฏขึ้น ปุ่มจึงแสดงขึ้นด้วย

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

Divi Portfolio Grid – ตอบสนอง

ปลั๊กอินตอบสนอง นี่คือเค้าโครง 3 คอลัมน์บน iPad (จำลองในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome) ในโหมดแนวตั้ง หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Google Chrome โปรดดูบทความว่าทำไมคุณควรเริ่มใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ทันที

นี่คือเลย์เอาต์เดียวกันในโหมดแนวนอน

นี่คือเลย์เอาต์เดียวกันใน Galaxy S5 ในโหมดแนวตั้ง

และนี่คือเลย์เอาต์ของ Galaxy S5 ที่เป็นโหมดแนวนอน

ใบอนุญาต การอัปเดต และเอกสารประกอบ

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

Divi Portfolio Grid สามารถซื้อได้ที่ Divi Theme Store

ความคิดสุดท้าย

Divi Portfolio Grid ใช้งานง่ายและมีคุณสมบัติพิเศษเพียงพอเหนือโมดูลพอร์ต Divi มาตรฐานที่ผู้ใช้จำนวนมากจะพบว่าจำเป็น ประกอบด้วยเค้าโครงคอลัมน์ 2, 3 และ 4 เพิ่มปุ่มที่มีเอฟเฟกต์โฮเวอร์ ซ้อนทับด้วยไอคอน และสไตล์โมดูลทั้งหมดที่คุณคาดหวังรวมถึงคุณสมบัติ CSS ขั้นสูงเพื่อให้คุณสามารถกำหนดสไตล์ด้วยโค้ดของคุณเอง หากคุณต้องการพอร์ตโฟลิโอที่มีคุณสมบัตินอกเหนือจากโมดูลพอร์ต Divi มาตรฐาน Divi Portfolio Grid อาจเป็นโมดูลที่คุณต้องการ

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

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