วิธีสร้างเส้นขอบภาพที่สวยงามโดยใช้ตัวเลือกใหม่ของ Divi

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

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

แอบมอง

ลองดูผลลัพธ์ที่คุณคาดหวังได้จากโพสต์นี้:

วิธีสร้างเส้นขอบภาพที่สวยงามโดยใช้ตัวเลือกใหม่ของ Divi

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

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

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

มาตรฐาน

ตัวอย่างแรกที่เราจะจัดการคือตัวอย่างที่ง่ายที่สุดและเจียมเนื้อเจียมตัวมากที่สุด เส้นขอบภาพการไล่ระดับสีมาตรฐาน ผลลัพธ์ที่เราจะแสดงให้คุณเห็นว่าการสร้างมีลักษณะดังนี้:

แท็บเนื้อหา

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

• สีแรก: #081e8c
• สีที่สอง: #764f9b
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 269deg
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 60%

แท็บออกแบบ

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

ข้าง

ถัดไป เรามีเส้นขอบของรูปภาพที่แสดงเฉพาะที่ด้านซ้ายและด้านขวาของรูปภาพ การใช้เส้นขอบของรูปภาพประเภทนี้ช่วยเพิ่มสัมผัสที่ดีให้กับรูปภาพโดยไม่ต้องโฟกัสที่เส้นขอบมากเกินไป

แท็บเนื้อหา

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

• สีแรก: rgba(255,255,255,0)
• สีที่สอง: #0a8da8
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 166deg
• ตำแหน่งเริ่มต้น: 29%
• ตำแหน่งสุดท้าย: 52%

แท็บออกแบบ

ในแท็บการออกแบบ สิ่งเดียวที่คุณต้องมีคือ '10px' ของช่องว่างภายในสำหรับด้านขวาและด้านซ้าย

มุมเดียว

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

แท็บเนื้อหา

สำหรับตัวอย่างรูปภาพที่สาม ให้ใช้พื้นหลังแบบไล่ระดับสีต่อไปนี้:

• สีแรก: rgba(58,8,1,0.58)
• สีที่สอง: rgba(41,196,169,0)
• ทิศทางการไล่ระดับสี: 152deg
• ตำแหน่งเริ่มต้น: 34%
• ตำแหน่งสุดท้าย: 28%

แท็บออกแบบ

จากนั้นเพิ่ม '20px' ให้กับแต่ละช่องว่างภายในด้วย

เส้นขอบรูปภาพ & พื้นหลังไล่ระดับสี

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

ไล่โทนสีที่ละเอียดอ่อน

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

แท็บเนื้อหา

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

• สีแรก: rgba(255,255,255,0)
• สีที่สอง: #777777
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 65%
• ตำแหน่งสุดท้าย: 78%

แท็บออกแบบ

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

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #777777
• ความกว้างของเส้นขอบ: 3px
• สไตล์เส้นขอบ: ของแข็ง

สุดท้าย เพิ่มช่องว่างภายในขนาด '7px' ให้กับตัวเลือกช่องว่างภายในทั้งหมด

รูปร่าง

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

แท็บเนื้อหา

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

• สีแรก: rgba(53,0,188,0.1)
• สีที่สอง: #680061
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 80%
• ตำแหน่งสุดท้าย: 80%

แท็บออกแบบ

ไปที่แท็บออกแบบและใช้เส้นขอบต่อไปนี้:

• ใช้เส้นขอบ: ใช่
• สีเส้นขอบ: #9a00bc
• ความกว้างของเส้นขอบ: 1px
• สไตล์เส้นขอบ: ของแข็ง

เลื่อนลงและเพิ่มช่องว่างภายในต่อไปนี้ให้กับรูปภาพ:

• ด้านบน: 7px
• ขวา: 5px
• ด้านล่าง: 7px
• ซ้าย: 5px

ชายแดนคู่

การใช้เส้นขอบคู่ร่วมกับพื้นหลังแบบไล่ระดับสามารถให้ผลลัพธ์ที่น่าทึ่งได้เช่นกัน ลองดูสิ:

แท็บเนื้อหา

สีพื้นหลังไล่ระดับที่เราใช้ในตัวอย่างนี้มีดังต่อไปนี้:

• สีแรก: rgba (224,43,32,0.61)
• สีที่สอง: rgba(12,113,195,0.87)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 71%
• ตำแหน่งสุดท้าย: 93%

แท็บออกแบบ

ดำเนินการต่อ ใช้การตั้งค่าต่อไปนี้สำหรับหมวดหมู่ย่อยชายแดน:

• ใช้เส้นขอบ: ใช่
• สีของเส้นขอบ: #f4f4f4 (จับคู่กับสีพื้นหลังส่วนของคุณ)
• ความกว้างของเส้นขอบ: 8px
• สไตล์เส้นขอบ: สองเท่า

และเพิ่ม '10px' ที่ด้านบน ด้านล่าง ด้านขวา และด้านซ้ายของภาพ

มุมสามเหลี่ยม

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

แท็บเนื้อหา

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

• สีแรก: rgba(163,103,6,0)
• สีที่สอง: #e09900
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 97%
• ตำแหน่งสุดท้าย: 97%

แท็บออกแบบ

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

• ใช้เส้นขอบ: ใช่
• สีขอบ: #e09900
• ความกว้างของเส้นขอบ: 2px
• สไตล์เส้นขอบ: ประ

สุดท้ายนี้ เราจำเป็นต้องมีช่องว่างภายในขนาด '8px' สำหรับช่องว่างด้านบน ด้านล่าง ด้านซ้าย และด้านขวา

รูปแบบ & พื้นหลังไล่ระดับสี

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

ขี้เล่น

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

แท็บเนื้อหา

สำหรับตัวอย่างสุดท้าย เราจะใช้การตั้งค่าพื้นหลังการไล่ระดับสีต่อไปนี้:

• สีแรก: rgba (4,49,96,0.51)
• สีที่สอง: rgba(119,74,15,0.51)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 0%
• ตำแหน่งสุดท้าย: 100%

แท็บออกแบบ

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ทวีคูณ

สิ่งสุดท้ายที่คุณต้องทำคือเพิ่มช่องว่างภายในขนาด '12px' ที่ด้านบน ด้านล่าง ด้านขวา และด้านซ้ายของภาพ

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

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

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

ภาพเด่นโดย Mr Aesthetics / shutterstock.com