ภาพพื้นหลังและเส้นขอบยังคงเป็นองค์ประกอบการออกแบบยอดนิยมเมื่อสร้างเว็บไซต์ การใช้ภาพพื้นหลังที่เหมาะสมสามารถเพิ่มบุคลิกและสไตล์ให้กับไซต์ของคุณได้โดยไม่ต้องเสียเวลาและเงินกับกราฟิกที่กำหนดเอง และเส้นขอบก็มีประโยชน์ในการเพิ่มโครงสร้างให้กับคุณ เนื้อหา.
วันนี้เราจะนำสองสิ่งนี้มารวมกันโดยการออกแบบภาพพื้นหลังเป็นเส้นขอบ Divi มีชุดตัวเลือกที่มีประโยชน์สำหรับการปรับแต่งภาพพื้นหลัง ทำให้ง่ายต่อการออกแบบภาพพื้นหลังสำหรับการออกแบบเส้นขอบที่ไม่ซ้ำใคร ซึ่งช่วยให้เราสามารถรวมสี การไล่ระดับสี เงากล่อง และโหมดการผสมเข้าด้วยกันในรูปแบบที่สร้างสรรค์ได้ทุกประเภท
ขอเริ่มต้น
สิ่งที่คุณต้องเริ่มต้น
ในการเริ่มต้นคุณต้องมีสิ่งต่อไปนี้:
- Le ธีม Divi ติดตั้งและใช้งานอยู่
- หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นบน front-end (ตัวสร้างภาพ)
- รูปภาพที่จะใช้สำหรับ เนื้อหา สมมติ
หลังจากนั้นคุณจะได้ผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi.
เคล็ดลับทั่วไปสำหรับการสร้างรูปแบบขอบภาพพื้นหลัง
ก่อนที่คุณจะเริ่มสร้างนี่คือคำแนะนำทั่วไปที่ควรทราบเมื่อสร้างรูปแบบเส้นขอบของภาพพื้นหลัง
# 1 เลือกภาพที่มีพื้นผิวจำนวนมาก
โดยส่วนใหญ่คุณจะต้องการให้เส้นขอบของคุณแคบลง ซึ่งหมายความว่าคุณจะไม่สามารถเห็นภาพได้มากนัก จึงเป็นประโยชน์ในการใช้รูปภาพที่มีพื้นผิวมาก ตัวอย่างเช่นคุณสามารถใช้ภาพถ่ายทิวทัศน์ช่อดอกไม้หรือหอคอยสูง นี่คือภาพบางส่วนที่ฉันใช้สำหรับบทช่วยสอนนี้
# 2 ใช้การไล่ระดับสีและความโปร่งใสกับเส้นขอบของภาพพื้นหลัง
บางครั้งภาพพื้นหลังอาจเป็นเส้นขอบที่ดีสำหรับตัวมันเอง เนื้อหา. แต่โดยส่วนใหญ่ คุณจะต้องเพิ่มการซ้อนทับให้กับภาพพื้นหลังเพื่อให้ได้สีหรือทำให้พื้นหลังเข้มขึ้นหรือจางลง การไล่ระดับสีพื้นหลังเป็นวิธีที่ดีในการเพิ่มเลเยอร์ให้กับภาพพื้นหลังของคุณ และสร้างการออกแบบเส้นขอบที่เป็นเอกลักษณ์
# 3 ใช้โหมดผสาน
การใช้โหมดผสมผสานกับภาพพื้นหลังของคุณสามารถใช้สีและพื้นผิวที่เป็นเอกลักษณ์กับลวดลายเส้นขอบได้ สิ่งที่คุณต้องทำคือเพิ่มสีพื้นหลังหรือการไล่ระดับสีด้วยภาพพื้นหลังของคุณจากนั้นเลือกโหมดผสมผสานสำหรับภาพพื้นหลัง สีความสว่างการคูณและหน้าจอเป็นโหมดการผสมที่ยอดเยี่ยมสำหรับเส้นขอบของภาพพื้นหลัง
ใช้ตัวเลือกมุมโค้งมนสำหรับรูปร่างที่ไม่ซ้ำ
เส้นขอบทั้งหมดไม่จำเป็นต้องมีขอบตรง ผสมนิดหน่อย! ตัวเลือกมุมโค้งมน Divi ช่วยให้คุณสามารถจัดวางมุมเหล่านี้ได้อย่างสร้างสรรค์
ใช้ภาพพื้นหลังพารัลแลกซ์เป็นเส้นขอบ
สิ่งที่ยอดเยี่ยมเกี่ยวกับพารัลแลกซ์คือทำให้การออกแบบมีชีวิตชีวาด้วยการเคลื่อนไหว นอกจากนี้หากคุณใช้ภาพพื้นหลังพร้อมพารัลแลกซ์สำหรับการออกแบบเส้นขอบคุณสามารถสร้างการเคลื่อนไหวที่ละเอียดอ่อนโดดเด่นและทำให้เนื้อหาของคุณโดดเด่นได้
การออกแบบเส้นขอบภาพพื้นหลังใน Divi
ตอนนี้เราเข้าใจความคิดทั่วไปที่สร้างการสร้างลวดลายเส้นขอบของภาพพื้นหลังแล้วลองนึกภาพสองสามภาพด้วยกัน เราจะสร้าง 2 รุ่นที่แตกต่างกัน แต่ละคนจะมีโมดูลการนำเสนอขั้นพื้นฐานเพื่อใช้เป็นเนื้อหาที่สมมติขึ้น และเราจะใช้พารามิเตอร์คอลัมน์เพื่อเพิ่มเส้นขอบภาพพื้นหลังของโมดูล
เริ่มจากการออกแบบครั้งแรกของเรา
#1 ภาพพื้นหลังเส้นขอบ
การออกแบบครั้งแรกนี้มีเส้นขอบของภาพพื้นหลังที่แคบพร้อมกับเงาของพื้นที่เพื่อให้ดูเหมือนกรอบสำหรับเนื้อหามากขึ้น
นี่คือวิธีการออกแบบ
ขั้นแรกให้เพิ่มแถวสองคอลัมน์ในส่วนปกติ
เพิ่มโมดูลสรุป
จากนั้นเพิ่มโมดูลประกาศแจ้งเตือนในคอลัมน์ด้านซ้าย
เมื่อคำแนะนำเข้าที่แล้วให้เปิดการตั้งค่าข้อความระเบิดและแยกภาพเริ่มต้นเพื่อให้มองเห็นเฉพาะชื่อเรื่องและเนื้อหา
จากนั้นให้ข้อความของคุณเป็นพื้นหลังสีขาว
จากนั้นอัพเดตพารามิเตอร์การออกแบบการนำเสนอดังต่อไปนี้:
- ชื่อข้อความ: Oswald
- ตำรวจเมือง: Lato
- มาร์จิ้น 5% ที่ด้านบน, 5% ที่ด้านล่าง, 5% ทางด้านซ้าย, 5% ทางด้านขวา
- เบาะ: 7% ที่ด้านบน, 7% ที่ด้านล่าง, 10% ที่ด้านซ้าย, 10% ที่ด้านขวา
- มุมโค้งมน: 20px ที่มุมขวาบน, 20px ที่มุมซ้ายล่าง
- Box Shadow: ดูภาพหน้าจอ
เพิ่มภาพพื้นหลังในคอลัมน์
สิ่งนี้จะดูแลโมดูลการนำเสนอของเรา ตอนนี้ขอเพิ่มเส้นขอบภาพพื้นหลังของเรา ในการดำเนินการนี้เราจะเพิ่มภาพพื้นหลังลงในคอลัมน์ที่มีโมดูล Blurb เปิดการตั้งค่าแถวจากนั้นการตั้งค่าสำหรับคอลัมน์ 1 และเพิ่มพื้นหลังต่อไปนี้:
- ภาพพื้นหลัง: [อัปโหลดภาพที่คุณเลือก]
- สีพื้นหลัง: #303a7a
- ภาพพื้นหลังผสม: ความสว่าง
จากนั้นอัปเดตมุมโค้งมนและเงาของกล่องดังนี้:
- มุมโค้งมน: 20px ที่มุมขวาบน, 20px ที่มุมซ้ายล่าง
- Box Shadow: ดูภาพหน้าจอ
ผลสุดท้าย
ตอนนี้ตรวจสอบการออกแบบขั้นสุดท้าย
ภาพพื้นหลังเส้นขอบ # 2
การออกแบบครั้งต่อไปเน้นความจริงที่ว่าการใช้ภาพที่มีพื้นผิวสูงสามารถสร้างเส้นขอบที่สวยงามโดยเฉพาะเมื่อคุณรวมเข้ากับโหมดการผสมภาพ
นี่คือวิธีการออกแบบ
เพิ่มโมดูล Blurb
ในการสร้างการออกแบบเราจะเพิ่มข้อความนำเสนอลงในคอลัมน์ 2 ของแถวเดียวกันที่มีการออกแบบ # 1 ไปข้างหน้าและคัดลอกโมดูลเค้าโครงการออกแบบ # 1 แล้ววางลงในคอลัมน์ 2 จากนั้น อัปเดตการตั้งค่าโมดูลการนำเสนอดังต่อไปนี้:
- มุมโค้งมน: เรียกคืนการตั้งค่าเริ่มต้น
- อัตรากำไรขั้นต้น: 10% ที่ด้านบน, 10% ที่ด้านล่าง, 10% ทางด้านซ้าย, 10% ที่ด้านขวา
- เบาะ: 15% ที่ด้านบน, 15% ที่ด้านล่าง, 10% ที่ด้านซ้าย, 10% ที่ด้านขวา
- ความกว้างของเส้นขอบ: 1px
- สีเส้นขอบ: #ffffff
เพิ่มภาพพื้นหลังในคอลัมน์
ด้วยโมดูลของเราให้เปิดการตั้งค่าบรรทัดและเพิ่มการไล่ระดับสีพื้นหลังให้กับคอลัมน์ 2
- การไล่ระดับพื้นหลังด้านซ้าย: #f7e0a5
- ไล่ระดับสีพื้นหลังด้านขวาสี: rgba (237,240,0,0.79)
- ทิศทางการไล่ระดับสี: 90deg
- ตำแหน่งเริ่มต้น: 50%
- อันดับสุดท้าย: 0%
จากนั้นเพิ่มภาพพื้นหลังที่มีเอฟเฟกต์การไล่ระดับสีที่ดี
- ภาพพื้นหลัง: [ดาวน์โหลดภาพ]
- ผสมภาพพื้นหลัง: สี
อย่างที่คุณเห็นโหมดผสมผสานสีจะรักษาความสว่างของการไล่ระดับสีสองสีด้านหลังภาพเพื่อสร้างรูปแบบเส้นขอบของภาพที่สวยงามด้วยสีที่นุ่มนวล
ผลสุดท้าย
ค้นพบผลลัพธ์สุดท้ายของการออกแบบ
ความคิดล่าสุด
การสร้างเส้นขอบด้วยรูปภาพเป็นวิธีง่ายๆในการเพิ่มความสวยงามและบุคลิกภาพให้กับงานออกแบบของคุณ การออกแบบที่เน้นในบทช่วยสอนนี้จัดทำขึ้นเพื่อเน้นความเป็นไปได้ที่มีให้กับ Divi ในการออกแบบเส้นขอบที่ไม่เหมือนใคร ดังนั้นด้วยการผสมสีที่แตกต่างกันการออกแบบจึงไร้ขีด จำกัด ดังนั้นจับภาพและสำรวจเพิ่มเติมเกี่ยวกับการออกแบบเส้นขอบด้วยภาพบน Divi
เพื่อสุขภาพของคุณ