Divi: วิธีสร้างภาพซ้อนทับแบบกำหนดเอง

คุณต้องการเรียนรู้วิธีออกแบบภาพซ้อนทับแบบกำหนดเองด้วย Divi ?

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

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

ไม่จำเป็นต้องใช้ปลั๊กอิน

ขอเริ่มต้น!

การสำรวจ

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

สร้างหน้าใหม่ด้วย Divi Builder

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi ผู้ก่อสร้าง

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

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

การสร้างภาพซ้อนทับแบบกำหนดเองใน Divi

ออกแบบส่วน แถว และคอลัมน์

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

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

• พื้นหลัง: #3a0ca3

ถัดไป เปิดการตั้งค่าคอลัมน์ 1 และอัปเดตสิ่งต่อไปนี้:

• CSS Class: et-overlay-container

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

ใส่รูปภาพ

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

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

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

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• มาร์จิ้น (ล่าง): 0px

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

• คลาส CSS: et-overlay-image

การเพิ่มสีภาพซ้อนทับโดยใช้โมดูล "ตัวแบ่ง"

ในการสร้างสีภาพซ้อนทับ เราจะใช้โมดูลตัวแบ่ง

ขั้นแรก เพิ่มโมดูลตัวแบ่งใต้รูปภาพ

จากนั้นวางตำแหน่งตัวคั่นแบบสัมบูรณ์เพื่อให้อยู่เหนือภาพ:

• ตำแหน่ง: Absolute

ภายใต้แท็บ คอนเทนต์, ปรับปรุงสิ่งต่อไปนี้:

• แสดงตัวแบ่ง: NO

• สีพื้นหลัง: rgba(247,37,133,0.8)

จากนั้นอัปเดตความสูงและความกว้างของตัวคั่น:

• ความกว้าง: 100%
• ส่วนสูง: 100%

เมื่อออกแบบเสร็จแล้ว ให้เพิ่มคลาส CSS ต่อไปนี้ไปยังตัวแยก:

• and-overlay-item

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

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

เพิ่มข้อความส่วนหัวซ้อนทับ

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

อัพเดต เนื้อหา ด้วยชื่อ H2:

<h2>Coaching</h2>

ถัดไป อัปเดตป้ายกำกับโมดูลข้อความเพื่อใช้อ้างอิงในอนาคต

ภายใต้แท็บ ออกแบบ, ปรับปรุงสิ่งต่อไปนี้:

• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: เบา

• แบบอักษร: Cormorant Garamond
• น้ำหนักแบบอักษร: ตัวหนา
• ขนาดตัวอักษร: 40px

• ความกว้าง: 100%
• ความกว้างสูงสุด: 85%

ภายใต้แท็บ ระดับสูง, อัพเดทตำแหน่งดังนี้:

• ตำแหน่ง: Absolute
• ที่ตั้ง: top center
• ออฟเซ็ตแนวตั้ง: 10%

หมายเหตุ: อาจจำเป็นต้องปรับออฟเซ็ตแนวตั้งขึ้นอยู่กับขนาดอัตราส่วนภาพของภาพ ตัวอย่างเช่น รูปภาพประเภทแนวนอนอาจต้องการการชดเชยน้อยลง

ถัดไป เพิ่มคลาส CSS ต่อไปนี้ในโมดูลข้อความ:

• CSS Class: et-overlay-item ย้ายลง

นอกจากคลาส “และ-รายการซ้อนทับ”, เราเพิ่มคลาสเพิ่มเติม "ย้ายลง" เพื่อใช้ CSS ที่กำหนดเองเพื่อย้ายส่วนหัวลงเล็กน้อยเมื่อวางเมาส์เหนือ

การสร้างข้อความเนื้อหาที่ซ้อนทับ

ในการสร้างโอเวอร์เลย์ข้อความเนื้อหา เราสามารถทำซ้ำโมดูลข้อความที่ใช้สำหรับโอเวอร์เลย์ส่วนหัว ก่อนอัปเดตพารามิเตอร์ที่ซ้ำกัน ให้เปลี่ยนป้ายกำกับเป็น "Overlay Body"

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

