ดาวน์โหลดภาพซ้อนทับฟรี 9 ภาพสำหรับ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

โทรศัพท์

ดาวน์โหลดรูปภาพซ้อนทับฟรี

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

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

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

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

ดาวน์โหลด

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

เข้าใกล้

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

การแก้ไขภาพซ้อนทับที่มีรูปร่างเป็นสีพื้นหลังของส่วนด้วย Adobe Illustrator

เปิดไฟล์ Illustrator ในโฟลเดอร์ดาวน์โหลด

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

เลือกภาพซ้อนทับรูปร่างของทางเลือก

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

เปลี่ยนสีให้ตรงกับสีพื้นหลังของส่วน

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

เลือก Artboard

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

บันทึกการซ้อนทับรูปภาพ PNG สำหรับ Web

และบันทึกเป็นไฟล์ภาพ PNG สำหรับเว็บโดยไปที่ File > Export > Save for Web

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

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

เพิ่มมาตราใหม่

ถึงเวลาเปลี่ยนไปใช้ Divi และสร้างผลลัพธ์! สร้างหน้าใหม่หรือเปิดหน้าที่มีอยู่แล้วเพิ่มส่วนปกติใหม่

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัปโหลดการวางซ้อนรูปภาพที่มีรูปทรง

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

พื้นหลังไล่โทนสี

ไปข้างหน้าและเพิ่มพื้นหลังการไล่ระดับสีที่คุณเลือกต่อไป

• สี 1: #aa2bff
• สี 2: #09f7eb

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านล่าง
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

เพิ่มโมดูลข้อความชื่อเรื่องลงในคอลัมน์ 2

เพิ่มเนื้อหา

มาต่อกันที่คอลัมน์ที่สองกัน ที่นี่โมดูลแรกที่เราจะต้องมีคือโมดูลข้อความชื่อ เพิ่มเนื้อหาที่เลือก

การตั้งค่าข้อความ

จากนั้นไปที่การตั้งค่าข้อความส่วนหัวและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรของหัวเรื่อง 2: Antic Didone
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 ขนาดข้อความ: 45px
• หัวเรื่อง 2 ระยะห่างตัวอักษร: -2px

ระยะห่าง

เพิ่มระยะขอบบนที่กำหนดเองด้วย

• ขอบบน: 100px

เพิ่มโมดูลข้อความคำอธิบายลงในคอลัมน์ 2

เพิ่มเนื้อหา

โมดูลที่สองที่เราจะต้องมีคือโมดูลข้อความคำอธิบาย ป้อนเนื้อหาที่เลือก

การตั้งค่าข้อความ

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

• การวางแนวข้อความ: Justify

ขนาด

เปลี่ยนความกว้างในการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 63%

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

เพิ่มสำเนา

โมดูลถัดไปและโมดูลสุดท้ายที่เราต้องการคือโมดูลปุ่ม ป้อนเนื้อหาที่เลือก

การตั้งค่าปุ่ม

ดำเนินการต่อโดยไปที่การตั้งค่าปุ่มและเปลี่ยนรูปลักษณ์ของปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 17px
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับสี 1: #aa2bff
• ไล่ระดับสี 2: #09f7eb
• ทิศทางการไล่ระดับสี: 111deg

• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: -2px
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

เพิ่มช่องว่างภายในแบบกำหนดเองเพิ่มเติมให้กับปุ่มด้วย

• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 50px
• ความแรงของการกระจายเงาของกล่อง: -5px

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

โทรศัพท์

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

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