قوالب البريد الإلكتروني للمعاملات مفتوحة المصدر

عندما تقوم بإعداد حساب SendGrid جديد ، فإن إنشاء مجموعة من قوالب البريد الإلكتروني لحسابك هو أحد أهم المهام التي يجب إكمالها. إذا كنت تخطط لإرسال بريد إلكتروني عبر واجهة برمجة التطبيقات الخاصة بنا لتطبيقك أو خدمتك ، فستحتاج على الأرجح إلى عدة أنواع مختلفة من قوالب البريد الإلكتروني. بعض من أكثرها شيوعًا هي إعادة تعيين كلمة المرور وتأكيدات البريد الإلكتروني والإيصالات.

على الرغم من وجود مجموعة كبيرة من قوالب البريد الإلكتروني المعدة مسبقًا على الويب ، فإن العثور على مجموعة يسهل تخصيصها لتلائم علامتك التجارية ليس بالأمر السهل دائمًا.

من المهم أيضًا إجراء اختبار شامل للقوالب في عملاء البريد الإلكتروني المشتركين. يمكن أن تستغرق هذه العملية وقتًا طويلاً وتؤدي إلى إبطاء عملية إعداد حساب SendGrid والبدء في إرسال رسائل البريد الإلكتروني.

أدركت أن الفريق في SendGrid يمكنه تقديم قيمة لعملائنا من خلال إنشاء مجموعة مفتوحة المصدر من قوالب البريد الإلكتروني التي يمكن للمستخدمين الاستفادة منها لتغطية حالات الاستخدام الشائعة هذه. ليست القوالب سهلة التخصيص فحسب ، بل ستنطلق وترسل سريعًا!

تغطي مجموعة القوالب التي نطلق عليها اسم "لصق" 5 حالات استخدام:

• إعادة تعيين كلمة المرور
• تأكيد البريد الإلكتروني
• رسائل ترحيب
• الإيصالات
• ملخصات (يومية أو أسبوعية أو شهرية)

قم بتنزيل القوالب على GitHub

لبدء استخدام قوالب اللصق الخاصة بنا ، توجه إلى GitHub وانسخ المستودع أو قم بتنزيل مجلد قوالب اللصق. من الجدير بالذكر أيضًا أن هذه القوالب موجودة في مستودع مفتوح المصدر لقوالب البريد الإلكتروني التي ساعد مستخدمو SendGrid الآخرون في المساهمة فيها خلال Hacktoberfest الأحدث.

تخصيص قوالب اللصق

بمجرد حصولك على نسخة محلية من قوالب اللصق ، افتحها في محرر الكود المفضل لديك (أوصي بـ VSCode أو Atom ؛ كلاهما مجاني).

أوصي بالبدء بـ base.html لأنه يحتوي على معظم المكونات القابلة لإعادة الاستخدام والموجودة في العديد من القوالب الأخرى. تشترك جميع هذه القوالب في بنية مشتركة لـ HTML ، وبينما توجد بعض الأنماط الأساسية في المستند ، توجد غالبية الأنماط مضمنة.

أثناء قيامك بتمشيط HTML ، ستلاحظ الكثير من تعليقات HTML للإشارة إلى بداية الكتل ونهايتها. هذه ملاحظات مهمة ستساعدك أثناء مسح القوالب والبدء في تعديلها.

ستلاحظ أيضًا أنماطًا على عناصر HTML لألوان الخلفية ، والطباعة ، والتباعد ، وما إلى ذلك. أود أن أشجعك على تجربتها للتعرف على كيفية تغيير شكل ومظهر هذه القوالب.

أضف شعارك إلى القوالب

من أول الأشياء التي تريد القيام بها هو استبدال شعار قوالب اللصق بشعارك. يمكنك العثور بسرعة على قالب الشعار من خلال البحث عن تعليق HTML الخاص به ، للإشارة إلى أنه مكان البداية:

ضمن هذه الكتلة ، سترغب في تحديد موقع علامة الارتساء (<a> ) وتغيير HREF إلى عنوان URL الخاص بك. يجب ربط القالب بصفحة SendGrid الرئيسية افتراضيًا.

بعد تعديل عنوان URL ، دعنا نستبدل شعار Paste بشعارك الخاص. أوصي بتخزين شعارك في مكان يمكنك الارتباط به بسهولة ، مثل خادم الويب أو CDN. بمجرد استبدال الشعار src ، اضبط الأنماط المضمّنة بحيث يكون العرض / الارتفاع صحيحًا - سيعتمد ذلك على نسبة العرض إلى الارتفاع لشعارك. بشكل افتراضي ، يكون شعار اللصق 48 بكسل مربعًا ، لذلك قمنا بتعيين أنماط العرض على 48 بكسل.

مثال:

في هذا المثال ، تتم الإشارة إلى عنوان URL "لصق الشعار" جنبًا إلى جنب مع بعض أنماط العرض لتعيينه على الحجم المطلوب وهو 48 بكسل. اضبط هذه القيم لشعارك للتأكد من أنه يبدو حادًا.