ภายใต้แท็บ ระดับสูงให้เปลี่ยนตำแหน่งที่แน่นอนของโมดูลให้อยู่ตรงกลาง

เนื่องจากเราไม่ต้องการให้ดำเนินการนี้เมื่อวางเมาส์เหนือ (ปรากฏเท่านั้น) ให้อัปเดตคลาส CSS ให้รวมเฉพาะรายการต่อไปนี้:

• CSS Class: et-overlay-item

การสร้างปุ่มโอเวอร์เลย์

ภาพซ้อนทับสุดท้ายในภาพนี้จะเป็นปุ่ม ในการสร้างปุ่ม ให้เพิ่มโมดูลปุ่มใหม่ด้านล่างโมดูลข้อความที่สอง

ก่อนปรับเปลี่ยนการออกแบบ ให้อัพเดตตำแหน่งของปุ่มดังนี้:

• ตำแหน่ง: สัมบูรณ์
• ออฟเซ็ตแนวตั้ง: 10%

ตอนนี้ปุ่มควรอยู่กึ่งกลางที่ด้านล่างของภาพ

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

• คลาส CSS: et-overlay-item move-up

• องค์ประกอบ CSS หลัก:

min-width: 15em;

โปรดทราบว่ามีการเพิ่มคลาสเพิ่มเติมให้กับปุ่มเพื่อเลื่อนขึ้นด้านบนเล็กน้อยเมื่อวางเมาส์ไว้ นี่คือการเสริมการเคลื่อนไหวลงของข้อความส่วนหัวเมื่อวางเมาส์เหนือ

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

• การจัดตำแหน่งปุ่ม: กึ่งกลาง
• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 14px
• สีพื้นหลัง: #4361ee

• ความกว้างของขอบปุ่ม: 0 พิกเซล
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0,1em
• น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• ช่องว่างภายใน: 0,8em (บนและล่าง), 0px (ซ้ายและขวา)

การเพิ่ม CSS แบบกำหนดเองด้วย Code module

เพิ่มโมดูลรหัสด้านล่างปุ่ม

จากนั้นวาง CSS ต่อไปนี้ลงในเนื้อหาโค้ด อย่าลืมใส่โค้ดลงในแท็กสคริปต์ที่จำเป็น

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

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

ทำซ้ำคอลัมน์สำหรับการออกแบบเพิ่มเติม

เปิดเลเยอร์โมดอล ลบสองคอลัมน์ว่างก่อน

จากนั้นทำซ้ำคอลัมน์ที่มีการออกแบบภาพซ้อนทับสองครั้ง คุณควรมีทั้งหมดสามคอลัมน์ที่มีการออกแบบเหมือนกัน

การสร้างการออกแบบภาพซ้อนทับ #2

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

ปรับตำแหน่งข้อความเนื้อหาและคลาส CSS

เปิดการตั้งค่าโมดูลข้อความเนื้อหาซ้อนทับในคอลัมน์ 2 และอัปเดตตำแหน่ง:

• ที่ตั้ง: bottom center
• ออฟเซ็ตแนวตั้ง: 5%

ถัดไป อัปเดตคลาส CSS ด้วยสิ่งต่อไปนี้:

• CSS Class: et-overlay-item move-up

ปรับตำแหน่งปุ่มและคลาส CSS

ถัดไป เปิดการตั้งค่าปุ่มในคอลัมน์ 2 และอัปเดตตำแหน่งตำแหน่งต่อไปนี้:

• ที่ตั้ง: Center

ถัดไป ให้ลบคลาส CSS เนื่องจากเราต้องการให้ปุ่มปรากฏอยู่เสมอ

เปิดการตั้งค่าโมดูลตัวแบ่ง (สีซ้อนทับ) และเปลี่ยนพื้นหลังดังนี้:

• พื้นหลัง: rgba(67,97,238,0.8)

จากนั้นเปิดการตั้งค่าปุ่มและเปลี่ยนสีพื้นหลัง:

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

ปรับรูปภาพและคลาส CSS

จากนั้นเปิดการตั้งค่าภาพและอัปโหลดภาพใหม่ (หากต้องการ)

จากนั้นเพิ่มคลาส CSS ต่อไปนี้ให้กับรูปภาพ:

