คุณต้องการสร้างเลย์เอาต์กริดรูปภาพที่ตอบสนองด้วย .หรือไม่ DIVI ?
ผู้สร้าง Divi มีโมดูลในตัวที่ยอดเยี่ยมที่ใช้มุมมองกริด
แต่บางครั้งคุณอาจต้องการสร้างเค้าโครงตารางรูปภาพของคุณเองด้วยลิงก์ CTA สิ่งนี้ช่วยให้คุณควบคุมการออกแบบและ เนื้อหา ที่คุณต้องการแสดงสำหรับแต่ละรายการในกริดโดยไม่ต้องใช้ปลั๊กอิน
วันนี้เราจะแสดงวิธีสร้างเค้าโครงตารางรูปภาพแบบตอบสนองด้วยลิงก์ CTA โดยใช้ตัวเลือกการออกแบบในตัวของ Divi.
ขอเริ่มต้น!
การสำรวจ
นี่คือภาพรวมโดยย่อของผลลัพธ์ที่เราจะได้รับเมื่อสิ้นสุดบทช่วยสอนนี้
สร้างเพจด้วยตัวสร้างธีม Divi
จากแดชบอร์ด WordPress ให้สร้างหน้าเว็บใหม่โดยไปที่ หน้า >> เพิ่ม
ดูเพิ่มเติม: จะสร้างเมนูเลื่อนและกดใน DIVI ได้อย่างไร?
จากนั้น ตั้งชื่อเพจของคุณ จากนั้นคลิกที่ " ใช้ Divi Builder ".
จากนั้นคลิกที่ " เริ่มสร้าง«
การสร้างเค้าโครงส่วนพิเศษ
เพิ่มส่วนใหม่ "ความพิเศษ". เลย์เอาต์แถบด้านข้างซ้าย หนึ่งในสาม สองในสาม
เลือกเลย์เอาต์ของคอลัมน์ตามที่แสดงในภาพหน้าจอด้านล่าง:
ลบส่วนเริ่มต้นเพื่อให้เหลือเฉพาะส่วนพิเศษใหม่เท่านั้น
เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลังดังนี้:
- ความเป็นมา: #84dbda
ภายใต้แท็บ สไตล์อัปเดตตัวเลือกต่อไปนี้:
- ปรับความสูงของคอลัมน์ให้เท่ากัน: YES
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: YES
- ความกว้างของรางน้ำ: 1
- ความกว้างภายใน: 100%
- ความกว้างภายในสูงสุด: 1px (เดสก์ท็อป), 080px (แท็บเล็ตและโทรศัพท์)
- มาร์จิ้นภายใน (บนและล่าง): 12vh
- ช่องว่างภายในคอลัมน์ 1 (บนและล่าง): 0px
เมื่อสไตล์ของส่วนเข้าที่แล้ว ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนนั้น
การตั้งค่าสาย
อัปเดตพารามิเตอร์บรรทัดดังนี้:
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ระยะห่างคอลัมน์: 1
- ประสานความสูงของคอลัมน์: ใช่
- ระยะขอบภายใน (บนและล่าง): 0px
สร้างบรรทัดที่สองโดยทำซ้ำบรรทัดแรก
จากนั้นเปลี่ยนแถวที่ซ้ำกันเป็นเค้าโครงสองคอลัมน์
การเพิ่มรูปภาพเป็นภาพพื้นหลังของคอลัมน์
เมื่อแถวและคอลัมน์ทั้งหมดเข้าที่แล้ว เราก็พร้อมที่จะเพิ่มรูปภาพของเราลงในเลย์เอาต์กริดของเรา
เพื่อให้แน่ใจว่ารูปภาพจะตอบสนองในเลย์เอาต์กริด เราจะเพิ่มรูปภาพแต่ละรูปของเราเป็นภาพพื้นหลังให้กับแต่ละคอลัมน์จากสี่คอลัมน์ในส่วนนี้
เนื่องจากภาพพื้นหลังแต่ละภาพจะมีขนาดพื้นหลังเป็น " ปิดบัง "รูปภาพจะเต็มคอลัมน์เสมอเมื่อปรับขนาดเบราว์เซอร์
ภาพพื้นหลังของคอลัมน์แถวบนสุด
ในการเริ่มต้น ให้เปิดการตั้งค่าคอลัมน์แถวบนสุด
จากนั้นเพิ่มรูปภาพพื้นหลังลงในคอลัมน์
ภาพพื้นหลังของคอลัมน์แถวล่าง
ถัดไป เปิดการตั้งค่าสำหรับคอลัมน์ 1 ในแถวที่สอง (ล่าง) และเพิ่มรูปภาพพื้นหลังลงในคอลัมน์นี้ด้วย
ถัดไป เพิ่มรูปภาพพื้นหลังลงในคอลัมน์ 2 ของแถวเดียวกัน
ส่วนคอลัมน์ 1 ภาพพื้นหลัง
และสุดท้าย เปิดการตั้งค่าส่วน "พิเศษ" และเพิ่มรูปภาพพื้นหลังลงในคอลัมน์ 1
เพิ่มโมดูล "Call to Action" ที่ซ้อนทับบนรูปภาพในแต่ละคอลัมน์
ตอนนี้เราได้เพิ่มภาพพื้นหลังลงในแต่ละคอลัมน์ของเค้าโครงตารางแล้ว เราจะเพิ่มโมดูล "คำกระตุ้นการตัดสินใจ" ลงในแต่ละคอลัมน์
การใช้โมดูล "การเรียกร้องให้ดำเนินการ" บนภาพพื้นหลังของคอลัมน์จะช่วยให้คุณเพิ่มรูปแบบการซ้อนทับพื้นหลังที่กำหนดเองและเอฟเฟกต์โฮเวอร์ให้กับภาพพื้นหลังของคอลัมน์ได้อย่างง่ายดาย
สำหรับตัวอย่างนี้ เราจะใช้องค์ประกอบปุ่มจากโมดูลการเรียกการดำเนินการ แต่คุณสามารถเพิ่มลงใน เนื้อหา ของชื่อเรื่องหรือเนื้อหาเหนือปุ่ม
เราจะเพิ่มโมดูล "คำกระตุ้นการตัดสินใจ" แรกในคอลัมน์แถวบนสุด
เนื้อหา
อัปเดตการตั้งค่าโมดูล "Call to Action" ดังนี้:
- ลบข้อความชื่อเรื่อง
- ลบเนื้อความ
- URL ลิงค์ของปุ่ม: #
ข้อสังเกต : การเพิ่ม "#" สำหรับ URL ลิงก์ของปุ่มเป็นเพียงตัวเติมสำหรับตอนนี้เพื่อให้ปุ่มแสดง การเพิ่มสีพื้นหลังแบบกึ่งโปร่งใสบนโฮเวอร์จะทำให้คุณได้สีโอเวอร์เลย์แบบกำหนดเองที่ดี เมื่อคุณวางเมาส์เหนือโมดูล (และรูปภาพด้านหลัง)
- สีพื้นหลัง: โปร่งใส (เดสก์ท็อป), rgba (255,235,77,0.5) (โฮเวอร์)
ลักษณะปุ่ม
ไปที่แท็บ สไตล์ และแก้ไขการตั้งค่าปุ่มของโมดูล "คำกระตุ้นการตัดสินใจ" ดังนี้:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: YES
- ขนาดข้อความของปุ่ม: 22px
- สีข้อความของปุ่ม: #ffeb4d
- ปุ่มพื้นหลัง: #000000 (เดสก์ท็อป), #ec5f00 (โฮเวอร์)
ดูเพิ่มเติม: วิธีสร้างเมนูเลื่อนและกดใน DIVI
- ความกว้างของขอบปุ่ม: 0 พิกเซล
- รัศมีเส้นขอบของปุ่ม: 100 px
- แบบอักษรของปุ่ม: ทรายดูด
- ปุ่มไฟสลัว: กึ่งหนา
- ปุ่ม Padding: บน 0,5em, ด้านล่าง 0,5em, 2em ซ้าย, 2em ขวา
ขนาด แผ่นรองและขอบ
ต่อไป เราต้องตรวจสอบให้แน่ใจว่าโมดูลของเรามีความสูงระดับหนึ่งเพื่อแสดงภาพพื้นหลังของคอลัมน์ด้านหลัง
ในการทำเช่นนี้ เราจะเพิ่มระยะขอบภายใน (บนและล่าง) ให้กับโมดูล
นอกจากนี้ เราจะเพิ่มเส้นขอบเล็กๆ ให้กับโมดูลเพื่อให้แยกจากรูปภาพอื่นๆ ในเลย์เอาต์กริดได้เล็กน้อย
ใช้การตั้งค่าต่อไปนี้:
- ความกว้าง: 100%
- มาร์จิ้นภายใน (บนและล่าง): 15vh
- ความกว้างขอบด้านล่าง: 5px
- ความกว้างขอบด้านซ้าย: 5px
- สีขอบ: rgba (255,255,255,0.5)
ข้อสังเกต : การใช้หน่วยความยาว vh สำหรับการเติมจะทำให้ค่าช่องว่างภายในสัมพันธ์กับความสูงของวิวพอร์ตของเบราว์เซอร์ ดังนั้นองค์ประกอบกริดรูปภาพของคุณจะขยายและย่อความสูงตามสัดส่วนของหน้าต่างเบราว์เซอร์
การจัดกึ่งกลางแนวตั้งของเนื้อหาของโมดูล "คำกระตุ้นการตัดสินใจ"
เพื่อให้แน่ใจว่า เนื้อหา ของโมดูล “การเรียกการดำเนินการ” ยังคงตรงกลางในแนวตั้ง เราสามารถเพิ่มส่วนย่อยเล็กๆ ของ CSS ที่กำหนดเองได้โดยใช้คุณสมบัติ flex
ภายใต้แท็บขั้นสูง เพิ่ม CSS ต่อไปนี้ในองค์ประกอบหลัก:
display:flex;
flex-direction:column;
justify-content:center;
เพิ่มการเรียกร้องให้ดำเนินการซ้อนทับกับคอลัมน์อื่น
ตอนนี้โมดูล "คำกระตุ้นการตัดสินใจ" แรกได้รับการกำหนดค่าแล้ว ให้คัดลอกและวางโมดูลลงในอีก 3 คอลัมน์ที่เหลือของเลย์เอาต์ รวมถึง 2 คอลัมน์ในแถวล่างสุดและคอลัมน์ที่ 1 ในส่วน
เพื่อให้แน่ใจว่าโมดูล "คำกระตุ้นการตัดสินใจ" ครอบคลุมความสูงทั้งหมดของคอลัมน์ 1 ในส่วนเฉพาะ ให้ตั้งค่าความสูงขั้นต่ำเป็น 100%
- ความสูงขั้นต่ำ: 100%
มันจบแล้ว ! มาดูผลสุดท้ายกัน
ผลสุดท้าย
นี่คือผลลัพธ์สุดท้ายของเลย์เอาต์กริดรูปภาพที่ตอบสนองบนหน้าเว็บที่มีเอฟเฟกต์โฮเวอร์
และนี่คือวิธีที่กริดตอบสนองเมื่อปรับขนาดเบราว์เซอร์
ดาวน์โหลด DIVI ทันที!!!
สรุป
เลย์เอาต์ตารางรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ยังคงเป็นที่นิยมในหลายเว็บไซต์ ภาพที่ดึงดูดใจจากภาพพื้นหลังรวมกับโอเวอร์เลย์คำกระตุ้นการตัดสินใจสามารถแสดงลิงก์การนำทางที่สำคัญเหล่านั้นได้
นอกจากนี้ ลักษณะการตอบสนองของเลย์เอาต์ตารางรูปภาพจะดูดีบนอุปกรณ์ทั้งหมด ซึ่งจำเป็นเสมอ
เราหวังว่าคู่มือนี้จะเป็นประโยชน์สำหรับคุณในโครงการสร้างในอนาคตของคุณ เว็บไซต์เว็บ. หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเรา หากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์ของคุณให้เสร็จสมบูรณ์
คุณสามารถทำตามคำแนะนำของเราได้ที่ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
