Maily
Adım Adım Rehber

Maily ile email şablonları nasıl oluşturulur?

Profesyonel e-posta şablonları oluşturmak hiç bu kadar kolay olmamıştı. Tasarla, düzenle, export et hepsi dakikalar içinde.

Geliştiriciler için
Pazarlamacılar için
Teknik bilgi gerektirmez
Adım 1

Şablon Oluşturma

Maily'nin görsel editörü ile kod yazmadan profesyonel e-posta şablonları oluşturabilirsiniz. Hazır şablon galerisinden başlayın veya sıfırdan kendi tasarımınızı yapın.

Canlı Önizleme

Her değişikliği anında görün. Yaptığınız düzenlemeler gerçek zamanlı olarak önizleme panelinde yansır.

Görsel Düzenleme

Renkler, fontlar, butonlar ve içerikler için kullanıcı dostu form arayüzü. Kod bilgisi gerektirmez.

Dinamik Placeholder'lar

{{ user.name }} veya {{ company }} gibi değişkenler kullanarak kişiselleştirilmiş e-postalar oluşturun.

💡 Placeholder sistemi neden var?
Placeholder'lar, aynı şablonu farklı alıcılar için kişiselleştirmenizi sağlar. Export aldığınızda bu değişkenler korunur ve backend'inizde gerçek değerlerle değiştirilir.

Maily Editor
Karşılama
Merhaba {{user.name}}
Buton Metni
Hesabı Aktifle
Buton Rengi
Önizleme
Merhaba Sarah! 👋
Aktifle
Adım 2

Export Türlerini Anlamak

Maily, şablonlarınızı farklı formatlarda export etmenize olanak tanır. Her format farklı kullanım senaryoları için optimize edilmiştir.

HTML Export

Standart HTML formatında e-posta şablonu. Tüm e-posta servisleriyle uyumlu, evrensel çözüm.

Ne zaman kullanılır?
  • Mailchimp, SendGrid, Postmark gibi servislere direkt yükleme
  • Pazarlama e-postaları ve kampanyalar
  • Hızlı ve basit entegrasyon
Herkes için ideal

MJML Export

MJML, responsive e-postalar için geliştirilen bir markup dilidir. Daha okunabilir kod, daha kolay bakım.

Neden tercih edilir?
  • Otomatik responsive layout
  • Tüm e-posta istemcilerinde tutarlı görünüm
  • CI/CD pipeline'larında HTML'e dönüştürme
Geliştiriciler için
Güçlü

React Export

E-posta şablonunuzu TypeScript destekli React component'i olarak alın. Next.js ve modern stack'ler için ideal.

Neden güçlü?
  • Placeholder → Props dönüşümü (tip güvenliği)
  • @react-email ile mükemmel uyum
  • renderToStaticMarkup ile SSR desteği
Next.js + React
Adım 3

Export Aldıktan Sonra Ne Yapacağım?

Her export türü için adım adım kullanım rehberi. En önemli kısım burası!

HTML Export Aldıktan Sonra

  1. 1
    İndirdiğiniz HTML dosyasını açın veya kopyaladığınız kodu kullanın
  2. 2
    E-posta servisinize gidin (Mailchimp, SendGrid, etc.)
  3. 3
    'Custom HTML' veya 'Code Editor' seçeneğini bulun
  4. 4
    HTML kodunu yapıştırın ve kaydedin
  5. 5
    Placeholder'ları servisinizin değişken formatına çevirin
Örnek: SendGrid
<!-- Maily'den gelen kod -->
<p>Merhaba {{user.name}},</p>
<!-- SendGrid formatına çevrilmiş -->
<p>Merhaba {{name}},</p>

MJML Export Aldıktan Sonra

  1. 1
    MJML dosyasını projenize kaydedin
  2. 2
    MJML CLI veya API ile HTML'e çevirin
  3. 3
    Oluşan HTML'i e-posta gönderim sisteminize entegre edin
  4. 4
    Build sürecinize MJML derleme adımı ekleyin (opsiyonel)
Terminal
# MJML CLI ile HTML'e çevir
npx mjml input.mjml -o output.html
# veya watch mode
npx mjml --watch src/emails

React Export Aldıktan Sonra

  1. 1
    Component'i projenize ekleyin (örn: /emails/WelcomeEmail.tsx)
  2. 2
    Props olarak dinamik verileri geçirin
  3. 3
    react-dom/server ile HTML string'e çevirin
  4. 4
    Nodemailer, Resend veya SendGrid API ile gönderin
send-email.ts
import { renderToStaticMarkup } from "react-dom/server"
import { WelcomeEmail } from "@/emails/WelcomeEmail"
const html = renderToStaticMarkup(
<WelcomeEmail
userName="Onur"
actionUrl="https://..."
/>
)
SSS

Sık Sorulan Sorular

Export aldığım dosya bozulur mu?

Hayır. Export aldığınız dosyalar tam olarak editörde gördüğünüz şekilde oluşturulur. Dosyalar yerel olarak indirilir ve hiçbir sunucuda saklanmaz.

Placeholder'ları değiştirmezsem ne olur?

Placeholder'lar ({{ user.name }} gibi) e-postada aynen görünür. Gönderim öncesinde bunları backend'inizde gerçek değerlerle değiştirmeniz veya e-posta servisinizin değişken formatına çevirmeniz gerekir.

Teknik bilgim yoksa kullanabilir miyim?

Kesinlikle! Maily'nin görsel editörü kod yazmadan şablon oluşturmanıza olanak tanır. HTML export alıp direkt e-posta servisinize yükleyebilirsiniz.

E-posta client uyumluluğu nasıl?

Maily'nin ürettiği HTML kodu; Gmail, Outlook, Apple Mail, Yahoo ve diğer popüler e-posta istemcilerinde test edilmiştir. Responsive tasarım tüm cihazlarda düzgün çalışır.

React export'u @react-email ile uyumlu mu?

Evet! React component'leri @react-email kütüphanesiyle tam uyumludur. Ayrıca vanilla React ve Next.js projelerinde de kullanabilirsiniz.

Şimdi şablonunuzu oluşturun

Profesyonel e-posta şablonları oluşturmak için hazırsınız. Ücretsiz başlayın, kredi kartı gerektirmez.