Unduh 10 Gambar Latar Belakang Bagian Cairan GRATIS untuk Divi

Diterbitkan: 2018-10-07

Jika Anda ingin menyegarkan tampilan dan nuansa bagian Anda, ini mungkin pos yang ideal untuk Anda. Kami telah membuat 10 gambar latar belakang bagian cair yang berbeda yang dapat Anda unduh secara gratis dan digunakan di situs web apa pun yang Anda buat. Selain itu, kami juga akan menunjukkan cara menggabungkan gambar latar belakang bagian cair ini dengan opsi bawaan Divi. Anda akan dapat menetapkan latar belakang gradien apa pun ke gambar latar belakang cair Anda dan menggabungkannya dengan latar belakang gradien baris untuk memastikan konten Anda tetap dapat dibaca juga.

Mari kita lakukan!

Pratinjau

Mari kita mulai dengan melihat 10 gambar latar belakang bagian cair yang berbeda yang dapat Anda unduh lebih jauh di bawah pos. Kami telah menggabungkan gambar dengan latar belakang gradien untuk membuat hasil yang unik. Kami akan membagikan masing-masing kombinasi gradien di posting ini juga, tetapi jangan ragu untuk bereksperimen dengan warna yang berbeda untuk mencapai hasil akhir yang Anda inginkan.

latar belakang bagian cairan

Unduh Gambar Latar Belakang Bagian Cairan GRATIS

Untuk meletakkan tangan Anda pada gambar latar belakang bagian cairan gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File
Unduh Gratis

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Buat Ulang Bagian

Tambahkan Bagian Reguler Baru

Jarak

Setelah Anda mengunduh semua file gambar, buka situs WordPress Anda dan buka halaman baru atau yang sudah ada. Kemudian, menggunakan Divi's Visual Builder, tambahkan bagian reguler baru. Buka pengaturannya dan ubah nilai Spasi.

  • Padding Atas: 0px
  • Padding Bawah: 0px

latar belakang bagian cairan

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian Anda menggunakan struktur kolom berikut:

latar belakang bagian cairan

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan buat perubahan pada pengaturan Ukuran.

  • Jadikan Baris Ini Lebar Penuh: Ya
  • Gunakan Lebar Talang Kustom: Ya
  • Lebar Talang: 1

latar belakang bagian cairan

Jarak

Tambahkan beberapa nilai padding ke pengaturan Spasi juga.

  • Padding Atas: 312px
  • Padding Bawah: 312px
  • Padding Kiri Kolom: 50px
  • Padding Kanan Kolom: 50px

latar belakang bagian cairan

Tambahkan Modul Teks

Tambah isi

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Teks. Silakan dan tambahkan beberapa konten ke kotak konten, sebaiknya judul H2 dan paragraf.

latar belakang bagian cairan

Pengaturan Teks H2

Buka pengaturan teks H2 berikutnya dan terapkan perubahan berikut:

  • Judul 2 Font: Montserrat
  • Judul 2 Berat Font: Ultra Tebal
  • Judul 2 Warna Teks: #FFFFFF
  • Judul 2 Ukuran Teks: 82px (Desktop), 60px (Tablet), 40px (Telepon)
  • Pos 2 Tinggi Baris: 1.4em

latar belakang bagian cairan

Pengaturan Teks

Ubah juga pengaturan teks secara keseluruhan.

  • Warna Teks: #FFFFFF
  • Ukuran Teks: 16px
  • Tinggi Baris Teks: 1.9em
  • Orientasi Teks: Tengah

latar belakang bagian cairan

Perekat

Lanjutkan dengan mengurangi lebar modul ini di desktop.

  • Lebar: 58% (Desktop), 100% (Tablet & Ponsel)
  • Penyelarasan Modul: Pusat

latar belakang bagian cairan

Tambahkan Modul Tombol

Tambahkan Salinan

Modul kedua dan terakhir yang kita butuhkan adalah Modul Tombol. Setelah menambahkan modul di bawah Modul Teks, tambahkan beberapa salinan.

latar belakang bagian cairan

Penjajaran Tombol

Ubah Penjajaran Tombol berikutnya.

  • Penjajaran Tombol: Tengah

latar belakang bagian cairan

Pengaturan Tombol

Kemudian, buka pengaturan tombol dan buat beberapa perubahan.

  • Gunakan Gaya Kustom untuk Tombol: Ya
  • Ukuran Teks Tombol: 18px
  • Warna Teks Tombol: #000000
  • Warna Latar Tombol: #FFFFFF
  • Lebar Batas Tombol: 0px
  • Radius Perbatasan Tombol: 0px
  • Jarak Huruf Tombol: -1px
  • Font Tombol: Montserrat
  • Berat Huruf: Sangat Tebal
  • Gaya Font: Huruf Besar

latar belakang bagian cairan

latar belakang bagian cairan

Jarak

Last but not least, tambahkan beberapa ruang antara modul sebelumnya dan yang ini dengan menambahkan beberapa margin atas.

  • Margin Atas: 25px

latar belakang bagian cairan

Latar Belakang Bagian Cairan #1

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Gunakan latar belakang gradien berikut untuk bagian Anda:

  • Warna 1: #000000
  • Warna 2: #2d5b9b
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-1.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Tengah

