วิธีสร้างการออกแบบเส้นขอบภาพพื้นหลังใน Divi

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

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

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

แอบมอง

นี่คือการออกแบบเส้นขอบภาพพื้นหลังที่เราจะสร้างร่วมกัน

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

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

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

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

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

ดาวน์โหลด

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

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

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

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

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. รูปภาพที่จะใช้สำหรับเนื้อหาจำลอง

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

เคล็ดลับทั่วไปสำหรับการสร้างการออกแบบเส้นขอบภาพพื้นหลัง

ก่อนที่เราจะเริ่มสร้าง ต่อไปนี้เป็นเคล็ดลับทั่วไปบางประการที่ควรคำนึงถึงเมื่อสร้างการออกแบบเส้นขอบของภาพพื้นหลัง

#1 เลือกรูปภาพที่มีพื้นผิวมากมาย

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

#2 ใช้การไล่ระดับสีและความโปร่งใสกับเส้นขอบรูปภาพพื้นหลังของคุณ

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

#3 ใช้โหมดผสมผสาน

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

ใช้ตัวเลือกมุมโค้งมนสำหรับรูปร่างที่ไม่ซ้ำ

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

ใช้ภาพพื้นหลังพารัลแลกซ์เป็นเส้นขอบ

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

การออกแบบเส้นขอบภาพพื้นหลังใน Divi

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

เริ่มต้นด้วยการออกแบบแรกของเรา

การออกแบบเส้นขอบภาพพื้นหลัง #1

การออกแบบครั้งแรกนี้มีเส้นขอบรูปภาพพื้นหลังแคบที่มีเงากล่องเพื่อทำให้ดูเหมือนเป็นกรอบสำหรับเนื้อหามากขึ้น

นี่คือวิธีการออกแบบ

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

เพิ่มโมดูล Blurb

จากนั้นเพิ่มโมดูลการนำเสนอลงในคอลัมน์ด้านซ้าย

เมื่อการนำเสนออยู่ในสถานที่แล้ว ให้เปิดการตั้งค่าการนำเสนอและนำภาพเริ่มต้นออกเพื่อให้มองเห็นเฉพาะชื่อเรื่องและเนื้อหาเนื้อหา

ถัดไป กำหนดสีพื้นหลังสีขาวให้กับการนำเสนอของคุณ

จากนั้นอัปเดตการตั้งค่าการออกแบบประกาศดังนี้:

• แบบอักษรของชื่อเรื่อง: Oswald
• แบบอักษรของร่างกาย: Lato
• Margin 5% บน, 5% ล่าง, 5% ซ้าย, 5% ขวา
• เบาะ: 7% บน, 7% ล่าง, 10% ซ้าย, 10% ขวา
• มุมโค้งมน: 20px บนขวา, 20px ล่างซ้าย
• กล่องเงา: ดูภาพหน้าจอ

เพิ่มภาพพื้นหลังให้กับคอลัมน์

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

• ภาพพื้นหลัง: [อัปโหลดภาพที่คุณเลือก]
• สีพื้นหลัง: #303a7a
• การผสมผสานภาพพื้นหลัง: ความส่องสว่าง

จากนั้นอัปเดตมุมโค้งมนและเงาของกล่องดังนี้:

• มุมโค้งมน: 20px บนขวา, 20px ล่างซ้าย
• กล่องเงา: ดูภาพหน้าจอ

ผลสุดท้าย

ตรวจสอบการออกแบบขั้นสุดท้าย

การออกแบบเส้นขอบภาพพื้นหลัง #2

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

นี่คือวิธีการออกแบบ

เพิ่มโมดูล Blurb

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

• มุมโค้งมน: คืนค่าเป็นค่าเริ่มต้น
• ระยะขอบ: 10% บน, 10% ล่าง, 10% ซ้าย, 10% ขวา
• Padding: บน 15%, 15% ล่าง, 10% ซ้าย, 10% ขวา
• ความกว้างของเส้นขอบ: 1px
• สีเส้นขอบ: #ffffff

