Menggunakan Arahkan Bayangan Teks untuk Membuat Konten Interaktif dengan Divi

Membuat situs web Anda menonjol dari situs web serupa bisa jadi sulit, tetapi begitu Anda berhasil melakukannya, hampir selalu sepadan dengan usaha dan pemikiran yang telah dimasukkan ke dalamnya. Untuk membantu Anda mendapatkan inspirasi, kami akan menunjukkan cara membuat konten interaktif saat membuat situs web dengan Divi.

Contoh yang akan kita buat ulang dalam tutorial ini akan bekerja sangat baik untuk halaman tentang apa pun yang sedang Anda kerjakan. Anda akan dapat berbagi fakta atau informasi perusahaan saat mengarahkan kursor menggunakan opsi bayangan teks bawaan Divi. Kami juga memastikan efek hover ini tidak berlaku pada ukuran layar yang lebih kecil sehingga informasi dan pengalaman seluler tidak hilang.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil yang dapat Anda harapkan.

Desktop

Seluler

Kami memastikan semua interaksi arahkan kursor ini tidak berlaku pada ukuran layar yang lebih kecil. Saat menggunakan bagian dan modul yang sama, kita akan mendapatkan hasil sederhana berikut:

Mendekati

• Contoh yang akan kami buat ulang sangat bagus untuk tentang halaman, tetapi Anda dapat membuatnya bekerja dengan kata 5 karakter atau 6 karakter apa pun (cocokkan dengan struktur kolom)
• Masing-masing karakter akan didedikasikan untuk Modul Teks individu
• Kami menggunakan baris dengan jumlah kolom yang cukup untuk menghubungkan karakter kata yang berbeda dan membuatnya tampak seolah-olah mereka dibuat dalam modul yang sama
• Secara default, kami akan membuat warna teks Modul Teks sesuai dengan warna latar belakang bagian
• Untuk memastikan karakter tetap dapat dibaca, kami akan menerapkan bayangan teks putih ke karakter juga
• Setelah Anda mengarahkan karakter, bayangan teks akan hilang dan warna teks akan berubah yang memberi Anda perasaan bahwa teks sedang terisi
• Saat mengarahkan karakter, beberapa informasi tambahan juga akan muncul
• Pada ukuran layar yang lebih kecil, fakta dan/atau informasi perusahaan akan ada sejak awal

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Warna latar belakang

Buka halaman baru atau yang sudah ada dan tambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #03006d

Jarak

Kemudian, buka pengaturan jarak bagian dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 50px
• Padding Bawah: 50px

Tambahkan Baris Baru

Struktur Kolom

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

Perekat

Kemudian, buka pengaturan ukuran dan biarkan baris memenuhi seluruh lebar layar. Ini adalah langkah penting karena akan memungkinkan kita untuk menentukan jarak secara manual, menggunakan unit viewport.

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

Jarak

Pada langkah sebelumnya, kami telah menyingkirkan semua pengaturan ukuran default yang datang dengan baris baru. Namun, kami perlu menambahkan beberapa padding secara manual. Di sini, kami menggunakan unit viewport untuk memastikan hasilnya tetap sama di semua ukuran layar desktop.

• Padding Kiri: 9vw (Desktop), 5vw (Tablet & Ponsel)
• Padding Kanan: 5vw (Tablet & Ponsel)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Setelah Anda selesai mengubah pengaturan baris, Anda dapat melanjutkan dan menambahkan Modul Teks pertama ke kolom 1. Tambahkan karakter pertama sebagai teks paragraf dan konten yang ingin Anda tampilkan di hover sebagai teks daftar.

Pengaturan Teks Default

Lalu, buka tab desain dan ubah pengaturan teks paragraf default. Pastikan Anda menggunakan warna yang sama untuk teks dan latar belakang bagian.

• Berat Font Teks: Sangat Tebal
• Warna Teks: #03006d
• Ukuran Teks: 27vw (Desktop), 0vw (Tablet & Ponsel)
• Tinggi Baris Teks: 1.1em
• Kekuatan Kabur Bayangan Teks: 0,01em
• Warna Bayangan Teks: #ffffff
• Orientasi Teks: Kiri

Arahkan Pengaturan Teks

Untuk membuat efek hover yang bagus, kita perlu memodifikasi pengaturan teks paragraf ini saat mengarahkan kursor. Perhatikan bagaimana kita sekarang menggunakan warna bayangan teks yang benar-benar transparan untuk membuatnya menghilang.

• Warna Teks: #ffffff
• Warna Bayangan Teks: rgba(255,255,255,0)

