ดาวน์โหลด 5 ภาพเส้นขอบฟรีสำหรับ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ดาวน์โหลดไฟล์รูปภาพฟรี

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

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

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

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

ดาวน์โหลด

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

เข้าใกล้

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

การสร้างการออกแบบโดยรวม

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 300px
• ช่องว่างภายในด้านล่าง: 300px

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

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่

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

เพิ่มกล่องเนื้อหา H2

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

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

จากนั้นทำการเปลี่ยนแปลงการตั้งค่าข้อความ H2 ในแท็บออกแบบ

• แบบอักษรของหัวเรื่อง 2: Abril Fatface
• ขนาดข้อความของหัวเรื่อง 2: 80px (เดสก์ท็อป), 70px (แท็บเล็ต), 50px (โทรศัพท์)

ระยะห่าง

ดำเนินการต่อโดยเพิ่มระยะขอบที่ด้านบนของโมดูลข้อความนี้

• ขอบบน: 150px

เพิ่มโมดูลข้อความลิงก์ไปยังคอลัมน์ 1

เพิ่มลิงค์ไปยังกล่องเนื้อหา

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

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

ถัดไป เปลี่ยนการตั้งค่าข้อความลิงก์ในแท็บออกแบบ

• ลิงก์น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษรของลิงก์: ตัวพิมพ์ใหญ่
• ลิงค์สีข้อความ: #000000
• ขนาดข้อความลิงก์: 21px

ระยะห่าง

เพิ่มระยะขอบด้านบนเพื่อสร้างช่องว่างระหว่างโมดูลข้อความนี้กับโมดูลก่อนหน้าด้วย

• ขอบบน: 100px

ชายแดน

สุดท้าย เพิ่มเส้นขอบด้านล่างที่ละเอียดอ่อนลงในโมดูลข้อความของลิงก์

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #333333

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

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

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

• ขนาดตัวอักษร: 22px (เดสก์ท็อป), 20px (แท็บเล็ต), 18px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.6em
• การวางแนวข้อความ: Justify

ขนาด

ทำให้การตั้งค่าการปรับขนาดตรงกับขนาดหน้าจอต่างๆ ด้วย:

• ความกว้าง: 82% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

และสุดท้าย เพิ่มระยะขอบบนและล่าง

• ขอบบน: 100px
• ขอบล่าง: 100px

การเพิ่มรูปร่างเส้นขอบ

การตั้งค่าพื้นหลังขอบซ้าย

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

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: กลางซ้าย
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

การตั้งค่าพื้นหลังขอบขวา

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

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: ตรงกลางด้านขวา
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ

การตั้งค่าพื้นหลังขอบด้านบน

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

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

การตั้งค่าพื้นหลังขอบล่าง

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

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

ผสมผสานสีโดยใช้การซ้อนทับแบบกึ่งโปร่งใส

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

• สี 1: #ffffff
• สี 2: rgba (255,255,255,0.36)
• ทิศทางการไล่ระดับสี: 141deg
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ดูตัวอย่าง

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

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

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