เพิ่มภาพพื้นหลังให้กับคอลัมน์

เมื่อใช้งานโมดูลของเราแล้ว ให้เปิดการตั้งค่าแถวและเพิ่มการไล่ระดับสีพื้นหลังลงในคอลัมน์ 2

• พื้นหลังไล่ระดับสีซ้าย: #f7e0a5
• พื้นหลังไล่ระดับสีขวาสี: rgba(237,240,0,0.79)
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 0%

จากนั้นเพิ่มภาพพื้นหลังด้วยเอฟเฟกต์การผสมสีที่สวยงาม

• ภาพพื้นหลัง: [อัพโหลดรูปภาพ]
• การผสมผสานภาพพื้นหลัง: สี

อย่างที่คุณเห็น โหมดการผสมสีจะรักษาความส่องสว่างของสีไล่ระดับสองสีที่อยู่เบื้องหลังรูปภาพ เพื่อสร้างการออกแบบเส้นขอบรูปภาพที่สวยงามด้วยสีที่นุ่มนวล

ผลสุดท้าย

ตรวจสอบผลลัพธ์สุดท้ายของการออกแบบ

การออกแบบเส้นขอบภาพพื้นหลัง #3

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

นี่คือวิธีการออกแบบ

สำหรับผู้เริ่มต้น ให้เพิ่มแถวสองคอลัมน์ใหม่ด้านล่างแถวแรก และคัดลอกโมดูลการนำเสนอจากการนำเสนอในคอลัมน์ 1 ของแถวบนสุด และวางลงในคอลัมน์ 1 ของแถวใหม่

จากนั้นอัปเดตโมดูลการนำเสนอดังนี้

• สีพื้นหลัง: #333344
• สีข้อความ: เบา
• ระยะขอบ: 10% บน, 10% ล่าง, 10% ซ้าย, 10% ขวา
• เบาะ: 10% บน 10% ล่าง
• มุมโค้งมน: 20px
• กล่องเงา: none

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

• ภาพพื้นหลัง: [อัพโหลดรูปภาพ]
• ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
• วิธีพารัลแลกซ์: ทรูพารัลแลกซ์
• มุมโค้งมน: 20px
• กล่องเงา: ดูภาพหน้าจอ

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

ในการทำให้ภาพพื้นหลังที่มีพารัลแลกซ์จางลง เราสามารถเพิ่มเงากล่องให้กับการนำเสนอที่จะทำหน้าที่เป็นแสงซ้อนทับ

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

• กล่องเงา: ดูภาพหน้าจอ
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 200px
• สีเงา: #ffffff

การออกแบบขั้นสุดท้าย

ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายกัน

การออกแบบเส้นขอบภาพพื้นหลัง #4

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

เพิ่มโมดูล Blurb

ในการเริ่มต้น ให้คัดลอกโมดูลการนำเสนอในคอลัมน์ 2 ของแถวบนสุด และวางลงในคอลัมน์ 2 ของแถวที่สอง

เมื่อเสร็จแล้ว ให้อัปเดตการตั้งค่าโมดูลการนำเสนอดังนี้:

• เส้นขอบ: [นำเส้นขอบออกโดยคืนค่าค่าเริ่มต้นของเส้นขอบ]
• กล่องเงา: none
• Margin: 5% บน, 5% ล่าง, 0% ซ้าย, 0% ขวา

เพิ่มเส้นขอบภาพพื้นหลัง

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

• ภาพพื้นหลัง: [อัพโหลดรูปภาพ]
• ไล่ระดับพื้นหลังซ้ายสี: #141777
• พื้นหลังไล่ระดับสีขวา: #ffb7eb
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 0%

• ภาพพื้นหลัง: [อัพโหลดรูปภาพ]
• การผสมผสานภาพพื้นหลัง: ความส่องสว่าง

การออกแบบขั้นสุดท้าย

ตรวจสอบการออกแบบขั้นสุดท้าย

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

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

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

ไชโย!