6 แกลเลอรี่ภาพใหม่ที่สร้างขึ้นด้วยแถวซ้อนของ Divi 5 (ดาวน์โหลดฟรี)

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

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่รอสักครู่ก่อนที่จะย้ายถิ่นฐานที่มีอยู่

ใช้แถวซ้อนกันเพื่อสร้างเลย์เอาต์ที่ซับซ้อน

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

สมัครสมาชิกช่อง YouTube ของเรา

แถวซ้อนกันคืออะไร?

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

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

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

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

เรียนรู้ทุกอย่างเกี่ยวกับแถวซ้อนของ Divi 5

อะไรทำให้แถวซ้อนกันแตกต่างกัน?

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

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

รูปแบบแกลเลอรี่ภาพ 6 รูปแบบที่คุณสามารถสร้างได้ด้วยแถวซ้อนกัน

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

เค้าโครง 1: แกลเลอรี่ CTA แบบอินไลน์

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

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

วิธีการสร้างมัน

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

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

เค้าโครง 2: แกลเลอรี่โฟกัสแบบแยกส่วน

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

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

วิธีการสร้างมัน

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

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

เค้าโครง 3: แกลเลอรีโครงการสปอตไลท์

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

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

วิธีการสร้างมัน

ภายใต้ภาพแต่ละภาพเราได้เพิ่มแถวซ้อนสองคอลัมน์ เราใช้คอลัมน์ด้านซ้ายสำหรับคำอธิบายสั้น ๆ และคอลัมน์ด้านขวาสำหรับปุ่มเรียกร้องให้เข้าร่วม จากนั้นเราก็จัดสไตล์ปุ่มโดยใช้สไตล์ทั่วโลกและทำซ้ำโครงสร้างนี้สำหรับแต่ละรายการแกลเลอรี่เพื่อรักษาความสอดคล้อง ในการทำให้แถวซ้อนทับภาพเราได้ตั้ง ตำแหน่ง ให้ สัมบูรณ์ ด้วย ดัชนีออฟเซ็ตแนวตั้ง 40px และ Z ดัชนี 1,000

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

เค้าโครง 4: แกลเลอรีเปิดเผยสกรอลล์

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

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

วิธีการสร้างมัน

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

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

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

เค้าโครง 5: แกลเลอรีผลิตภัณฑ์ที่เซ

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

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

มันทำงานได้ดีโดยเฉพาะอย่างยิ่งสำหรับแบรนด์ที่มีผลิตภัณฑ์สัมผัสหรือหรูหราเช่นสินค้าเครื่องหนังเซรามิกส์หรือรายการทำมือที่มีการเล่าเรื่องด้วยภาพ

วิธีการสร้างมัน

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

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

เค้าโครง 6: กริดพอร์ตโฟลิโอแบบอสมมาตร

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

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

วิธีการสร้างมัน

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

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

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

คุณยังสังเกตเห็นแถวซ้อนกันอีกแถวซ้อนทับภาพ เราตั้งค่า ตำแหน่ง ให้ สัมบูรณ์ เพื่อสร้างเอฟเฟกต์ซ้อนทับ

เคล็ดลับด้านบนในการสร้างแกลเลอรี่ภาพแบบโต้ตอบ

เมื่อเค้าโครงของคุณเข้าที่แล้วให้โรยในรายละเอียดเพิ่มเติมเล็กน้อยเพื่อให้แกลเลอรี่ของคุณขัดเงามากขึ้น นี่คือวิธี:

1. สร้างเอฟเฟกต์โฮเวอร์

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

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

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

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

2. ใช้แอตทริบิวต์คัดลอก/วางเพื่อใช้สไตล์กับรูปภาพอย่างรวดเร็ว

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

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

ตัวอย่างเช่นปรับแต่งองค์ประกอบหนึ่งและคัดลอกและวางคุณลักษณะของมันไปยังองค์ประกอบอื่น ๆ เพื่อทำซ้ำสไตล์

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

3. ใช้แคลมป์เพื่อสร้างภาพที่เป็นของเหลวและตอบสนอง

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

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

ตัวอย่างเช่นแคลมป์ (1200px, 30vw, 1400px) บอก Divi ไม่ให้ต่ำกว่า 1200px ลดความกว้างของวิวพอร์ตมากถึง 30% แต่ปิดที่ 1400px

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

4. ดูตัวอย่างและปรับแต่งสำหรับอุปกรณ์ต่าง ๆ

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

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

ดาวน์โหลดเลย์เอาต์แกลเลอรี่ฟรี

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

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

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

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

การดาวน์โหลด

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

สร้างแกลเลอรี่ภาพซ้อน (และอื่น ๆ ) ด้วย Divi 5

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

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

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่รอสักครู่ก่อนที่จะย้ายถิ่นฐานที่มีอยู่