Cara Menyorot Modul Blurb yang Dilayangkan dengan Mengaburkan Yang Lain dengan Divi

Apa pun jenis situs web yang Anda buat, kemungkinan besar pada titik tertentu, Anda ingin menampilkan daftar berbagai layanan, langkah, dan banyak lagi. Salah satu cara termudah untuk mendekati pembuatan daftar seperti itu dengan menarik adalah menggunakan Modul Blurb Divi. Modul Blurb memungkinkan Anda untuk menyusun konten daftar dengan indah sambil memberi Anda kemungkinan desain tanpa batas.

Dalam tutorial hari ini, kami akan mengambil satu langkah lebih jauh dan menunjukkan kepada Anda cara menyorot Modul Blurb yang melayang dengan memburamkan modul lain yang telah Anda tampilkan. Ini adalah cara yang bagus untuk menempatkan fokus pada satu Modul Blurb pada satu waktu, tanpa membiarkan Modul Blurb lainnya mengalihkan perhatian pembaca. Segera setelah pengunjung berpindah ke Modul Blurb lain, modul itu menjadi yang disorot. Anda juga dapat mengunduh file JSON tata letak 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 Modul Blurb Melayang secara GRATIS

Untuk meletakkan tangan Anda pada tata letak modul uraian melayang-layang 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!

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian reguler ke halaman baru atau halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah warna latar belakang.

• Latar Belakang Coor: #eaeaea

Jarak

Tambahkan beberapa margin kustom dan nilai padding juga.

• Margin Atas: 2vw
• Margin Bawah: 2vw
• Margin Kiri: 2vw
• Margin Kanan: 2vw
• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Selesaikan pengaturan bagian dengan menambahkan beberapa radius batas.

• Semua Sudut: 20px

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran. Mengaktifkan opsi 'Equalize Column Heights' akan membantu langkah selanjutnya yang menyelaraskan konten kolom.

• Samakan Tinggi Kolom: Ya
• Lebar: 90%
• Lebar Maks: 1580px
• Tinggi Min: 500px (Desktop), otomatis (Tablet & Ponsel)

Elemen Utama

Sejajarkan konten kolom dengan menambahkan satu baris kode CSS ke elemen utama baris.

align-items: center;

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Satu-satunya modul yang kami gunakan sepanjang tutorial ini adalah Modul Blurb, tetapi Anda dapat mengganti modul ini dengan modul apa pun pilihan Anda selama Anda menambahkan kelas CSS yang akan kami bagikan di langkah mendatang. Tambahkan Modul Blurb pertama ke kolom 1 dan masukkan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Arahkan Arah Gradien Latar Belakang

Kemudian, gunakan latar belakang gradien pada hover saja.

• Warna 1: #ffffff
• Warna 2: #0f1bff
• Tipe Gradien: Linier
• Posisi Awal: 20%
• Posisi Akhir: 20%

Pengaturan Ikon Default

Pindah ke tab desain modul dan ubah pengaturan ikon sebagai berikut:

• Warna Ikon: #ffffff
• Ikon Lingkaran: Ya
• Warna Lingkaran: #ffffff
• Penempatan Gambar/Ikon: Atas
• Penjajaran Gambar/Ikon: Kiri

Arahkan ke Pengaturan Ikon

Ubah warna ikon yang berbeda saat mengarahkan kursor.

• Warna Ikon: #0f1bff
• Warna Lingkaran: #f7f7f7

Pengaturan Teks Judul Default

Lanjutkan dengan mengubah pengaturan teks judul.

• Judul Font: Sumber Sans Pro
• Judul Font Berat: Tebal
• Judul Font Style: Huruf Besar

Arahkan ke Pengaturan Teks Judul

Ubah warna teks judul saat mengarahkan kursor.

• Warna Teks Judul: #ffffff

Pengaturan Teks Tubuh Default

Selanjutnya adalah pengaturan teks isi.

• Font Tubuh: Buka Sans
• Tinggi Garis Tubuh: 2em

Arahkan ke Pengaturan Teks Tubuh

Gunakan warna teks hover putih.

• Warna Teks Tubuh: #ffffff

Jarak

Lalu, buka pengaturan spasi dan tambahkan beberapa nilai padding khusus.

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

Bayangan Kotak Default

Kami juga menggunakan bayangan kotak.

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -20px
• Warna Bayangan: rgba (255,255,255,0.18)

Arahkan Bayangan Kotak

Ubah warna bayangan saat melayang.

• Warna Bayangan: rgba (0,0,0,0.18)

Kelas CSS

Dan untuk membuat efek blur terjadi, kita perlu menetapkan kelas CSS ke Modul Blurb kita. Nanti di posting, kita akan menggunakan kelas CSS ini di beberapa kode JQuery.

• Kelas CSS: item uraian

Clone Blurb Module Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyelesaikan Modul Blurb di kolom 1, Anda dapat mengkloningnya dua kali dan menempatkan duplikatnya di kolom baris yang tersisa.

Klon Seluruh Baris

Anda dapat mengkloning baris sebanyak yang Anda inginkan, tergantung pada berapa banyak Modul Blurb yang ingin Anda tampilkan di halaman Anda.

Sesuaikan Modul Blurb Secara Individual

Tentu saja, Anda harus memodifikasi konten individual setiap Modul Blurb.

Tambahkan Baris Baru

Struktur Kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Jarak

Buka pengaturan baris dan hapus semua padding atas dan bawah default. Ini akan membantu mengurangi ruang yang dibutuhkan baris ini.

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

Tambahkan Modul Kode ke Kolom

Masukkan JQuery & Kode CSS

Tambahkan Modul Kode ke kolom baris dan masukkan beberapa kode JQuery dan CSS untuk mewujudkan efeknya. Jangan lupa untuk meletakkan kode JQuery di antara tag skrip dan kode CSS di antara tag gaya seperti yang Anda lihat pada layar cetak di bawah ini.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan Modul Blurb yang Anda bagikan di situs web Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menyorot Modul Blurb yang melayang dengan memburamkan modul lain yang telah Anda tampilkan. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.