Buat tanda tangan email HTML profesional

Tanda tangan email (juga disebut footer email) adalah blok informasi di akhir setiap pesan yang dikirim. Berisi detail kontak, jabatan, nama perusahaan, dan sering kali tautan ke situs web atau kalender pertemuan.

Penerima tidak perlu mencari nomor telepon di pesan sebelumnya — semua detail tersedia langsung. Tanda tangan email profesional juga menunjukkan bahwa Anda memperhatikan detail dan menjaga citra perusahaan yang konsisten dalam korespondensi bisnis.

Tab Detail berisi semua kolom yang dapat Anda isi. Hanya dua yang wajib: nama dan alamat email. Kolom lainnya bersifat opsional dan akan muncul di tanda tangan hanya jika diisi.

Kolom di tab Detail

• Baris di atas nama — teks tambahan yang ditampilkan di atas nama. Anda dapat memasukkan nama perusahaan, tagline, atau slogan.
• Avatar / logo (URL gambar) — URL ke foto profil atau logo perusahaan. Gambar harus persegi (min. 120×120 px) dan dapat diakses publik. Setelah menempelkan URL, opsi tambahan muncul: Bentuk avatar (lingkaran, membulat, atau persegi) dan Ukuran avatar (kecil — 40 px, sedang — 56 px, besar — 72 px).
• Nama lengkap — kolom wajib. Masukkan nama lengkap Anda.
• Tag nama — teks pendek di samping nama, mis. kata ganti atau jabatan singkat.
• Jabatan — peran Anda di perusahaan, mis. Sales Manager, Marketing Specialist.
• Nama perusahaan — nama organisasi yang Anda wakili.
• Baris tambahan — deskripsi singkat tentang apa yang Anda lakukan atau tawarkan.
• Email — kolom wajib. Masukkan alamat email bisnis Anda.
• Telepon — nomor kontak. Format bebas, mis. +62 812 345 6789.
• Situs web — URL lengkap situs web Anda, dimulai dengan https://.
• Alamat — alamat fisik perusahaan (jalan, kota, kode pos).
• Detail formal — NPWP, nomor izin, atau detail lain yang diperlukan di industri Anda.

Tombol CTA (call-to-action) adalah elemen yang dapat diklik yang mengarahkan penerima ke halaman tertentu. Bisa berupa tautan ke kalender pertemuan, formulir kontak, atau penawaran. Generator memungkinkan penambahan dua tombol CTA.

Tombol utama

1. Buka tab Tombol di editor.
2. Di bagian Tombol utama, masukkan teks yang akan dilihat penerima, mis. Jadwalkan konsultasi gratis.
3. Di kolom Link CTA, tempelkan URL lengkap. Alamat harus dimulai dengan https://.

Tombol sekunder

Anda dapat menambahkan tombol CTA kedua bergaya outline (latar transparan dengan border). Isi kolom di bagian Tombol sekunder dengan cara yang sama seperti tombol utama.

Pembulatan tombol

Di bagian bawah tab Tombol Anda akan menemukan opsi Pembulatan tombol. Tiga varian tersedia: Tidak ada (sudut tajam), Sedikit (sedikit membulat), atau Penuh (tombol oval).

Jika Anda mengosongkan kedua kolom, tombol tidak akan muncul di tanda tangan. Jika Anda hanya mengisi satu kolom, tombol juga tidak akan terlihat — dibutuhkan teks dan tautan.