تخصيص ألوان الخلفية

كما ذكرنا أعلاه ، يتم تعيين لون الخلفية على مجموعة متنوعة من الكتل لإنشاء النمط الافتراضي لقوالب اللصق (الرمادي والأبيض). يمكنك بسهولة تغيير هذا (ويجب عليك) لمطابقة ألوان علامتك التجارية.

أسهل طريقة للتنقل بين هذه الأنماط هي استخدام المحرر الخاص بك للبحث عن الأنماط المضمنة ولون bgcolor ولون الخلفية. يمكن استبدال قيمة هذه الخصائص بقيم سداسية عشرية (مثل # 000000) أو أسماء ألوان (مثل أسود). أثناء العمل من خلال هذه التغييرات ، من السهل الاحتفاظ بعلامة تبويب للأشياء إذا فتحت أحد القوالب في متصفحك المفضل وقمت بالتحديث أثناء إجراء التغييرات.

مثال:

في هذا المثال ، تم تصميم علامة الجسم بلون خلفية رمادي فاتح. يجب تخصيص قيمة اللون هذه وغيرها في النموذج لتتناسب مع علامتك التجارية.

تخصيص الأزرار

الأزرار هي أحد مكونات الواجهة الأكثر شيوعًا في قوالب البريد الإلكتروني. ستستخدمها كدعوة إلى اتخاذ إجراء ، مع إبراز أهم إجراء تريد أن يقوم به المستخدم ، مثل تأكيد عنوان بريده الإلكتروني.

بشكل افتراضي ، يتم تصميم أزرار اللصق على هيئة كتل زرقاء بنصف قطر دقيق للحد من الزوايا. يشبه تخصيص هذه الأزرار لمطابقة علامتك التجارية التعديلات التي أجريناها بالفعل على لون خلفية نموذجنا. ابحث عن الحظر باستخدام تعليق HTML الذي أضفناه لك:

لدينا العديد من خلايا الجدول التي تم تطبيق خلفيات بيضاء عليها (#ffffff) لإنشاء الكتلة حول الزر ، ولكنك سترغب في العثور على خلية الجدول التي تحتوي على الأنماط التالية أدناه.

مثال:

في هذا المثال ، يحتوي <td> على لون bgcolor يُستخدم لتعيين لون الزر ، جنبًا إلى جنب مع نصف قطر الحدود لتقريب الزوايا بمهارة. جرب هذه الأنماط لتحقيق مظهر فريد لأزرارك التي تتناسب مع علامتك التجارية.

الجزء الثاني من الزر هو المرساة (<a> ) داخل خلية الجدول الموضحة أعلاه.

يتحكم هذا المرساة في عنوان URL الذي سيذهب إليه الزر عند النقر فوقه ، ولكن يتحكم أيضًا في أنماط النص الخاصة بالتسمية. يمكنك ضبط الأنماط لتعديل التسمية بناءً على تفضيلاتك وما يتوافق مع علامتك التجارية.

تخصيص الطباعة

بشكل افتراضي ، يتم تحميل قوالب اللصق في خط الويب ، Source Sans Pro ، عبر Google Fonts. يمكنك استخدام خط ويب مختلف من مجموعة Google ، أو استخدام مجموعة الخطوط القياسية الموجودة في معظم أجهزة الكمبيوتر هذه الأيام (Arial ، و Georgia ، و Times ، وما إلى ذلك).

إذا كنت تخطط لاستخدام خط ويب مختلف ، فراجع نصائح وحيل تطوير البريد الإلكتروني الخاصة بي للحصول على بعض المؤشرات المفيدة. تأكد من قيامك بتمشيط HTML بحثًا عن أي أنماط مضمنة تشير إلى عائلة الخطوط وتعديلها بناءً على تفضيلاتك.

مثال:

في هذا المثال ، يحتوي <td> على مجموعة نمط عائلة الخط لاستخدام Source Sans Pro ، مع بعض التراجع إلى المزيد من الخطوط القياسية في حالة عدم تحميل خط الويب.

خواطر نهائية

آمل أن تساعدك هذه المؤشرات في تخصيص هذه القوالب لتناسب علامتك التجارية وتساعدك على العمل على منصة SendGrid. في المستقبل ، آمل أن أقوم بتوسيع مستودع قوالب البريد الإلكتروني الخاص بنا بمزيد من القوالب ، ولكن أيضًا أداة بناء ستجعل عملية التخصيص أسرع بكثير.

إذا واجهت أي مشاكل على طول الطريق ، فالرجاء إرسال مشكلة ضد GitHub repo ، وإذا كنت ترغب في المساهمة ، فيرجى إرسال طلب سحب. هل تبحث عن المزيد من القوالب لتجربتها؟ جرب قوالب البريد الإلكتروني HTML سريعة الاستجابة من SendGrid.