วิธีเพิ่มรูปแบบพื้นหลังขนาดที่กำหนดเองใน Divi

Rifat May 20, 2022

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

ตัวอย่างการออกแบบ

Let’s ดูว่า we’ จะทำอะไรก่อนที่จะเข้าสู่บทช่วยสอน ที่นี่’ ดูที่รูปแบบพื้นหลังแต่ละแบบที่เราจะสร้าง

นี่คือการออกแบบของเรา 1

และนี่คือลักษณะการออกแบบ 2

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

รูปแบบพื้นหลังขนาดที่กำหนดเอง

สำหรับตัวอย่าง เราจะใช้ส่วนแรกจาก หน้า Landing Page ฟรีของ Acai Bowl ที่มีอยู่ใน Divi We’ll เพิ่มรูปแบบพื้นหลังและปรับแต่งให้เหมาะกับตัวเลือกอุปกรณ์ต่างๆ ส่วนสำหรับตัวอย่างของฉันใช้สีพื้นหลัง #f9f3fd เราจะคงสีฉากหลังปัจจุบันไว้ แต่เพิ่มรูปแบบเข้าไป

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

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

ไปที่แท็บรูปแบบพื้นหลังสำหรับเดสก์ท็อป คลิกที่ "เพิ่มรูปแบบพื้นหลัง"

กดที่ช่องแบบเลื่อนลงแล้วคุณจะเห็นรูปแบบมากมาย

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

การตั้งค่าสำหรับรูปแบบพื้นหลัง

สำหรับเวอร์ชันเดสก์ท็อป ตอนนี้ให้เปลี่ยนสีลวดลายเพื่อให้สามารถผสมผสานกันได้ดีโดยไม่มีพื้นหลัง

  • แบบสี: rgba(68,40,84,0.13)

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

  • ขนาดรูปแบบ: ขนาดที่กำหนดเอง
  • ส่วนสูง: 41vh
  • แหล่งกำเนิดซ้ำ: ศูนย์กลางด้านล่าง
  • ทำซ้ำ: ทำซ้ำ X (แนวนอน)

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

ตอนนี้ เพียงแค่เปลี่ยนความสูงของรูปแบบ

  • ความสูงของรูปแบบ: 30vh

สุดท้ายนี้ สำหรับอุปกรณ์พกพา เรามาอัปเดตรูปแบบพื้นหลังขนาดกำหนดเองสำหรับโทรศัพท์กัน

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

  • ความสูงของรูปแบบ: 25vh

การออกแบบขั้นสุดท้ายสำหรับตัวอย่างแรกของเราจึงเป็นแบบนี้

การออกแบบทางเลือก

ต่อไปนี้คือตัวอย่างการออกแบบอื่นๆ ที่คุณสามารถสร้างได้ง่ายๆ สำหรับ ตัวอย่างนี้ ทำการเปลี่ยนแปลงต่อไปนี้

  • รูปแบบพื้นหลัง: ลายจุด
  • สี: #ffffff
  • ขนาดรูปแบบ: ขนาดที่กำหนดเอง
  • ความสูงของรูปแบบเดสก์ท็อป: 400vh
  • ความสูงของรูปแบบแท็บเล็ต: 300vh
  • ความสูงของรูปแบบมือถือ: 200vh
  • แหล่งกำเนิดซ้ำ: Center

คำตัดสินสุดท้าย

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

นอกจากนี้ อย่าลืมดู บทแนะนำ Divi ของเราสำหรับความช่วยเหลือในโครงการในอนาคต

Divi WordPress Theme