Apakah Anda ingin menggunakan efek bayangan dan arahkan di Divi untuk membuat isi interaktif dan menonjolkan Anda situs jaringan ?
Pastikan Anda situs jaringan menonjol dari situs web serupa bisa jadi sulit. Tapi begitu Anda sampai di sana, hampir selalu sepadan dengan usaha dan pemikiran yang masuk ke dalamnya.
Kami akan menunjukkan cara membuatnya isi interaktif saat membuat situs web dengan Divi.
Mari kita pergi!
penelitian
Sebelum kita menyelami tutorial ini, mari kita lihat sekilas hasil yang dapat Anda harapkan.
Komputer desktop
mobil
Mari kita mulai realisasinya dengan Divi!
Lihat juga: Divi: Cara membuat menu roda berputar di hoverl
Tambahkan bagian baru
Warna latar belakang
Buat halaman baru atau buka yang sudah ada dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan ubah warna latar belakang.
- Latar belakang: #03006d
jarak
Lalu pergi ke pengaturan spasi bagian dan ubah sebagai berikut:
- Padding (Atas dan Bawah): 50px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut.
perekat
Lalu pergi ke pengaturan ukuran dan biarkan garis mengisi lebar penuh layar.
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 100%
jarak
Mari kita juga mengubah pengaturan spasi berikut:
- Padding (Kanan): 9vw (Desktop), 5vw (Tablet dan Telepon)
- Padding (Kanan): 5vw (Tablet dan Ponsel)
Tambahkan modul Teks ke kolom 1
Tambahkan konten
Setelah Anda selesai mengedit pengaturan baris, tambahkan modul Teks pertama ke kolom 1.
Tambahkan karakter pertama sebagai teks paragraf. Lalu, itu isi yang ingin Anda tampilkan sebagai teks daftar.
Pengaturan Teks (Desktop)
Lalu pergi ke tab Mendesaindan ubah pengaturan teks paragraf default. Pastikan untuk menggunakan warna yang sama untuk teks bagian dan latar belakang.
- Berat Huruf: Sangat Tebal
- Warna Teks: #03006d
- Ukuran Teks: 27vw (desktop), 0vw (tablet dan ponsel)
- Tinggi Garis: 1,1 em
- Bayangan Teks: Lihat tangkapan
- Kekuatan Bayangan Kabur: 0,01em
- Warna Bayangan: #ffffff
- Perataan Teks: Kiri
Arahkan pengaturan teks
Untuk membuat efek hover yang bagus, kita perlu mengubah pengaturan teks paragraf hover ini.
- Warna Teks (Arahkan Arahkan kursor): #ffffff
- Warna Bayangan(Arahkan) : rgba(255,255,255,0)
Pengaturan Daftar (Desktop)
Lanjutkan dengan masuk ke pengaturan daftar.
- Berat Huruf: Ringan
- Warna Teks Daftar: #ffffff
- Ukuran Teks Daftar: 0px (Desktop), 18px (Tablet dan Ponsel)
- Posisi Gaya: Lingkaran
- Posisi Gaya Daftar Tidak Terurut: Luar
- Indentasi Item Daftar Tidak Terurut: 0px
Daftar pengaturan teks saat mengarahkan kursor (Hover)
Kami ingin teks daftar muncul di hover. Inilah sebabnya mengapa kami akan mengubah ukuran teks saat mengarahkan kursor.
- Ukuran Teks Daftar Tidak Terurut (Arahkan Arahkan kursor): 18px
jarak
Lanjutkan dengan masuk ke pengaturan jarak modul dan buat beberapa perubahan di sana juga.
- Margin (Bawah): 50px (Tablet dan Ponsel)
- Margin (Kanan): -4vw (Desktop), 0vw (Tablet dan Telepon)
Klon modul teks 4 kali dan tempatkan duplikat di kolom yang tersisa
Sekarang setelah kita selesai memodifikasi modul pertama di kolom 1, klon modul empat kali. Kemudian tempatkan masing-masing duplikat di kolom yang tersisa. Kami akan memodifikasi setiap duplikat agar sesuai dengan yang kami inginkan.
Ubah modul Teks di kolom 2
mengedit konten
Buka duplikat di kolom 2 dan edit kontennya.
Ubah spasi
Selanjutnya, buka pengaturan spasi dan ubah nilai margin khusus.
- Margin (Bawah): 50px (Tablet dan Ponsel)
- Margin (Kiri dan Kanan): -2vw (Desktop), 0vw (Tablet dan Telepon)
- Margin kanan: -2vw (desktop), 0vw (tablet dan ponsel)
Ubah modul Teks di kolom 3
mengedit konten
Ubah juga isi duplikat di kolom 3.
Ubah spasi
Dengan pengaturan spasi di tab desain.
- Margin (Kiri): 2,5 vw
- Margin (Kanan): 1,5 vw
Ubah modul Teks di kolom 4
mengedit konten
Lanjutkan dengan membuka pengaturan modul Teks di kolom 4 dan edit konten di sana juga.
Ubah spasi
Selanjutnya, buka tab Desain dan ubah nilai margin kustom di pengaturan Spasi.
- Margin (Kiri): -6vw
- Margin (Kanan): 2vw
Ubah modul Teks di kolom 5
Isi
Beri jalan untuk duplikat terakhir. Edit konten di area konten.
Ubah spasi
Dengan pengaturan jarak kustom.
- Margin (Kiri): -7vw
- Margin (Kanan): 3vw
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Baca juga: Divi : Cara menyesuaikan ikon keranjang dan pencarian pada modul “Menu Lebar Penuh”.
Biro
mobil
Unduh DIVI Sekarang!!!
Kesimpulan
Kami tahu betapa pentingnya memastikan bahwa Anda situs jaringan menonjol dari situs web lain. Dengan opsi bawaan Divi, Anda bisa berkreasi sesuai keinginan.
Artikel ini adalah contoh bagaimana Anda dapat membuat konten hover interaktif.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca 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.
...
