Müşterilerinizle internette etkileşim halindeyseniz ve çok sık E-mail kullanıyorsanız, bazen dikkat çekici bir mail imzası oluşturmak çok önemlidir. Bir işletmeyi temsil ederken, hizmetlerinizi veya ürünlerinizi sunmak potansiyel müşterilerinize ulaşmada size yardımcı olabilir. Profesyonel olarak oluşturulmuş bir mail imzası, okuyucuların ilgisini çekmenize, sizinle kolay bir şekilde iletişim kurmalarına yardımcı olur. Bu nedenle, doğru biçimlendirilmiş, logonuzu veya sloganınızı içeren en iyi HTML mail imzası tam ihtiyacınız olan şeydir.
Bu makalemizde HTML imza oluşturma, mail imza tasarım örnekleri, mail imza ikonları yerleştirme hakkında detaylı bilgileri bulabileceksiniz.
HTML Mail İmzası Nedir?
HTML mail imzası, iletinizin altında görünen kişi veya şirket bilgilerinin yer aldığı bir metin parçasıdır. Görsel mail imzası ile arasındaki fark, HTML email imzası metinlerden oluşurken, görsel mail imzası resimlerden oluşur.
HTML imza, E-posta istemcileri tarafından sorunsuzca görüntülenirken, resim imzası çoğu kez zararlı veya istenmeye posta olarak algılanıp engellenebilmektedir. Genel bir kural olarak, e-posta iletilerinizin gövdesinde yer alan resimlerden daha fazla metin olması gerekir. Bu, istenmeyen postaları gerçek e-postalardan filtrelemek için spam filtrelerinin kontrol ettiği önemli bir ölçüttür.
HTML E-Posta İmzası Oluşturma:
Bir HTML mail imzası oluştururken dikkate almamız gereken ilk şeylerden biri, düz HTML yerine, tabloları kullanmamız gerektiğidir. Bunun başlıca nedeni, Outlook 2007, 2010, 2013 e-postalarını oluşturmak için Microsoft Word’ü kullanması ve CSS’yi desteklememesidir. Şimdi HTML mail imza nasıl yapılır birlikte inceleyelim.
1. Adım: İmzanızın her cihazda düzgün görünmesi için tabloya sabit bir genişlik eklemek genellikle iyi bir fikirdir. Bu örnekte, 400 piksel genişlik kullanıyoruz.
1 |
<table border="0" cellpadding="0" cellspacing="0" width="400"> |
Not: Table etiketinden sonra bir <tbody> etiketi ve ardından tr (satır) ve td (hücre) etiketleri gelmelidir.
2. Adım: İmzaya işletmenizin logosunu eklemek isteyebilirsiniz. Bunu yapmak için içine <td> ve <tr> etiketi ekleyin. Bu td etiketine sabit bir genişlik ve yükseklik vermelisiniz.
1 2 3 4 5 |
<tr> <td border="0" cellpadding="0" cellspacing="0" height="43" width="231"> <a href="https://www.kukumav.net"><img src="https://www.kukumav.net/images/logo.png" alt="Kukumav.Net Logo"></a><br> </td> </tr> |
3. Adım: Şimdi çalışanların bilgilerini ekleme zamanı. Bu öğe için başka bir satır ve hücre ekleyin. Hücreye, metin için kullanmak istediğiniz yazı stili ve boyutu ekleyin. Ardından logo ile sonraki paragraf arasındaki boşluğu ayarlamak için bir yükseklik eğeri girin.
1 2 3 4 5 6 7 |
<tr> <td height="80" style="font-family:Helvetica, Arial, sans-serif; font-size:18px; font-style:bold;"> <strong>Enis ÖZTÜRK</strong> <br> <span style="font-size:17px; font-weight:400;">Dijital Pazarlama Uzmanı</span> </td> </tr> |
4. Adım: Kişinin adını ve şirketteki görevini eklediğimize göre şimdi telefon, email ve adres gibi bilgileri ekleyelim. Her biri için yeni satır ve hücreler ekleyerek bu adımı da tamamlayalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<tr> <td height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;"><strong style="color:#000">Telefon:</strong> 0 (555) 111 22 33 </td> </tr> <tr> <td class="hover" height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#e0070c;"><strong style="color:#000">Email:</strong> <a href="mailto:enisozturk@kukumav.net" onMouseOver="this.style.color='#ff9800'" onMouseOut="this.style.color='#e0070c'" style="color:#e0070c; ">enisozturk[@]kukumav.net</a> </td> </tr> <tr> <td height="60" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;"><strong style="color:#000">Adres:</strong> Örnek Mah. Deneme Sok. No:1 Kukumav Plaza 34295 <br> Beşiktaş/İstanbul<br><br> </td> </tr> |
Not: Bağlantılarda, fareyle üzerine gelme renkleri “onMouseOver” ve “onMouseOut” olayları kullanılarak ayarlayabilirsiniz.
5. Adım: Son olarak sosyal medya ikonlarımızı ekleyerek bağlantı verelim. Ayrıca imzanın sonuna bir bilgilendirme mesajı eklemek şık olabilir.
1 2 3 4 5 6 7 8 9 |
<tr> <td height="40"> <a href="https://www.facebook.com/kukumavnet/" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/facebook.png" alt="Facebook Icon"></a> <a href="https://twitter.com/KukumavNet" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/twitter.png" alt="Twitter İcon"></a> <a href="https://www.instagram.com/kukumavnet//" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/instagram.png" alt="Instagram Icon"></a> <a href="https://www.linkedin.com/company/kukumavnet/" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/linkedin.png" alt="Linkedin Icon"></a> <a href="https://www.youtube.com/channel/UCkscrRaIP5huAIsdXAfgF4Q" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/youtube.png" alt="Youtube Icon"></a> </td> </tr> |
HTML mail imzası kodlarını tek bir pencerede görecek olursak, aşağıdaki gibi olmalıdır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<head> <meta charset="utf-8"> </head> <table border="0" cellpadding="0" cellspacing="0" width="400"> <tbody> <tr> <td border="0" cellpadding="0" cellspacing="0" height="43" width="231"> <a href="https://www.kukumav.net"><img src="https://www.kukumav.net/images/logo.png" alt="Kukumav.Net Logo"></a><br> </td> </tr> <tr> <td height="80" style="font-family:Helvetica, Arial, sans-serif; font-size:18px; font-style:bold;"> <strong>Enis ÖZTÜRK</strong> <br> <span style="font-size:17px; font-weight:400;">Dijital Pazarlama Uzmanı</span> </td> </tr> <tr> <td height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;"><strong style="color:#000">Telefon:</strong> 0 (555) 111 22 33 </td> </tr> <tr> <td class="hover" height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#e0070c;"><strong style="color:#000">Email:</strong> <a href="mailto:enisozturk@kukumav.net" onMouseOver="this.style.color='#ff9800'" onMouseOut="this.style.color='#e0070c'" style="color:#e0070c; ">enisozturk[@]kukumav.net</a> </td> </tr> <tr> <td height="60" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;"><strong style="color:#000">Adres:</strong> Örnek Mah. Deneme Sok. No:1 Kukumav Plaza 34295 <br> Beşiktaş/İstanbul<br><br> </td> </tr> <tr> <td height="40"> <a href="https://www.facebook.com/kukumavnet/" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/facebook.png" alt="Facebook Icon"></a> <a href="https://twitter.com/KukumavNet" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/twitter.png" alt="Twitter İcon"></a> <a href="https://www.instagram.com/kukumavnet//" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/instagram.png" alt="Instagram Icon"></a> <a href="https://www.linkedin.com/company/kukumavnet/" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/linkedin.png" alt="Linkedin Icon"></a> <a href="https://www.youtube.com/channel/UCkscrRaIP5huAIsdXAfgF4Q" target="_blank"><img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/youtube.png" alt="Youtube Icon"></a> </td> </tr> <tr> <td height="40"> <small style="font-family:Helvetica, Arial, sans-serif; font-size:10px; color:#4d4d4e;">Bilgilendirme: Bu mesajı yazdırmadan önce çevreye verebileceğiniz zararları bir kez daha düşününüz.</small> </td> </tr> </tbody> </table> |
Mail imzanızda Türkçe karakter sorunu yaşamamak için kod satırının en başına aşağıdaki kodu ekleyebilirsiniz;
1 2 3 |
<head> <meta charset="utf-8"> </head> |
HTML mail imzamızı oluşturduğumuza göre şimdi bunu nasıl ekleyeceğimize bakalım.
Microsoft Outlook HTML İmza Ekleme:
HTML mail imzamızı sorunsuz bir şekilde oluşturduk. Şimdi Microsoft Outlook imza ekleme nasıl yapılır adım adım inceleyim.
1. Adım: Öncelikle Outlook imzalarının bulunduğu klasöre ulaşmamız gerekir. Aşağıdaki dosya yolunu takip edin.
C:Users > KullanıcıAdı > AppData > Roaming > Microsoft > Signatures
Bu dosyaları göremiyorsanız, önce gizli klasörleri göster seçeneğini ayarlamalısınız. Bunu nasıl yapacağınızı bilmiyorsanız, Microsoft’un gizli dosyaları gösterme makalesini inceleyin.
Eğer bu işlemle uğraşmak istemezseniz, “Windows tuşu +R” kısayolu tuşları ile Çalıştır penceresine %appdata% yazarak da ilgili klasörlere kolayca ulaşabilirsiniz.
2. Adım: Signatures klasörüne ulaştıktan sonra aşağıda boş bir klasör veya mevcut görsel imzalarınızın olduğu dosyaları göreceksiniz. Bu alana oluşturduğumuz HTML mail imzasını ekleyelim.
Not: HTML olarak tasarladığınız dosyanızın uzantısını “htm” olarak değiştirin.
3. Adım: Artık her şey hazır şimdi Microsoft Outlook’u açıp imza kısmından varsayılan imzanızı seçerek kullanmaya başlayabilirsiniz.
HTML mail imza oluşturma ve Outlook mail imza ekleme adımlarını tamamladık ve günün sonunda oluşturduğumuz HTML mail imzası yukarıdaki gibi görünüyor. Mail ileti penceresinde logonuzun ve sosyal ikonlarınızın boyutlarını mouse yardımıyla büyütüp küçültebileceksiniz.
Hazırladığımız HTML mail imzasını indirmek isterseniz Github HTML mail imzası oluşturma bölümünü ziyaret edin.
HTML mail imza oluşturma ve Outlook imza ekleme makalemizin sonuna geldik. Ayrıca Outlook şirket maili kurma hakkında bilginiz yoksa blogumuzu inceleyin. HTML mail imza tasarımı ile ilgili yardıma ihtiyacınız olursa yorum yaparak sorularınızı bile iletebilirsiniz.
Kukumav.Net Dijital Pazarlama Ajansı kurucusu. SEO, Google Ads, WordPress, e-ticaret ve sosyal medya reklamları konusunda uzman.
Outlook da imzaya kayan metin nasıl eklenir ?
Merhaba,
Açık kod için çok teşekkür ederim. İletişim bilgilerine belirteç ekleyebileceğimiz bir versiyonun örneklemesi var mı?
Selamlar, konu ile alakalı sizinle görüşebilir miyiz.
Sosyal medya hesaplarınızdan veya WhatsApp hattımızdan bizimle iletişime geçebilirsiniz.
Comments are closed.