Di tab Media Sosial Anda dapat menambahkan tautan ke profil Anda. Generator mendukung dua belas platform: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (sebelumnya Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram, dan Pinterest.

Cara melakukannya

1. Buka tab Media Sosial di editor.
2. Di samping setiap platform Anda akan menemukan kolom URL. Tempelkan tautan lengkap ke profil Anda, mis. https://www.linkedin.com/in/profilAnda.
3. Isi hanya kolom yang Anda butuhkan. Kolom kosong tidak akan muncul di tanda tangan.

Ikon media sosial

Di bagian bawah tab Media Sosial Anda akan menemukan opsi Tampilkan ikon di samping nama layanan. Jika diaktifkan, tautan akan ditampilkan sebagai ikon SVG berwarna alih-alih hanya nama.

• Ukuran ikon — pilihan: Kecil (16 px), Sedang (20 px), atau Besar (24 px).
• Warna ikon — Warna platform (warna default setiap platform), Warna aksen (warna aksen seragam), atau Warna teks.

Di tab Tampilan Anda dapat menyesuaikan warna, font, dan elemen visual lainnya dari tanda tangan.

Tema warna

Di bagian atas tab Anda akan menemukan lima tema siap pakai: Gelap, Biru, Ungu, Hijau, dan Abu-abu. Mengklik tema secara otomatis mengatur warna aksen dan warna teks. Ini cara tercepat untuk mendapatkan tampilan tanda tangan yang konsisten.

Warna

• Warna aksen — digunakan di bar samping/atas, tombol CTA, dan tautan. Anda dapat memilih warna apa pun dari palet.
• Warna teks — warna semua teks di tanda tangan (nama, detail kontak, disclaimer).
• Warna latar belakang — warna latar belakang seluruh tanda tangan. Putih secara default, tetapi dapat diubah.

Font dan ukuran

• Font — pilihan: Arial, Verdana, Tahoma, Trebuchet MS, dan Georgia. Semuanya aman untuk email dan akan ditampilkan dengan benar untuk penerima.
• Ukuran teks — tiga pilihan: Kecil (12 px), Standar (14 px), dan Lebih besar (16 px).

Pengaturan tambahan

• Bingkai tanda tangan — Anda dapat menambahkan bingkai ke tanda tangan dengan memilih kombinasi sisi (kiri, kanan, atas, bawah). Memilih semua sisi secara otomatis mengatur bingkai penuh. Bingkai menggunakan warna aksen.

Di tab Gaya Teks Anda dapat menyesuaikan warna dan ukuran font secara individual untuk setiap elemen teks di tanda tangan.

Elemen yang tersedia

Hanya elemen yang saat ini memiliki konten di tanda tangan yang terlihat. Untuk setiap elemen Anda dapat mengatur:

• Nama — ditampilkan dalam warna aksen secara default.
• Jabatan — peran di perusahaan.
• Perusahaan — nama organisasi.
• Detail kontak — email, telepon, situs web (label).
• Media sosial — tautan profil.
• Disclaimer hukum — teks hukum di bagian bawah tanda tangan.

Cara mengubah warna

Di samping setiap elemen Anda akan menemukan baris opsi warna. Klik kotak warna untuk memilihnya. Anda juga dapat menambahkan warna kustom dengan mengklik kotak berwarna dengan tanda plus — pilih warna dan klik Simpan. Warna kustom (hingga 8) dibagikan antar semua elemen.

Tombol ikon reset mengembalikan warna default elemen.

Cara mengubah ukuran

Di baris kedua Anda akan menemukan kontrol ukuran dengan tombol - dan +. Nilai menunjukkan offset relatif terhadap ukuran font dasar (diatur di tab Tampilan). Rentang: dari -4 hingga +4 piksel.

Di tab Jarak Anda dapat mengontrol jarak antar elemen tanda tangan secara presisi.

Padding dalam tanda tangan

Di bagian atas tab Anda akan menemukan opsi padding dalam — jarak antara konten tanda tangan dan tepinya. Tiga nilai tersedia: 8 px (kecil), 16 px (sedang), dan 24 px (besar).

Jarak antar elemen

Di bawah padding Anda akan menemukan kontrol untuk elemen tanda tangan individual. Setiap kontrol memiliki tombol + dan - untuk menambah atau mengurangi jarak. Hanya opsi untuk elemen yang saat ini ada di tanda tangan yang terlihat.

• Setelah nama — jarak di bawah baris nama.
• Setelah jabatan / perusahaan — jarak di bawah baris jabatan dan nama perusahaan.
• Setelah baris tambahan — jarak di bawah deskripsi (jika diisi).
• Setelah detail kontak — jarak di bawah email, telepon, dan situs web.
• Setelah media sosial — jarak di bawah tautan profil.
• Setelah tombol CTA — jarak di bawah tombol (jika diaktifkan).
• Sebelum disclaimer — jarak di atas teks disclaimer hukum.

Jika Anda mengosongkan kolom (mis. menghapus nomor telepon), opsi jarak yang sesuai akan otomatis hilang dari tab.

Di tab Disclaimer / Hukum Anda dapat menambahkan teks hukum yang akan muncul di bagian bawah tanda tangan dalam font yang lebih kecil.

Kapan menambahkan disclaimer

• Korespondensi bisnis — pemberitahuan kerahasiaan dan permintaan untuk menghapus jika pengiriman salah.
• Persyaratan industri — beberapa industri (mis. hukum, medis, keuangan) memerlukan informasi tertentu di setiap pesan.
• GDPR — informasi tentang pemrosesan data pribadi, jika perusahaan adalah pengendali data.

Secara default, kolom diisi dengan contoh teks kerahasiaan. Anda dapat mengedit, menghapus, atau menggantinya dengan disclaimer Anda sendiri. Jika Anda mengosongkan kolom, tidak ada disclaimer yang akan muncul di tanda tangan.

Garis pemisah

Di bawah kolom teks Anda akan menemukan opsi Tampilkan pembatas antara detail kontak dan disclaimer. Aktifkan untuk menambahkan garis horizontal antara detail kontak dan disclaimer hukum.

Setelah mengaktifkan garis, opsi kustomisasi tambahan muncul:

• Gaya garis — pilihan: solid, putus-putus, atau titik-titik.
• Ketebalan garis — tiga pilihan: 1 px, 2 px, atau 3 px.
• Warna garis — abu-abu default (#e5e7eb). Anda dapat memilih warna apa pun dari palet atau mengembalikan default dengan mengklik tombol Default.

Generator secara otomatis menyimpan semua pengaturan di memori browser (localStorage). Setelah menyegarkan halaman atau membuka kembali alat, data, tata letak, warna, dan semua opsi lainnya akan dipulihkan.

Bagaimana simpan otomatis bekerja?

Setiap perubahan (teks, warna, tata letak, jarak) langsung disimpan di memori browser. Penyimpanan terjadi secara otomatis di latar belakang — tanpa mengklik tombol apa pun.

Cara mereset pengaturan

Di bawah pratinjau tanda tangan Anda akan menemukan tombol Reset tampilan. Setelah mengklik, dialog konfirmasi akan muncul. Mengonfirmasi reset akan mengembalikan semua data dan pengaturan ke nilai default. Operasi ini tidak dapat dibatalkan.

Ekspor dan impor konfigurasi

Di bawah pratinjau tanda tangan Anda akan menemukan dua tombol tambahan: Ekspor pengaturan dan Impor pengaturan. Ekspor menyimpan semua data, warna, tata letak, jarak, dan gaya teks ke file JSON. Impor memuat konfigurasi yang sebelumnya disimpan dari file.

Fitur ini sangat berguna ketika Anda ingin mentransfer konfigurasi tanda tangan antar komputer, berbagi pengaturan dengan rekan kerja, atau menyimpan cadangan pengaturan sebelum reset.

Panel pratinjau ditampilkan di sisi kanan editor dan diperbarui secara otomatis dengan setiap perubahan. Pratinjau bersifat sticky, sehingga tetap terlihat bahkan saat menggulir opsi pengeditan.

Mengganti latar pratinjau

Di atas pratinjau Anda akan menemukan tiga tombol perubahan latar: Terang (latar abu-abu default), Gelap (latar gelap, berguna untuk memeriksa keterbacaan pada latar gelap), dan Papan catur (pola papan catur, memungkinkan Anda melihat transparansi dan tepi tanda tangan).

Tombol aksi

Di bawah pratinjau Anda akan menemukan beberapa tombol:

• Salin tanda tangan (Gmail / Outlook) — menyalin tanda tangan ke clipboard sebagai HTML terformat. Tempelkan langsung di pengaturan tanda tangan.
• Salin kode HTML — menyalin kode HTML mentah tanda tangan ke clipboard. Berguna jika Anda ingin menempelkan kode di editor HTML atau CMS.
• Unduh sebagai HTML — menyimpan kode tanda tangan sebagai file .html ke disk. Berguna untuk arsip atau berbagi dengan developer.
• Lihat kode HTML — membuka modal dengan kode sumber HTML lengkap tanda tangan. Anda dapat meninjau kode dan menyalinnya langsung dari modal.
• Ekspor pengaturan — menyimpan konfigurasi lengkap tanda tangan (data, warna, tata letak, jarak, gaya) ke file JSON.
• Impor pengaturan — memuat konfigurasi dari file JSON. Semua pengaturan akan diterapkan secara otomatis.
• Reset tampilan — mengembalikan semua data dan pengaturan ke nilai default (setelah konfirmasi).