Cara Memperbaiki Tautan Biru Gmail untuk Email Dream Come True

Kelas .ii mengacu pada kelas yang diberikan ke div yang berisi seluruh email di Gmail. a[href] adalah pemilih atribut CSS. Ini menyatakan bahwa tautan apa pun di kelas .ii harus berwarna biru.

Alamat dan nomor telepon biasanya tidak ditautkan dalam email. Namun, Gmail mengenalinya dan mengubahnya menjadi tautan apakah Anda suka atau tidak. Karena tautan ini dibuat dengan cepat, mereka tidak memiliki gaya sebaris yang melekat padanya, dan dengan demikian, gaya default di atas digunakan.

Ada tiga metode yang dapat Anda gunakan untuk menghentikan tautan menjadi biru, tergantung pada apakah Anda ingin tautan ini terlihat sama atau berbeda dari tautan lain di email Anda.

Opsi 1: Gunakan metode <span>

Metode <span> adalah teknik paling sederhana untuk menghentikan nomor telepon dan alamat menjadi biru di Gmail. Ini sempurna jika Anda ingin menyesuaikannya dengan gaya secara berbeda dari tautan Anda yang lain sambil mempertahankan fungsinya. Berikut caranya:

Bungkus nomor telepon atau alamat dalam <span></span>
Beri <span> sebuah kelas, misalnya: <span class="contact"></span>
Deklarasikan kelas di bagian <style> email Anda untuk menyesuaikan nomor telepon atau alamat sesuai keinginan Anda
Laba!

Berikut ini contoh HTML tempat alamat muncul di email:

Dan inilah contoh deklarasi gaya untuk kelas "kontak" di blok <style> di <head> email Anda di mana kami mengatur tautan menjadi hitam (#000000) dan digarisbawahi:

Ubah warna hitam dalam kode contoh kami dengan menukar #000000 ke kode hex warna yang sesuai dengan merek Anda. Jika Anda tidak ingin tautan Anda digarisbawahi, ubah garis bawah dalam kode Anda menjadi tidak ada.

Membuat <span> dengan nama kelas di sekitar alamat atau nomor telepon memberi Anda sesuatu untuk ditargetkan menggunakan CSS. Menargetkan <span> saja tidak akan membuat gaya tautan. Ini hanya akan memberi gaya pada teks yang tidak ditautkan , sedangkan tautan di dalam <span> akan tetap memiliki gaya biru default. Jadi, untuk menargetkan tautan di dalam rentang, deklarasi gaya menyertakan nama kelas serta "a."

Ini sangat bagus untuk nomor telepon jika Anda ingin menambahkan <a href=”tel:XXX-XXXX”> langsung ke nomor telepon tetapi tidak ingin nomor telepon mencoba membuka aplikasi telepon di desktop. Dan kemudian Anda harus menyembunyikan dan menampilkan konten untuk desktop vs. seluler. Lewati saja sakit kepala dan manfaatkan fakta bahwa klien email akhirnya melakukan sesuatu untuk membantu Anda.

Opsi 2: Ganti semua gaya tautan

Pilihan lainnya adalah mengatur gaya default Anda sendiri yang akan diterapkan ke semua tautan dalam email. Opsi ini sempurna jika Anda ingin tautan alamat atau nomor telepon Anda terlihat sama dengan tautan Anda yang lain sambil mempertahankan fungsionalitas yang diberikan Gmail kepada mereka.

Tambahkan deklarasi gaya khusus Gmail ini ke blok <style> Anda di <head> email Anda, seperti:

Kemudian tambahkan ID "body" ke tag body:

Garis bawahi “u” adalah metode penargetan untuk Gmail. Ini mengubah doctype menjadi tag garis bawah, dan Gmail adalah satu-satunya klien yang berperilaku seperti ini. Jadi, menggunakan tag bergaris bawah dengan pemilih saudara yang berdekatan dari div atau id/kelas pada div tersebut di CSS adalah metode unik yang hanya menargetkan klien Gmail (setidaknya untuk saat ini). Dalam contoh ini, kami telah menggunakan id dari "body."

Dengan metode ini, jika Anda ingin tautan di email Anda memiliki gaya yang sedikit berbeda, ini perlu ditambahkan sebaris ke tautan khusus tersebut karena teknik di atas akan menata semua tautan seperti yang telah ditentukan dalam deklarasi gaya.

Namun, ada sedikit peringatan dengan metode ini.

Ini tidak berfungsi ketika pengguna Gmail menonaktifkan gambar secara default dan kemudian mengaktifkannya. Ini karena bug di Gmail yang mengubah gaya secara tidak benar setelah gambar diaktifkan. Pengembang email Remi Parmentier memiliki beberapa detail lebih lanjut tentang bug ini.

Opsi 3: Tambahkan tag <a> dan buat mereka menautkan sendiri

Dengan secara proaktif menautkan elemen yang akan ditautkan otomatis oleh Gmail, Anda memiliki kontrol lebih besar atas gaya dan warnanya. Opsi ini sempurna jika Anda juga ingin mengubah tempat tautan konten , Mungkin Anda memiliki halaman kontak di situs web Anda, Anda lebih suka mengambil pelanggan daripada meminta mereka secara otomatis membuka aplikasi navigasi ponsel mereka atau langsung menghubungi Anda secara langsung.

Pada contoh di atas, alamat fisik ditata dengan warna abu-abu tanpa garis bawah dan ditautkan ke halaman kontak situs web kami. Ini akan mencegah Gmail menerapkan gaya dan fungsionalitas defaultnya.

Selamat tinggal, tautan biru Gmail

Dengan salah satu dari tiga metode kami, tautan biru tidak akan lagi membuang desain email Anda dan membuatnya terlihat rusak di Gmail. Dan itu bagus—karena email yang rusak dapat merusak keterlibatan dan konversi (dan Anda pasti tidak menginginkannya).

Punya pertanyaan tentang metode kami? Atau punya solusi lain untuk dibagikan? Beri tahu kami di komentar di bawah.

Buat email sesuai merek dan bebas kesalahan dengan Litmus

Lihat tampilan email Anda (tidak ada lagi tautan biru, kan?) di lebih dari 90 klien email, aplikasi, dan perangkat—termasuk Gmail. Ucapkan selamat tinggal pada email yang rusak. Wah!

Mulai uji coba gratis Anda →

Awalnya diterbitkan pada 13 Oktober 2017, oleh Jaina Mistry. Terakhir diperbarui pada 16 Juli 2021.

Bagikan, Terima Kasih!

Yang Perlu Anda Ketahui untuk Mengelola 3 Jenis Pelanggan Email Tidak Aktif

Pelajari cara mendekati pelanggan tidak aktif berdasarkan jenis pelanggan email tidak aktif mereka sehingga Anda dapat membuat strategi re-engagement yang efektif.
Baca lebih lajut

Contoh dan Strategi Pemasaran Email Singles Day Favorit Kami

Email Singles' Day sedang populer di seluruh dunia (tidak hanya di China). Lihat 8 contoh email untuk menginspirasi kampanye Anda plus strategi untuk memulai perencanaan.
Baca lebih lajut

Matriks Metrik Email Holistik: Apakah Anda Melihat Gambaran Secara Keseluruhan?

Lihat keseluruhan gambaran kinerja pemasaran email dengan metrik email holistik jangka pendek dan jangka panjang. Dan buat kampanye berperforma lebih tinggi sekarang juga.
Baca lebih lajut

Cara Mengeluarkan Email Black Friday dan Cyber Monday (BF/CM) dari Taman

Tampil menonjol dan konversi pelanggan dengan strategi yang terbukti benar ini untuk email Black Friday Cyber Monday dan contoh sempurna untuk terinspirasi.
Baca lebih lajut

Rendering Email Outlook: Bagaimana Saya Belajar Berhenti Khawatir dan Mencintai Outlook

Ingin tahu mengapa email Anda terlihat buruk di Outlook? Pelajari tentang rendering email dan masalah tampilan yang mungkin Anda hadapi dan cara memperbaikinya untuk kesempurnaan email.
Baca lebih lajut

Cara Memperbaiki Tautan Biru Gmail untuk Email Dream Come True

Perhatikan aksesibilitas

Tiga cara untuk mengubah warna tautan biru di Gmail

Opsi 1: Gunakan metode <span>

Opsi 2: Ganti semua gaya tautan

Opsi 3: Tambahkan tag <a> dan buat mereka menautkan sendiri

Selamat tinggal, tautan biru Gmail