latar belakang bagian cairan

Latar Belakang Gradien Baris

Untuk melengkapinya, tambahkan gradien baris di atas latar belakang bagian Anda. Ini akan membuat teks lebih mudah dibaca. Ini juga akan membantu Anda menambahkan beberapa kedalaman ke halaman Anda.

  • Warna 1: rgba(0,0,0,0.67)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan #2 & #3

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Gambar latar belakang bagian fluida kedua dan ketiga menggunakan latar belakang gradien bagian berikut:

  • Warna 1: #4f009e
  • Warna 2: #fa00ff
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-2.png ' atau ' fluid-style-3.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Tengah

latar belakang bagian cairan

Latar Belakang Gradien Baris

Tambahkan juga latar belakang gradien baris yang halus:

  • Warna 1: rgba (255,48,75,0.13)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan #4

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Gunakan latar belakang gradien berikut untuk bagian Anda:

  • Warna 1: #00245e
  • Warna 2: #ffee00
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-4.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Tengah

latar belakang bagian cairan

Latar Belakang Gradien Baris

Untuk menyelesaikannya, tambahkan latar belakang gradien baris menggunakan pengaturan berikut:

  • Warna 1: rgba (0,0,0,0.37)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan # 5

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Tambahkan latar belakang gradien berikut ke bagian Anda:

  • Warna 1: #04000f
  • Warna 2: #00436d
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Kemudian, unggah file ' fluid-style-5.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Tengah

latar belakang bagian cairan

Latar Belakang Gradien Baris

Lengkapi desain Anda menggunakan latar belakang gradien baris berikut:

  • Warna 1: rgba(0,0,0,0.58)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan #6

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Gunakan kombinasi latar belakang gradien bagian yang menakjubkan berikut:

  • Warna 1: #4800ff
  • Warna 2: #c854ff
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-6.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Tengah

latar belakang bagian cairan

Latar Belakang Gradien Baris

Last but not least, tambahkan overlay latar belakang gradien baris.

  • Warna 1: rgba(0,0,0,0.51)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan #7

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Terapkan pengaturan latar belakang gradien berikut ke bagian Anda:

  • Warna 1: #ff8300
  • Warna 2: #52006b
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-7.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Kanan Atas

latar belakang bagian cairan

Latar Belakang Gradien Baris

Terakhir, tambahkan latar belakang gradien baris di atas bagian Anda.

  • Warna 1: rgba(106,0,198,0.34)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan #8

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Terapkan latar belakang gradien biru berikut ke bagian Anda:

  • Warna 1: #0b43dd
  • Warna 2: #09f9ed
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-8.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Kiri Atas

latar belakang bagian cairan

Latar Belakang Gradien Baris

Lengkapi desain Anda dengan menerapkan latar belakang gradien baris.

  • Warna 1: rgba (0,7.119,0.57)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Linier
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan #9

latar belakang bagian cairan

Bagian Latar Belakang Gradien

Tambahkan latar belakang gradien berikut ke bagian Anda:

  • Warna 1: #051f89
  • Warna 2: #6d0272
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-9.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Sampul
  • Posisi Gambar Latar Belakang: Tengah

latar belakang bagian cairan

Latar Belakang Gradien Baris

Last but not least, tingkatkan keterbacaan konten Anda menggunakan latar belakang gradien baris.

  • Warna 1: rgba(0,0,0,0.59)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Latar Belakang Bagian Cairan # 10

Bagian Latar Belakang Gradien

Contoh terakhir membutuhkan latar belakang gradien bagian berikut:

  • Warna 1: #051f89
  • Warna 2: #6d0272
  • Tipe Gradien: Linier
  • Arah Gradien: 137deg
  • Posisi Awal: 48%

latar belakang bagian cairan

Gambar Latar Bagian

Unggah file ' fluid-style-10a.png ' yang dapat Anda temukan di folder unduhan dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Kiri Atas

latar belakang bagian cairan

Latar Belakang Gradien Baris

Tambahkan latar belakang gradien baris berikutnya.

  • Warna 1: rgba(0,0,0,0.59)
  • Warna 2: rgba (255,255,255,0)
  • Tipe Gradien: Radial
  • Arah Radial: Pusat

latar belakang bagian cairan

Gambar Latar Baris

Tambahkan gambar latar belakang ke baris Anda juga. Temukan ' fluid-style-10b.png ' di folder unduhan, unggah dan gabungkan dengan pengaturan latar belakang berikut:

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Kanan Bawah

latar belakang bagian cairan

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.

latar belakang bagian cairan

Pikiran Akhir

Dalam posting ini, kami telah membagikan 10 gambar latar belakang bagian cairan yang berbeda dan unik yang dapat Anda gunakan di situs web Anda sendiri tanpa batasan apa pun. Selain itu, kami juga memberi Anda latar belakang gradien yang menakjubkan yang dapat Anda kombinasikan dengan gambar latar belakang yang cair menggunakan opsi bawaan Divi saja. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah dan beri tahu kami gambar latar belakang bagian cair mana yang paling Anda sukai!