วิธีสร้างเลย์เอาต์กริดรูปภาพที่ตอบสนองด้วย CTA และโอเวอร์เลย์โฮเวอร์ใน Divi

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างเลย์เอาต์กริดรูปภาพที่ตอบสนองด้วย CTA และโฮเวอร์โอเวอร์เลย์ใน Divi

ส่วนที่ 1: การสร้างเค้าโครงส่วนพิเศษ

ในการเริ่มต้น ให้เพิ่มส่วนพิเศษใหม่ด้วยเลย์เอาต์แถบด้านข้างด้านซ้ายหนึ่งในสามสองในสาม

ลบส่วนปกติที่เป็นค่าเริ่มต้นเพื่อให้เหลือเฉพาะส่วนพิเศษใหม่เท่านั้น

เปิดการตั้งค่าส่วนและอัปเดตสีพื้นหลังดังนี้:

• สีพื้นหลัง: #84dbda

ใต้แท็บการออกแบบ ให้อัปเดตตัวเลือกขนาด ความกว้าง และช่องว่างภายในดังนี้:

• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้างภายใน: 100%
• ความกว้างสูงสุดภายใน: 1080px (เดสก์ท็อป), 500px (แท็บเล็ตและโทรศัพท์)
• Padding: บน 12vh, 12vh ด้านล่าง
• คอลัมน์ 1 ช่องว่างภายใน: 0px ด้านบน, 0px ด้านล่าง

หลังจากที่ลักษณะส่วนเข้าที่แล้ว ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนนั้น

การตั้งค่าแถว

อัปเดตการตั้งค่าแถวดังนี้:

• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

หากต้องการสร้างแถวที่ 2 ให้ทำซ้ำแถวแรก

จากนั้นอัปเดตแถวที่ซ้ำกันด้วยเค้าโครงสองคอลัมน์

ส่วนที่ 2: การเพิ่มรูปภาพเป็นภาพพื้นหลังของคอลัมน์

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

ภาพพื้นหลังของคอลัมน์แถวบนสุด

ในการเริ่มต้น ให้เปิดการตั้งค่าคอลัมน์สำหรับคอลัมน์ในแถวบนสุด

จากนั้นเพิ่มรูปภาพพื้นหลังลงในคอลัมน์

ภาพพื้นหลังของคอลัมน์แถวล่าง

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

จากนั้น เพิ่มรูปภาพพื้นหลังลงในคอลัมน์ 2 ในแถวเดียวกัน

ภาพพื้นหลังคอลัมน์ส่วนพิเศษ 1

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

ส่วนที่ 3: การเพิ่มการเรียกร้องให้ดำเนินการซ้อนทับรูปภาพในแต่ละคอลัมน์

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

การสร้างโมดูลการเรียกร้องให้ดำเนินการ

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

เนื้อหา

ปรับปรุงเนื้อหาสำหรับคำกระตุ้นการตัดสินใจดังนี้:

• ลบข้อความชื่อเรื่อง
• ลบข้อความเนื้อหา
• URL ลิงก์ของปุ่ม: #
• สีพื้นหลัง: โปร่งใส (เดสก์ท็อป), rgba (255,235,77,0.5) (โฮเวอร์)

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

ลักษณะปุ่ม

อัปเดตการตั้งค่าการออกแบบการเรียกร้องให้ดำเนินการสำหรับปุ่มต่อไปดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 22px
• สีข้อความของปุ่ม: #ffeb4d
• สีพื้นหลังของปุ่ม: #000 (เดสก์ท็อป), #ec5f00 (โฮเวอร์)
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px
• แบบอักษรของปุ่ม: ทรายดูด
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• ปุ่ม Padding: 0.5em บน 0.5em ล่าง 2em ซ้าย 2em right

การปรับขนาด การเติม และเส้นขอบ

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

อัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 100%
• ช่องว่างภายใน: บน 15vh, ด้านล่าง 15vh
• ความกว้างขอบล่าง: 5px
• ความกว้างของเส้นขอบด้านซ้าย: 5px
• สีของเส้นขอบ: rgba(255,255,255,0.5)

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

การจัดกึ่งกลางเนื้อหา CTA ในแนวตั้ง

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

ภายใต้แท็บขั้นสูง เพิ่ม CSS ต่อไปนี้ในองค์ประกอบหลัก:

display:flex;
flex-direction:column;
justify-content:center;

การเพิ่ม Call to Action Overlay ให้กับคอลัมน์อื่นๆ

เมื่อกำหนดรูปแบบโมดูลการเรียกร้องให้ดำเนินการครั้งแรกแล้ว ให้คัดลอกและวางโมดูลไปยังอีก 3 คอลัมน์ตลอดทั้งเลย์เอาต์ รวมทั้ง 2 คอลัมน์ในแถวด้านล่างและคอลัมน์ 1 ในส่วนพิเศษ

เพื่อให้แน่ใจว่าโมดูลการเรียกร้องให้ดำเนินการครอบคลุมความสูงทั้งหมดของคอลัมน์ 1 ในส่วนพิเศษ ให้อัปเดตความสูงต่ำสุดเป็น 100%

• ความสูงขั้นต่ำ: 100%

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

แค่นั้นแหละ. มาดูผลสุดท้ายกัน

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของเค้าโครงตารางรูปภาพที่ตอบสนองบนหน้าสด

และนี่คือเอฟเฟกต์โฮเวอร์

และนี่คือวิธีที่การออกแบบตอบสนองเมื่อปรับขนาดเบราว์เซอร์

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!