Menggunakan Pengaturan Filter Kolom Baru Divi untuk Membuat Efek Pencampuran yang Menakjubkan

Pengaturan filter kolom baru Divi dapat digunakan dengan banyak cara kreatif. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana memadukan satu gambar latar belakang baris utama dengan konten kolom. Kami akan menambahkan gradien warna yang berbeda ke modul dan mode campuran "layar" kolom untuk menciptakan efek yang menakjubkan. Kami berharap desain ini akan menginspirasi Anda untuk menggunakan mode campuran kolom dalam proyek Divi Anda berikutnya. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Mode Campuran Kolom GRATIS

Untuk meletakkan tangan Anda pada tata letak mode campuran kolom 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

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.

UNDUH

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

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru dengan Baris 3-Kolom

Mulai desain dengan menambahkan bagian baru dengan baris tiga kolom.

Spasi Bagian

Buka pengaturan bagian dan sesuaikan spasi.

• Margin Kiri dan Kanan: 3vw
• Padding Atas dan Bawah: 84px

Pengaturan Baris

Latar belakang

Sebelum menambahkan modul apa pun, kita akan mengubah pengaturan baris. Mulailah dengan menambahkan warna latar belakang.

• Warna Latar Belakang: Abu-abu Sedang #c4c4c4

Kemudian, unggah gambar latar belakang dan padukan warna latar belakang dengan gambar menggunakan mode campuran.

• Campuran Gambar Latar Belakang: Kalikan

Perekat

Sesuaikan pengaturan ukuran baris berikutnya.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Tinggi Kolom Equalize: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus juga padding baris default.

• Padding Atas dan Bawah: 0px

Bayangan Kotak

Lanjutkan dengan menambahkan bayangan kotak sederhana ke baris.

• Bayangan Kotak: Opsi Pertama

Visibilitas

Sesuaikan indeks Z di tab visibilitas.

• Z-Indeks: 1

Kolom Gaya 1

Masukkan pengaturan kolom pertama.

Filter

Terapkan mode campuran layar ke kolom di tab filter.

• Mode Campuran: Layar

Arahkan Skala Transformasi

Masuk ke grup opsi transformasi dan ubah pengaturan skala transformasi hover.

• Skala Transformasi: 105% pada sumbu x dan y

Visibilitas

Masuk ke tab visibilitas kolom dan sesuaikan pengaturan luapan.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Transisi

Pindah ke tab transisi dan sesuaikan durasi transisi untuk membuat transisi yang mulus.

• Durasi Transisi: 500 mdtk

Tambahkan Modul Teks ke Kolom 1

Setiap kolom berisi tiga modul teks. Tambahkan modul teks pertama ke kolom 1 dengan beberapa konten H2 pilihan Anda dan sesuaikan pengaturan sebagai berikut.

Latar belakang

Gaya latar belakang dengan gradien warna.

• Latar Belakang: Gradien
• Warna Gradien Satu: #5498ff
• Warna Gradien Dua: #16fff3
• Arah Gradien: 235 derajat
• Posisi Awal: 37%

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Padding Atas dan Bawah: 6vw
• Padding Kiri dan Kanan: 3vw

Teks Judul

Masukkan pengaturan teks judul dan gaya pengaturan teks H2 yang sesuai:

• Judul 2 Berat Font: Ultra Tebal
• Judul 2 Gaya Font: TT
• Judul 2 Warna Teks: Hitam #oooooo
• Judul 2 Ukuran Teks:
  • Desktop: 5vw
  • Tablet: 11vw
  • Telepon: 13vw
• Pos 2 Tinggi Baris:
  • Desktop: 4.3vw
  • Tablet: 9vw
  • Telepon: 10.5vw

Filter

Pindah ke pengaturan filter dan tambahkan mode campuran layar.

• Mode Campuran: Layar

Tambahkan Modul Teks ke-2 ke Kolom 1

Lanjutkan dengan menambahkan modul teks kedua ke kolom 1 dengan beberapa konten paragraf pilihan Anda.

Gaya modul teks sebagai berikut:

Latar belakang

Tambahkan warna latar belakang putih.

• Warna Latar Belakang: Putih #ffffff

Teks

Masuk ke tab desain dan sesuaikan teksnya:

• Font Teks: Montserrat
• Perataan Teks: Dibenarkan
• Warna Teks: Abu-abu Gelap #333333
• Ukuran teks:
  • Desktop: 0.8vw
  • Tablet: 2vw
  • Telepon: 2.5vw
