Cara Memberi Label pada Gambar Latar Belakang dengan Tooltip yang Menarik di Divi

Menambahkan tooltips ke label gambar latar belakang adalah cara kreatif untuk melibatkan pengunjung dengan informasi berharga tentang produk atau layanan Anda. Ide dasarnya adalah memposisikan ikon (atau teks) lokasi tertentu pada gambar (seperti peta google dengan titik-titik). Dan jika Anda memanfaatkan efek hover Divi, Anda dapat mengungkapkan teks tambahan saat mengarahkan kursor ke ikon untuk membuat tooltips yang menarik.

Dalam tutorial ini, saya akan menunjukkan cara memberi label pada gambar latar belakang dengan uraian yang akan berfungsi sebagai tooltips informatif tentang produk Anda. Untuk melakukan ini, saya akan menggunakan halaman Pendaratan Fitness Gym untuk memberi label gambar latar belakang dengan informasi tentang kebugaran berkualitas.

Mari kita mulai.

Sebuah Sneak Peek

Berikut ini adalah sneak peak dari desain yang akan kita buat dalam tutorial ini.

Apa yang kau butuhkan

Untuk tutorial ini, Anda memerlukan yang berikut:

• Tema Divi
• Halaman Arahan Fitness Gym dari Fitness Gym Layout Pack (tersedia dari Divi Builder)
• Gambar yang akan digunakan untuk gambar latar belakang Anda yang berukuran persis 320px kali 507px. Jangan ragu untuk menyeret yang ini ke desktop Anda dan menggunakannya untuk tutorial ini.
  

Mempersiapkan Tata Letak Premade

Untuk memulai, buat halaman baru, tambahkan judul, lalu sebarkan Visual Builder. Kemudian pilih “Choose a Premade Layout”. Dari popup beban dari perpustakaan, pilih tata letak Halaman Arahan Fitness Gym dan klik "Gunakan Tata Letak Ini".

Setelah tata letak dimuat ke halaman, gulir ke bawah ke bagian keempat dengan dua baris kolom yang memiliki judul "Program Unggulan" di kolom kanan. Kami akan menambahkan gambar latar belakang kami dengan tooltips di kolom kiri baris ini.

Gunakan editor sebaris untuk mengubah teks judul di kolom kanan menjadi “Smart Fitness”.

Menambahkan Gambar Latar Belakang dan Menyesuaikan Pengaturan Baris

Dengan desain ini, ukuran dan jarak sangat penting dan harus tepat. Dan, semuanya dimulai dengan ukuran gambar latar belakang kita. Seperti yang disebutkan sebelumnya, gambar yang kita gunakan untuk latar belakang harus berukuran 320px kali 507px. Karena lebar 320px adalah titik awal yang baik untuk seluler, ini akan memungkinkan kita membuat desain ramah seluler tanpa harus mengubah ukuran gambar kita.

Buka pengaturan baris dan tambahkan gambar latar belakang ke kolom 1. Kemudian perbarui yang berikut:

Kolom 1 Ukuran Gambar Latar: Ukuran Sebenarnya
Kolom 1 Posisi Gambar Latar: Kiri Tengah
Pengulangan Gambar Latar Kolom 1: Tidak Ada Pengulangan

Selanjutnya kita perlu menambahkan lebar khusus ke baris dan mengambil jarak atas dan bawah.

Lebar Kustom: 700px
Padding Kustom: 0px atas, 0px bawah

Menyetel lebar ke 700px akan memastikan baris tidak menjadi lebih kecil pada ukuran layar yang lebih kecil sebelum titik henti tablet.

Pada titik ini, saya pikir itu adalah ide yang baik untuk melanjutkan dan menetapkan ketinggian tertentu untuk kolom 1 sama dengan tinggi gambar latar belakang. Dengan cara ini kita tahu bahwa gambar akan tetap terlihat jika isi kolom tidak mengekspos seluruh gambar. Untuk melakukan ini, buka tab lanjutan dan tambahkan CSS khusus berikut di Elemen Utama Kolom 1:

height: 507px;

Sekarang tinggi kolom sama dengan tinggi gambar Anda dan tidak akan bergantung pada konten (atau modul) yang kita tambahkan ke baris.

Menambahkan Label Tooltip di atas Gambar Latar Belakang Menggunakan Blurb

Dengan gambar latar belakang kami di tempat, kami dapat mulai menambahkan uraian kami yang akan diposisikan dan ditata untuk berfungsi sebagai tooltips. Lanjutkan dan tambahkan modul uraian ke kolom 1 dan perbarui pengaturan uraian berikut:

Judul : “Fokus”
Isi: “Kunci sukses!”
Gunakan Ikon: Ya
Ikon: lihat tangkapan layar

Penting untuk menjaga Judul dan konten hanya beberapa kata karena kami ingin dapat memuat seluruh uraian di dalam gambar latar belakang.

Selanjutnya, Anda akan memperbarui pengaturan desain. Ini adalah desain blurb yang lebih canggih sehingga ada banyak opsi untuk diubah bersama dengan beberapa efek hover yang akan mengungkapkan konten blurb saat hover. Perbarui pengaturan desain uraian berikut:

