Ingin tahu cara memasang modul Blurb dari Divi disorot saat mengaburkan orang lain?
Apapun jenisnya situs jaringan Anda sedang membangun, kemungkinan besar pada titik tertentu Anda ingin melihat daftar berbagai layanan, tahapan, dan banyak lagi.
Salah satu cara termudah untuk mendekati pembuatan daftar seperti itu dengan cara yang menarik adalah dengan menggunakan modul Blurb dari Divi. Modul uraian memungkinkan Anda menyusun struktur dengan indah isi dari daftar sambil memberi Anda kemungkinan desain tanpa batas.
Dalam tutorial ini, kami akan melangkah lebih jauh dan menunjukkan kepada Anda cara menyorot modul Blurb saat mengarahkan kursor dan memburamkan modul lain yang telah Anda tampilkan. Ini adalah cara yang bagus untuk menekankan satu modul Blurb pada satu waktu, tanpa membiarkan modul Blurb lain mengalihkan perhatian pembaca.
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Komputer desktop
Versi seluler
Mari mulai mendesain dengan Divi
Tambahkan bagian baru
Warna latar belakang
Mulailah dengan menambahkan bagian reguler ke halaman baru atau halaman yang sedang Anda kerjakan.
Anda juga dapat berkonsultasi: Divi: Cara membuat bagian anggota tim sebagai korsel
Buka pengaturan bagian dan ubah warna latar belakang.
- Latar belakang: #eaeaea
Jarak
Juga tambahkan nilai spasi.
- Margin (Atas, Bawah, Kiri dan Kanan): 2vw
- Padding (Atas dan Bawah): 0px
Batas
Lengkapi parameter bagian dengan menambahkan radius batas.
- Sudut Bulat: 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 garis dan ubah pengaturan ukuran.
- Samakan Tinggi Kolom: YA
- Lebar: 90%
- Lebar Maks: 1px
- Tinggi Min: 500px (Desktop), otomatis (Tablet dan Ponsel)
CSS Khusus (Elemen Utama)
Sejajarkan isi kolom dengan menambahkan satu baris kode CSS ke elemen utama baris tersebut.
align-items: center;
Tambahkan modul Blurb ke kolom 1
Tambahkan konten
Satu-satunya modul yang kami gunakan sepanjang tutorial ini adalah modul Blurb.
Namun, Anda dapat mengganti modul ini dengan modul apa pun pilihan Anda selama Anda menambahkan kelas CSS yang akan kami bagikan di langkah selanjutnya.
Tambahkan modul Blurb pertama ke kolom 1 dan masukkan isi pilih pemilih.
Pilih ikonnya
Kemudian pilih salah satu ikon.
- Gunakan Ikon : YA
- Ikon: Lihat tangkapan layar
Gradien Latar Belakang (Arahkan Arahkan kursor)
Kemudian gunakan gradien latar belakang hanya saat melayang.
- Gradien Berhenti
- 20%: #ffffff
- 80%: #0f1bff
- Tipe Gradien: Linier
Pengaturan Ikon (Desktop)
Beralih ke tab Mendesain modul dan ubah pengaturan ikon sebagai berikut:
- Warna Ikon: #ffffff
- Sudut Bulat Gambar/Ikon: 50px
- Lebar Batas Gambar/Ikon: 5px
- Warna Perbatasan: #ffffff
- Penempatan Gambar/Ikon: Atas
- Penjajaran Gambar/Ikon: Kiri
Arahkan kursor ke pengaturan ikon
Ubah warna ikon yang berbeda saat mengarahkan kursor.
- Warna Ikon (Arahkan Arahkan kursor): #0f1bff
- Warna Latar Gambar/Ikon (Arahkan Arahkan kursor): #f7f7f7
Pengaturan teks judul
Lanjutkan dengan mengubah pengaturan teks judul.
- Judul Font: Sumber Sans Pro
- Berat Huruf: Tebal
- Judul Font Style: TT (huruf besar)
Arahkan kursor ke pengaturan teks judul
Ubah warna teks judul saat mengarahkan kursor.
- Warna Teks Judul: #ffffff
Pengaturan Teks Deskripsi (Desktop)
Selanjutnya adalah pengaturan teks isi.
- Font Tubuh: Buka Sans
- Tinggi Garis Tubuh: 2em
Arahkan kursor ke pengaturan teks deskripsi
Gunakan warna teks saat mengarahkan kursor.
- Warna Teks Tubuh (Hover): #ffffff
Jarak
Selanjutnya, buka pengaturan spasi dan tambahkan nilai padding khusus.
- Padding (Atas, Bawah, Kiri dan Kanan): 50px
Bayangan Kotak (Desktop)
Kami juga menggunakan bayangan kotak.
- Kekuatan Buram Bayangan Kotak: 80px
- Kekuatan Penyebaran Bayangan Kotak: -20px
- Warna Bayangan: rgba (255,255,255,0.18)
Bayangan Kotak (Arahkan)
Ubah warna bayangan hover.
- Warna Bayangan: rgba (0,0,0,0.18)
Kelas CSS
Dan agar efek blur terjadi, kita perlu menetapkan kelas CSS ke modul Blurb kita. Nanti di artikel, kita akan menggunakan kelas CSS ini dalam kode JQuery.
- Kelas CSS: item uraian
Kloning modul Blurb dua kali dan tempatkan duplikat di kolom yang tersisa
Setelah Anda menyelesaikan modul Blurb di kolom 1, Anda dapat mengkloningnya dua kali dan menempatkan duplikatnya di kolom baris yang tersisa.
Kloning 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 satu per satu
Tentu saja, Anda perlu memodifikasi konten individual dari setiap modul Blurb.
Tambahkan baris baru
Struktur kolom
Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:
Jarak
Buka pengaturan garis dan hapus semua padding atas dan bawah secara default. Ini akan membantu mengurangi ruang yang ditempati oleh baris ini.
- Padding (Atas dan Bawah): 0px
Tambahkan modul Kode ke kolom
Masukkan kode JQuery dan CSS
Tambahkan modul Kode ke kolom baris dan masukkan beberapa kode JQuery dan CSS untuk membuat efeknya terjadi.
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');
});
});Baca juga: Divi: Cara membuat bagian Testimonial dalam bentuk grid
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Komputer desktop
Versi seluler
Unduh DIVI Sekarang!!!
Kesimpulan
Dalam artikel ini, kami telah menunjukkan cara berkreasi dengan modul Blurb yang Anda bagikan di situs jaringan.
Secara khusus, kami telah menunjukkan kepada Anda cara menyorot modul Blurb saat mengarahkan kursor dengan memburamkan modul lain yang telah Anda tampilkan.
Kami berharap tutorial ini akan menginspirasi Anda untuk proyek Anda berikutnya. Divi. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