• Spasi Surat Teks: -0,04vw
• Tinggi Baris Teks:
  • Desktop: 2.7vw
  • Tablet: 5.5vw
  • Telepon: 6vw

Jarak

Sesuaikan pengaturan spasi juga untuk membuat ruang kosong di sekitar teks.

• Margin Atas dan Bawah: 0.5vw
• Padding Atas dan Bawah:
  • Desktop: 5vw
  • Tablet + Telepon: 15vw
• Padding Kiri: 5vw
• Bantalan Kanan:
  • Desktop: 5vw
  • Tablet + Telepon: 25vw

Filter

Last but not least, terapkan mode campuran layar di tab filter.

• Mode Campuran: Layar

Tambahkan Modul Teks ke-3 ke Kolom 1

Untuk melengkapi desain kolom, tambahkan modul teks ketiga dengan beberapa salinan CTA. Kami menggunakan seluruh modul ini sebagai tombol.

Gaya modul sebagai berikut:

Tambahkan Tautan

Tambahkan tautan pilihan Anda di pengaturan tautan. Segera setelah seseorang mengklik di mana saja pada modul, mereka akan diarahkan ke tempat lain.

Latar belakang

Gaya gradien latar belakang agar sesuai dengan modul teks pertama.

• Latar Belakang: Gradien
• Warna Gradien Latar Belakang Satu: #5498ff
• Warna Gradien Latar Belakang Dua: #16fff3
• Arah Gradien: 235 derajat

Teks

Masuk ke tab desain dan gaya teks sebagai berikut:

• Font Teks: Montserrat
• Berat Font Teks: Berat
• Gaya Font Teks: Digarisbawahi
• Warna Garis Bawah Teks: Putih #ffffff
• Warna Teks: Hitam #000000
• Ukuran teks:
  • Desktop: 1.5vw
  • Tablet: 3.3vw
  • Telepon: 4vw
• Tinggi Baris Teks: 1em

Jarak

Sesuaikan pengaturan spasi untuk membuat teks lebih pas di modul.

• Padding Atas dan Bawah:
  • Desktop: 2vw
  • Tablet: 6vw
  • Telepon: 9vw
• Padding Kiri: 3vw

Duplikat Kolom 1 Dua Kali

Setelah Anda menyelesaikan kolom pertama, buka pengaturan baris dan hapus kolom kedua dan ketiga. Kemudian, duplikat kolom pertama dua kali. Tentu saja, kita perlu membuat beberapa perubahan pada modul di kolom 2 dan 3.

Kolom 2 / Modul Teks 1 Latar Belakang

• Warna Gradien Latar Belakang Satu: #c870ff
• Warna Gradien Latar Belakang Dua: #ff355a

Kolom 2 / Modul Teks 2 Bayangan Kotak

• Bayangan Kotak: Opsi Keenam
• Kekuatan Buram Bayangan Kotak: 20px
• Kekuatan Penyebaran Bayangan Kotak: 17px
• Warna Bayangan Kotak: rgba(225,33,255,0.06)

Kolom 2 / Modul Teks 3 Latar Belakang

Sesuaikan gradien latar belakang modul teks ketiga agar sesuai dengan modul pertama.

• Warna Gradien Latar Belakang Satu: #c870ff
• Warna Gradien Latar Belakang Dua: #ff355a

Kolom 3 / Modul Teks 1 Latar Belakang

Ke kolom ketiga! Ubah latar belakang gradien modul teks 1 sesuai:

• Warna Gradien Latar Belakang Satu: #ff4800
• Warna Gradien Latar Belakang Dua: #fc9a2a

Kolom 2 / Modul Teks 3 Latar Belakang

• Warna Gradien Latar Belakang Satu: #ff4800
• Warna Gradien Latar Belakang Dua: #fc9a2a

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Ini adalah Bungkus

Dalam posting ini, kami menunjukkan kepada Anda cara membuat desain tiga kolom dengan efek perpaduan yang menakjubkan menggunakan pengaturan kolom Divi. Kami telah menggabungkan pengaturan modul, kolom, dan baris untuk mencapai hasil yang indah yang dapat Anda gunakan di situs web apa pun yang Anda buat. Kami harap tutorial ini menginspirasi Anda untuk membuat desain alternatif Anda sendiri juga. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!