• CSS Class: et-overlay-image et-scale

โปรดทราบว่านอกเหนือจากคลาส "et-overlay-image" แล้ว ยังมีคลาสเพิ่มเติมที่เรียกว่า "et-scale" ซึ่งจะเพิ่มขนาดของรูปภาพ ทำให้เกิดเอฟเฟกต์ซูมเข้าเมื่อวางเมาส์เหนือ

การสร้างการออกแบบภาพซ้อนทับ #3

ตอนนี้ได้เวลาสร้างการออกแบบภาพซ้อนทับที่สามในคอลัมน์ 3

ปรับเนื้อหาข้อความเนื้อหาซ้อนทับและคลาส CSS

เริ่มต้นด้วยการเปิดการตั้งค่าโมดูลข้อความเนื้อหาการซ้อนทับในคอลัมน์ 3 จากนั้น เพิ่มส่วนหัว H2 เหนือข้อความย่อหน้า ตอนนี้ทั้งคู่จะอยู่ในโมดูล

จากนั้นลบคลาส CSS เพื่อให้ข้อความยังคงปรากฏอยู่เหนือรูปภาพ

ปรับออฟเซ็ตปุ่มและคลาส CSS

เปิดการตั้งค่าโมดูลปุ่มและอัปเดตออฟเซ็ตตำแหน่งแนวตั้ง:

• ออฟเซ็ตแนวตั้ง: 5%

ลบ Overlay Header

ถัดไป ลบโมดูลข้อความส่วนหัวของโอเวอร์เลย์

ปรับสีซ้อนทับและคลาส CSS

เปิดการตั้งค่าโมดูลตัวแบ่ง (สีซ้อนทับ) และอัปเดตพื้นหลังดังต่อไปนี้:

• สีไล่ระดับพื้นหลังด้านซ้าย: rgba(67,97,238,0.8)
• สีไล่ระดับพื้นหลังด้านขวา: rgba(247,37,133,0.8)
• ตำแหน่งเริ่มต้น: 25%
• ตำแหน่งสุดท้าย: 75%

และเนื่องจากเราต้องการให้มองเห็นการซ้อนทับแบบไล่ระดับสีตลอดเวลา ให้ลบคลาส CSS ออก

ปรับคลาส CSS ของรูปภาพ

สุดท้าย เราจะเพิ่มคลาส CSS เพิ่มเติม (“et-rotate”) ให้กับรูปภาพหลักที่จะปรับขนาดและหมุนรูปภาพเมื่อวางเมาส์ไว้

• CSS Class: et-overlay-image et-rotate

สัมผัสสุดท้าย

ก่อนตรวจสอบผลลัพธ์สุดท้าย เราต้องทำการปรับเปลี่ยนบางอย่าง

ลบขอบล่างเริ่มต้นสำหรับโมดูลทั้งหมด

เนื่องจากเราได้อัปเดตระยะขอบด้วยระยะขอบด้านล่างที่ 0px แล้ว เราจึงสามารถขยายระยะขอบนี้ไปยังโมดูลทั้งหมดได้

คลิกขวาที่การตั้งค่าระยะขอบแล้วเลือก “ขยายระยะขอบ”.

จากนั้นเลือกขยายระยะขอบเป็นโมดูลทั้งหมดบนหน้า

ลบโมดูลรหัสที่ซ้ำกัน

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

ผลสุดท้าย

เมื่อการออกแบบทั้งสามของเราเสร็จสมบูรณ์แล้ว มาดูผลลัพธ์สุดท้ายของการออกแบบภาพซ้อนทับของเรากัน

ดาวน์โหลด DIVI ทันที!!!

และนี่คือการออกแบบบนมือถือ เอฟเฟกต์การวางซ้อนจะใช้บนเดสก์ท็อปเท่านั้น ดังนั้น การวางซ้อนจะยังคงมองเห็นได้บนมือถือ

ดาวน์โหลด DIVI ทันที!!!

สรุป

การสร้างภาพซ้อนทับแบบกำหนดเองนั้นสนุกมากจริงๆ มีการออกแบบมากมายให้คุณทดสอบด้วย Divi Builder 

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...