Warna Ikon: #edf000
Ikon Lingkaran: YA
Warna Lingkaran: rgba(0,0,0,0)
Tampilkan Batas Lingkaran: YA
Warna Batas Lingkaran (default): rgba(0,0,0,0)
Warna Batas Lingkaran (arahkan kursor): #edf000
Penempatan Gambar/Ikon: Kiri
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 40px

Lanjutkan untuk menyesuaikan pengaturan desain sebagai berikut:

Judul Font Berat: Tebal
Warna Teks Judul (default): rgba(0,0,0,0)
Warna Teks Judul (default): #edf000
Warna Teks Tubuh (default): rgba(0,0,0,0)
Warna Teks Tubuh (default): #ffffff

(Perhatikan bahwa warna teks default benar-benar transparan untuk menyembunyikannya sampai Anda mengarahkan kursor ke uraian.)

Margin Kustom: 15px atas, 0px bawah, 90px kiri
Padding Kustom: 5px atas, 5px bawah, 5px kanan

(Margin khusus adalah cara Anda memposisikan ikon uraian di lokasi tertentu di atas gambar.)

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -154px
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan (default): rgba(0,0,0,0)
Warna Bayangan (arahkan kursor): #1e2441

(Bayangan kotak adalah cara kreatif untuk menambahkan warna latar belakang di belakang konten uraian. Secara default, bayangan kotak benar-benar transparan tetapi akan menampilkan warna biru yang bagus saat mengarahkan kursor.)

Sekarang pergi dan periksa hasil akhir dari uraian pertama Anda untuk memastikan efek hover dan desain sudah benar.

Selanjutnya, kita dapat menduplikasi modul uraian untuk membuat label tooltip kedua kita. Setelah Anda menduplikasi uraian, Anda dapat memperbarui konten ke teks apa pun yang Anda inginkan (singkat). Maka yang perlu Anda lakukan adalah memposisikan tooltip menggunakan margin khusus yang berbeda sebagai berikut:

Margin khusus: 0px atas, 0px bawah, 15px kiri

Untuk membuat uraian ketiga, Anda dapat menduplikasi uraian kedua.

Untuk uraian ketiga ini, kami akan kehabisan ruang di sisi kanan gambar kami sehingga kami benar-benar tidak akan memiliki banyak ruang untuk konten. Kita dapat menggunakan margin negatif untuk memperluas uraian di luar gambar, tetapi ini juga akan melampaui ukuran layar 320px di perangkat seluler. Jadi, kami akan memperkenalkan beberapa potongan kecil kode untuk membalik konten uraian kami sehingga ikon di sebelah kanan dan teks di sebelah kiri. Untuk melakukan ini, buka pengaturan uraian dan, di bawah tab Lanjutan, tambahkan CSS khusus berikut.

CSS Elemen Utama:

direction: rtl;

CSS Gambar Kabur:

padding-left: 15px;

Jika Anda belum menyadarinya, ikonnya sekarang ada di sebelah kanan. Sekarang yang perlu Anda lakukan adalah memposisikan uraian menggunakan margin khusus berikut:

Margin Kustom: 35px atas, 0px bawah, 0px kiri

Kita juga perlu menyesuaikan bayangan kotak agar muncul dari kiri bukan kanan sebagai berikut:

Posisi Horizontal Bayangan Kotak: 150px

Sekarang periksa tooltip terbalik di situs langsung.

Untuk uraian terakhir, salin uraian pertama di bagian atas kolom dan tempel di bawah uraian ketiga.

Kemudian perbarui margin sebagai berikut:

Margin Kustom: 0px atas, 100px kiri

Sekarang lihat hasil akhir dari desain!

Dan lihat efek hover tooltip itu!

Apakah Responsif?

Desain ini dibangun dibangun dengan mobile dalam pikiran dari awal. Gambar memiliki lebar 320px yang merupakan lebar sebagian besar smartphone kecil. Dan karena kami mengukur dan memposisikan semuanya menggunakan satuan panjang piksel, desain (termasuk tooltips) tidak bergerak ketika kami menyesuaikan ukuran browser.

Namun ada satu hal lagi yang mungkin perlu Anda lakukan untuk memastikan dan memaksimalkan lebar gambar di layar ponsel kecil. Secara default, baris Anda akan memiliki lebar 80% di seluler, jadi untuk menjadikannya 100%, Anda dapat menambahkannya sebagai CSS khusus ke elemen utama Baris Anda seperti:

width: 100%;

Lebar khusus 700 piksel Anda akan tetap berfungsi sebagai lebar maksimum di desktop, tetapi sekarang akan menjadi 100% di seluler.

Pikiran Akhir

Memberi label pada gambar latar belakang dengan tooltips dan efek hover seperti ini dapat menambahkan elemen desain profesional yang melibatkan audiens Anda dengan informasi yang berguna. Dan saya yakin ada banyak cara untuk menggunakan konsep ini untuk kasus penggunaan lainnya. Tapi itu memang datang dengan tantangan jika Anda berencana untuk mempertahankan desain di ponsel juga. Triknya adalah memikirkan seluler terlebih dahulu dan merencanakan ke depan. Saya harap ini menjadi inspirasi untuk proyek-proyek masa depan di masa depan. Jika ada, setidaknya Anda tahu cara membuat uraian singkat dengan ikon atau kanan :).

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!