فن تصميم رسائل البريد الإلكتروني: كيف تجعل رسائل منتداك أكثر احترافية؟
دليل مخصص ومقدم لمجتمع انكور التقني
مقدمة:
تعتبر رسائل البريد الإلكتروني (Email Notifications) هي الواجهة الخارجية لمنتداك. عندما يتلقى المستخدم إشعاراً بتسجيل جديد أو استعادة كلمة مرور، فإن أول ما يقع عليه عينه هو التصميم. التصميم الباهت قد يعطي انطباعاً بعدم الاهتمام، بينما التصميم المنسق يعكس احترافية منصة انكور التطويرية
كود القالب المطور (MAIL_CONTAINER):
قم بنسخ الكود أدناه واستبداله بالكامل داخل قالب MAIL_CONTAINER في منتداك:
طريقة التركيب:
معاينة
خلاصة
التفاصيل الصغيرة هي ما يصنع الفارق بين المواقع العادية والمواقع الاحترافية. بريد موقعك هو سفيرك في صندوق وارد المستخدم، فاجعله يليق بمنصتك.
تم إعداد المقال بواسطة: 4rnet - فورارنت ، مهدي حميد
دليل مخصص ومقدم لمجتمع انكور التقني
مقدمة:
تعتبر رسائل البريد الإلكتروني (Email Notifications) هي الواجهة الخارجية لمنتداك. عندما يتلقى المستخدم إشعاراً بتسجيل جديد أو استعادة كلمة مرور، فإن أول ما يقع عليه عينه هو التصميم. التصميم الباهت قد يعطي انطباعاً بعدم الاهتمام، بينما التصميم المنسق يعكس احترافية منصة انكور التطويرية
- سحر الخطوط العربية (Typography) استخدام خطوط انسيابية مثل Cairo يوفر مساحات مريحة بين الحروف، مما يجعل قراءة الرسائل على الجوال أمراً ممتعاً وغير مجهد للعين.
- الهيدر (Header) بلمسة الهوية البصرية
استخدام التدرج اللوني (Gradients) مع الألوان الزرقاء العميقة يعطي عمقاً للتصميم ويعزز العلامة التجارية في ذاكرة المستخدم منذ اللحظة الأولى. - هيكلة المحتوى بنظام "البطاقات" (Card UI)
وضع المحتوى داخل "حاوية" بيضاء بخلفية رمادية فاتحة يركز انتباه القارئ على نص الرسالة فقط ويقلل من التشتت البصري.
كود القالب المطور (MAIL_CONTAINER):
قم بنسخ الكود أدناه واستبداله بالكامل داخل قالب MAIL_CONTAINER في منتداك:
HTML:
<!DOCTYPE html>
<html lang="{$xf.language.language_code}" dir="{$xf.language.text_direction}">
<head>
<meta data-fr-http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="{$xf.options.boardUrl}/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
<title>{$subject}</title>
<style>
body { background-color: #f8f9fa; font-family: 'Cairo', Tahoma, sans-serif; margin: 0; padding: 0; }
.container { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #e1e8ed; max-width: 600px; margin: 20px auto; }
.header { background: linear-gradient(135deg, #185abd 0%, #114692 100%); padding: 40px 20px; text-align: center; }
.header a { color: #ffffff; text-decoration: none; font-size: 26px; font-weight: 700; }
.content { padding: 40px 30px; color: #333333; line-height: 1.8; font-size: 16px; }
.footer { background-color: #f1f4f7; padding: 30px 20px; text-align: center; color: #657786; font-size: 13px; border-top: 1px solid #e1e8ed; }
.copyright { margin-top: 15px; color: #185abd; font-weight: bold; font-size: 14px; }
</style>
</head>
<body dir="{$xf.language.text_direction}">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="header">
<a href="{{ link('canonical:index') }}">{$xf.options.boardTitle}</a>
</td>
</tr>
<tr>
<td class="content" align="{{ $xf.isRtl ? 'right' : 'left' }}">
{$html|raw}
</td>
</tr>
<tr>
<td class="footer">
{{ phrase('visit_board_html', {'board_url': link('canonical:index'), 'board_title': $xf.options.boardTitle}) }}
<xf:if contentcheck="true">
<div class="footerExtra"><xf:contentcheck>{{ phrase('email_footer_html') }}</xf:contentcheck></div>
</xf:if>
<div class="copyright">
جميع الحقوق محفوظة © {{ date($xf.time, 'Y') }}
<br>
فورارنت | 4rnet
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<mail:text>
{$text}
-----------------------------
{{ phrase('visit_board_text', {'board_title': $xf.options.boardTitle, 'board_url': link('canonical:index')}) }}
{{ phrase('email_footer_text') }}
جميع الحقوق محفوظة فورارنت | 4rnet
</mail:text>طريقة التركيب:
- توجه إلى لوحة تحكم الإدارة > المظهر > القوالب.
- ابحث عن القالب: MAIL_CONTAINER.
- استبدل محتوى القالب بالكامل بالكود الموجود أعلاه (تأكد من شمول كود الـ text في الأسفل).
- اضغط على حفظ.
- يمكنك معاينة النتيجة عبر أداة اختبار خروج البريد في لوحة التحكم.
معاينة
خلاصة
التفاصيل الصغيرة هي ما يصنع الفارق بين المواقع العادية والمواقع الاحترافية. بريد موقعك هو سفيرك في صندوق وارد المستخدم، فاجعله يليق بمنصتك.
تم إعداد المقال بواسطة: 4rnet - فورارنت ، مهدي حميد
التعديل الأخير:
