วิธีรวมพื้นหลังของแถวและคอลัมน์อย่างสร้างสรรค์ด้วยตัวเลือกใหม่ของ Divi

เผยแพร่แล้ว: 2017-10-02

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

ผลลัพธ์

หากคุณปฏิบัติตามบทช่วยสอนนี้ทีละขั้นตอน คุณจะสามารถบรรลุผลดังต่อไปนี้:

การไล่ระดับสี

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

เปลี่ยนไปใช้ Visual Builder

สร้างหน้าใหม่และเปิดใช้งาน Divi Builder และสลับไปยัง Visual Builder

การไล่ระดับสี

สร้างมาตรา

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

สีแรก: rgba(61,65,86,0.59)
สีที่สอง: #f7f7f7
ประเภทการไล่ระดับสี: เรเดียล
ทิศทางเรเดียล: ด้านล่าง
ตำแหน่งเริ่มต้น: 31%
ตำแหน่งสุดท้าย: 76%

การไล่ระดับสี

เพิ่มแถวหนึ่งคอลัมน์

สิ่งต่อไปที่เราจะต้องทำคือเพิ่มแถวหนึ่งคอลัมน์ในส่วน แถวนี้จะแสดงถึงส่วนต่อไปนี้ของผลลัพธ์สุดท้ายของเรา:

การไล่ระดับสี

การตั้งค่าแถวและคอลัมน์

ทำให้แถวเต็มความกว้าง

ไปข้างหน้าและทำให้แถวเต็มความกว้างภายในแท็บออกแบบ

การตั้งค่าพื้นหลังแถว

จากนั้น คุณสามารถกลับไปที่แท็บเนื้อหาและเพิ่มพื้นหลังการไล่ระดับสีต่อไปนี้:

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

อัปโหลดภาพพื้นหลัง (ในกรณีนี้คือรูปแบบ) และเลือก 'คูณ' เป็นภาพพื้นหลังแบบผสมผสานของคุณ

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

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

สีแรก: rgba(255,255,255,0.15)
สีที่สอง: rgba(214,44,104,0)
ประเภทการไล่ระดับสีของคอลัมน์: เชิงเส้น
ทิศทางการไล่ระดับของคอลัมน์: 161deg
ตำแหน่งเริ่มต้นของคอลัมน์: 43%
ตำแหน่งสิ้นสุดคอลัมน์: 43%

ระยะห่าง

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

ด้านบน: 20px
ขวา: 30px
ซ้าย: 30px

และช่องว่างภายในคอลัมน์ของคุณเช่นกัน:

ด้านบน: 200px
ด้านล่าง: 200px

เพิ่มโมดูลข้อความ

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

แบบอักษรข้อความ: Playfair Display
ขนาดตัวอักษรของข้อความ: 77px (เดสก์ท็อป), 64 (แท็บเล็ต), 51 (โทรศัพท์)
สีข้อความ: #f7f7f7
ความสูงของบรรทัดข้อความ: 1.7 (เดสก์ท็อป), 1em (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลตัวแบ่ง

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

การไล่ระดับสี

เลื่อนลงไปที่แท็บเดียวกันและใช้ 'rgba(114,57,114,0.91)' เป็นสีพื้นหลัง

การไล่ระดับสี

ไปที่แท็บ Design แล้วเลือก '#3d4156' เป็นสีตัวแบ่งของคุณ

การไล่ระดับสี

เปิดหมวดหมู่ย่อยของ Styles และใช้ 'Solid' เป็นสไตล์ Divider ของคุณและ 'Top' เป็นตำแหน่ง Divider ของคุณ

การไล่ระดับสี

ถัดไป กำหนดการตั้งค่าต่อไปนี้ให้กับหมวดหมู่ย่อยการปรับขนาด:

น้ำหนักตัวแบ่ง: 11px
ส่วนสูง: 23px
ความกว้าง: 0%
การจัดตำแหน่งโมดูล: ซ้าย

การไล่ระดับสี

สุดท้ายแต่ไม่ท้ายสุด ให้เพิ่มช่องว่างภายในด้านซ้าย '48%' ให้กับตัวเลือก Custom Padding การไล่ระดับสี