ดาวน์โหลดภาพพื้นหลัง 10 ส่วนของเหลวฟรีสำหรับ Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ดาวน์โหลดภาพพื้นหลังมาตราของไหลได้ฟรี

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

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

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

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

ดาวน์โหลด

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

สร้างมาตราใหม่

เพิ่มมาตราปกติใหม่

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เพิ่มค่าการเติมลงในการตั้งค่าการเว้นวรรคด้วย

• ช่องว่างภายในด้านบน: 312px
• ช่องว่างภายในด้านล่าง: 312px
• ช่องว่างภายในคอลัมน์: 50px
• ช่องว่างภายในคอลัมน์ด้านขวา: 50px

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

เพิ่มเนื้อหา

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือโมดูลข้อความ ไปข้างหน้าและเพิ่มเนื้อหาลงในกล่องเนื้อหา โดยเฉพาะอย่างยิ่งชื่อ H2 และย่อหน้า

การตั้งค่าข้อความ H2

ไปที่การตั้งค่าข้อความ H2 ถัดไป และใช้การเปลี่ยนแปลงต่อไปนี้:

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• หัวข้อที่ 2 น้ำหนักแบบอักษร: Ultra Bold
• หัวเรื่อง 2 สีข้อความ: #FFFFFF
• ขนาดข้อความของหัวเรื่อง 2: 82px (เดสก์ท็อป), 60px (แท็บเล็ต), 40px (โทรศัพท์)
• ส่วนหัว 2 ความสูงของบรรทัด: 1.4em

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความโดยรวมด้วย

• สีข้อความ: #FFFFFF
• ขนาดตัวอักษร: 16px
• ความสูงของบรรทัดข้อความ: 1.9em
• การวางแนวข้อความ: ศูนย์

ขนาด

ดำเนินการต่อโดยลดความกว้างของโมดูลนี้บนเดสก์ท็อป

• ความกว้าง: 58% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่มโมดูลปุ่ม

เพิ่มสำเนา

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

การจัดตำแหน่งปุ่ม

เปลี่ยนการจัดตำแหน่งปุ่มถัดไป

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

จากนั้นไปที่การตั้งค่าปุ่มและทำการเปลี่ยนแปลงบางอย่าง

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 18px
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #FFFFFF
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: -1px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

สุดท้ายแต่ไม่ท้ายสุด ให้เพิ่มช่องว่างระหว่างโมดูลก่อนหน้ากับโมดูลนี้โดยเพิ่มระยะขอบด้านบน

• ขอบบน: 25px

พื้นหลังส่วนของของเหลว #1

พื้นหลังไล่ระดับมาตรา

ใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับส่วนของคุณ:

• สี 1: #000000
• สี 2: #2d5b9b
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-1.png ' ซึ่งคุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center

พื้นหลังไล่ระดับแถว

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

• สี 1: rgba(0,0,0,0.67)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังส่วนของของเหลว #2 & #3

พื้นหลังไล่ระดับมาตรา

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

• สี 1: #4f009e
• สี 2: #fa00ff
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-2.png ' หรือ ' fluid-style-3.png ' ซึ่ง คุณจะพบในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center

พื้นหลังไล่ระดับแถว

เพิ่มพื้นหลังไล่ระดับแถวที่ละเอียดอ่อนเช่นกัน:

• สี 1: rgba (255,48,75,0.13)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังมาตราของเหลว #4

พื้นหลังไล่ระดับมาตรา

ใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับส่วนของคุณ:

• สี 1: #00245e
• สี 2: #ffee00
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-4.png ' ซึ่ง คุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center

พื้นหลังไล่ระดับแถว

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

• สี 1: rgba(0,0,0,0.37)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังมาตราของเหลว #5

พื้นหลังไล่ระดับมาตรา

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

• สี 1: #04000f
• สี 2: #00436d
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

จากนั้น อัปโหลดไฟล์ ' fluid-style-5.png ' ซึ่ง คุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center

พื้นหลังไล่ระดับแถว

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

• สี 1: rgba(0,0,0,0.58)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังมาตราของเหลว #6

พื้นหลังไล่ระดับมาตรา

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

• สี 1: #4800ff
• สี 2: #c854ff
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-6.png ' ซึ่ง คุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: Center

พื้นหลังไล่ระดับแถว

สุดท้ายแต่ไม่ท้ายสุด เพิ่มการซ้อนทับพื้นหลังการไล่ระดับสีแถว

• สี 1: rgba(0,0,0,0.51)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังมาตราของไหล #7

พื้นหลังไล่ระดับมาตรา

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

• สี 1: #ff8300
• สี 2: #52006b
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-7.png ' ซึ่ง คุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: ขวาบน

พื้นหลังไล่ระดับแถว

สุดท้าย เพิ่มพื้นหลังไล่ระดับแถวที่ด้านบนของส่วนของคุณ

• สี 1: rgba(106,0,198,0.34)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังมาตราของเหลว #8

พื้นหลังไล่ระดับมาตรา

ใช้พื้นหลังไล่ระดับสีฟ้าต่อไปนี้กับส่วนของคุณ:

• สี 1: #0b43dd
• สี 2: #09f9ed
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-8.png ' ซึ่ง คุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: บนซ้าย

พื้นหลังไล่ระดับแถว

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

• สี 1: rgba(0,7,119,0.57)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังมาตราของเหลว #9

พื้นหลังไล่ระดับมาตรา

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

• สี 1: #051f89
• สี 2: #6d0272
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-9.png ' ซึ่ง คุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center

พื้นหลังไล่ระดับแถว

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

• สี 1: rgba(0,0,0,0.59)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

พื้นหลังมาตราของเหลว #10

พื้นหลังไล่ระดับมาตรา

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

• สี 1: #051f89
• สี 2: #6d0272
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 137deg
• ตำแหน่งเริ่มต้น: 48%

ภาพพื้นหลังของมาตรา

อัปโหลดไฟล์ ' fluid-style-10a.png ' ซึ่ง คุณจะพบได้ในโฟลเดอร์ดาวน์โหลด และรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: บนซ้าย

พื้นหลังไล่ระดับแถว

เพิ่มพื้นหลังไล่ระดับแถวถัดไป

• สี 1: rgba(0,0,0,0.59)
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง

ภาพพื้นหลังแถว

เพิ่มภาพพื้นหลังให้กับแถวของคุณด้วย ค้นหา ' fluid-style-10b.png ' ในโฟลเดอร์ดาวน์โหลด อัปโหลดและรวมเข้ากับการตั้งค่าพื้นหลังต่อไปนี้:

• ขนาดภาพพื้นหลัง: ขนาดจริง
• ตำแหน่งภาพพื้นหลัง: ล่างขวา

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์สุดท้ายกัน

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

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