Pengaturan Teks Daftar Default

Lanjutkan dengan masuk ke pengaturan teks daftar. Bagian penting dari pengaturan ini adalah memastikan ukuran teks pada desktop adalah '0px', tetapi menambahkan '18px' sebagai ukuran teks untuk ukuran layar yang lebih kecil. Ini akan memastikan teks daftar muncul pada ukuran layar yang lebih kecil tetapi tidak di desktop tanpa mengarahkan kursor.

• Berat Font Daftar Tidak Terurut: Ringan
• Warna Teks Daftar Tidak Terurut: #ffffff
• Ukuran Teks Daftar Tidak Terurut: 0px (Desktop), 18px (Tablet & Ponsel)
• Warna Bayangan Teks Daftar Tidak Terurut: rgba(255,255,255,0)
• Tipe Gaya Daftar Tidak Terurut: Lingkaran
• Posisi Gaya Daftar Tidak Terurut: Luar
• Indentasi Item Daftar Tidak Terurut: 0px

Arahkan ke Pengaturan Teks Daftar

Kami ingin teks daftar muncul di hover. Itu sebabnya kami akan mengubah ukuran teks saat mengarahkan kursor. Pastikan ukuran teks yang Anda gunakan saat mengarahkan kursor sama dengan ukuran teks yang Anda gunakan pada ukuran layar yang lebih kecil. Ini akan membantu memastikan bahwa tidak ada efek hover pada ukuran layar yang lebih kecil.

• Ukuran Teks Daftar Tidak Terurut: 18px

Jarak

Lanjutkan dengan masuk ke pengaturan jarak modul dan buat beberapa perubahan di sana juga.

• Margin Bawah: 50px (Tablet & Ponsel)
• Margin Kanan: -4vw (Desktop), 0vw (Tablet & Telepon)

Modul Teks Klon 4 Kali & Tempatkan Duplikat di Kolom Tersisa

Sekarang setelah kita selesai memodifikasi modul pertama di kolom 1, kita dapat melanjutkan dan mengkloning modul empat kali dan menempatkan masing-masing duplikat di kolom yang tersisa. Pada langkah berikutnya, kami akan memodifikasi setiap duplikat agar sesuai dengan karakter baru.

Ubah Modul Teks di Kolom 2

Ubah Konten

Buka duplikat di kolom 2 dan ubah kontennya.

Ubah Spasi

Kemudian, buka pengaturan spasi dan ubah nilai margin khusus.

• Margin Bawah: 50px (Tablet & Ponsel)
• Margin Kiri: -2vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Kanan: -2vw (Desktop), 0vw (Tablet & Ponsel)

Ubah Modul Teks di Kolom 3

Ubah Konten

Ubah konten duplikat di kolom 3 juga.

Ubah Spasi

Seiring dengan pengaturan spasi di tab desain.

• Margin Bawah: 50px (Tablet & Ponsel)
• Margin Kiri: -5.5vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Kanan: 1.5vw (Desktop), 0vw (Tablet & Telepon)

Ubah Modul Teks di Kolom 4

Ubah Konten

Lanjutkan dengan membuka Modul Teks di kolom 4 dan ubah konten di sini juga.

Ubah Spasi

Lalu buka tab desain dan ubah nilai margin khusus di pengaturan spasi.

• Margin Bawah: 50px
• Margin Kiri: -6vw (Desktop), 0vw (Tablet & Telepon)
• Margin Kanan: 2vw (Desktop), 0vw (Tablet & Ponsel)

Ubah Modul Teks di Kolom 5

Ubah Konten

Ke duplikat terakhir. Ubah konten di kotak konten.

Ubah Spasi

Seiring dengan pengaturan jarak kustom.

• Margin Bawah: 50px
• Margin Kiri: -7vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Kanan: 3vw (Desktop), 0vw (Tablet & Ponsel)

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Desktop

Seluler

Pikiran Akhir

Kami tahu betapa pentingnya membuat situs web Anda menonjol dari situs web lain di luar sana. Dengan opsi bawaan Divi, Anda bisa menjadi sekreatif yang Anda inginkan. Posting ini adalah contoh bagaimana Anda dapat membuat konten interaktif saat mengarahkan kursor sambil memastikan semuanya tetap sederhana pada ukuran layar yang lebih kecil. Anda dapat menggunakan contoh yang telah kami buat ulang untuk halaman tentang apa pun yang sedang Anda kerjakan. Ini adalah cara yang bagus untuk berbagi beberapa fakta dan informasi tambahan tentang perusahaan Anda sambil berinteraksi dengan pengunjung Anda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!