البرنامج التعليمي: كيفية إنشاء بريد إلكتروني بحظر الألوان

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

• أضف ألوان خلفية متعددة بتنسيق HTML في رسالة بريد إلكتروني
• أنشئ عدة أعمدة
• تنسيق النص (اللون والحجم وارتفاع الخط والروابط وما إلى ذلك)
• تلميع بريد إلكتروني عن طريق ضبط التباعد والحشو

إلهام: إرسال خارج الشاشة

Offscreen هي مجلة مطبوعة ورسالة إخبارية أسبوعية "مع نظرة مدروسة ومركزة على الإنسان حول التكنولوجيا والويب." تسمى رسالتها الإخبارية Offscreen Dispatch ، وقد أعجبنا منذ فترة طويلة بتصميمها البسيط والمتميز. يستخدم Offscreen نفس تقنية حظر الألوان في كل بريد إلكتروني ، والتأثير الجميل حقًا يجعل البريد الإلكتروني يبدو وكأنه صفحة في مجلة. الجزء العلوي - حيث يكتب مصمم الويب Kai Brach ملاحظة للمشتركين - يكون دائمًا باللون الوردي. دائمًا ما يكون باقي البريد الإلكتروني أبيض. تحقق من ذلك:

لا يوجد شيء رائع هنا - لا يوجد فن أو تصوير فوتوغرافي - ولكن التصميم الديناميكي والنص المنسق جيدًا والتصميم الممتلئ بالألوان يجمع هذا البريد الإلكتروني معًا.

الخطوة 1: بناء الهيكل

افتح محرر BEE في MailUp وابدأ بقالب أساسي فارغ من عمود واحد.

قبل أن نبدأ في سحب عناصر الهيكل ، دعنا نأخذ دقيقة لفحص البريد الإلكتروني Offscreen Dispatch وتحديد مكونات التخطيط. هذه نسخة مرمزة:

يتناوب البريد الإلكتروني بين الهياكل ذات العمود الواحد والعمودين ، والتي يسهل تجميعها في BEE.

اسحب فوق تكوينات الصفوف المقابلة من قائمة الصف على اليمين. سنحتاج إلى أفضل خيارين لهذا البريد الإلكتروني:

إليك كيف يبدو بريدنا الإلكتروني مع هياكل الصف في مكانها:

الخطوة 2: ترتيب كتل المحتوى مع النص / الصور

الآن بعد أن تم تجميع عظام بريدنا الإلكتروني ، اسحب فوق كتل المحتوى التي تتوافق مع نوع المحتوى - النص و / أو الصورة - الذي نريده في كل قسم. ثم الصق النص واسحب في الصور.

إليك 1-2-3 حول كيفية وضع المحتوى الخاص بك. بدءًا من الصف الأول - الرأس - وإليك الطريقة:

(1) اسحب هيكل من عمودين:

(2) إضافة كتل نصية على اليسار ؛ كتلة محتوى الصورة على اليمين:

(3) قم بإسقاط النص والصورة:

دعنا نذهب من خلال كل صف لترتيب المحتوى.

إليك بريدنا الإلكتروني مع وضع كتل المحتوى المتبقية:

الآن ، سننتهي من إضافة النص:

هاهو! بعد ذلك ، دعنا نقوم بالتنسيق.

الخطوة 3: تنسيق ألوان الخلفية

الآن للجزء الممتع. شاهد مدى سهولة إنشاء تأثير حجب الألوان.

أولاً ، لمطابقة الظل الدقيق للون الوردي الباهت من البريد الإلكتروني الخاص بـ Offscreen Dispatch ، استخدمنا HTML-Color-Codes.info لتعريف اللون من الصورة في الرأس.

تحدد أكواد ألوان HTML الكود السداسي العشري على أنه # F5BBA2. لجعل الصف الأول هو اللون الصحيح ، سنقوم بما يلي:

1. حدد الصف
2. انتقل إلى Row Background Color في القائمة الموجودة على اليمين
3. الصق رمز اللون (أو حدد يدويًا)

لون سلس من الحافة إلى الحافة! الآن دعنا نكمل كتلة اللون الوردي. سنختار ببساطة الصف التالي ونفعل نفس الشيء مرة أخرى.

الآن ، بريدنا الإلكتروني محظور بالألوان. نعم ، الأمر بهذه السهولة.

الخطوة 4: قم بتنسيق النص

دعنا ننتهي من تصميم البريد الإلكتروني هذا ببعض لمسات التنسيق. سنبدأ بالنص.

اختر الخط الافتراضي للبريد الإلكتروني

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

بعد ذلك ، يمكنك تغيير خط الرأس أو تحديد الأقسام التي تريدها.

اضبط أحجام الخط

انقر فوق أي جزء نصي واستخدم القائمة المنسدلة لضبط حجم الخط بدقة.

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

استخدم نفس القائمة لاختيار الألوان التي تفضلها. مرة أخرى ، استخدم نفس رمز اللون المتطابق للحصول على الظل الدقيق المطلوب.

تنسيق نمط الارتباط

لا تنس الروابط! في نفس قائمة الإعدادات حيث اخترت الخط الأساسي الافتراضي ، يمكنك أيضًا تنسيق نمط الارتباط. في هذه الحالة ، سنختار الأسود.

أثناء إضافة روابط إلى بريدك الإلكتروني ، تأكد من تحديد مربع "Underline Link". (إنها حتى أفضل ممارسات الوصول إلى البريد الإلكتروني !)

ارتفاع خط

تأكد من أن نص جسدك به مساحة للتنفس. لأي كتلة محتوى تقوم بتحريرها ، اضبط ارتفاع سطر النص.

نصيحة: صف مكرر

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

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

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

الخطوة 5: ضبط المساحة المتروكة

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

على سبيل المثال ، لا تزال هناك فجوة بين "Offscreen" و "Dispatch" في رأس مسودة البريد الإلكتروني الخاصة بنا. لتشديده ، انقر فوق أي من كتلة المحتوى ، ثم قم بالتمرير لأسفل وصولاً إلى " خيارات الحظر" في القائمة الموجودة على اليمين ، وتأكد من تشغيل "المزيد من الخيارات" ضمن الحشو. بعد ذلك ، يمكنك تقليل (أو زيادة) المساحة المتروكة على أي جانب في أي جزء من المحتوى.

الخطوة 6: معاينة البريد الإلكتروني لحظر الألوان النهائي!

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

يتم إحتوائه

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