آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه ۷) – طراحی یک قالب ساده – قسمت ۲

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم. همونطور که اطلاع دارید در جلسه قبل ساخت یک قالب ساده ایمیل رو با هم دیگه شروع کردیم و در این جلسه قصد داریم اون رو ادامه بدیم.

در حلسه قبل ۶ تا ردیف ساختیم و برای هر کدوم رنگ پس زمینه رو مشخص کردیم و همچنین برای ردیف اول، یک متن که نقش لوگو برند رو ایفا میکنه، بصورت Italic و وسط چین شده قرار دادیم.

Image Header یا بخشی که عکس مورد نظر رو درونش قرار میدیم

ردیف بعدی که قرار هست اونو طراحی کنیم، ردیفی هست که یک تصویر بعنوان پس زمینه داره و متنی بر روی اون قرار میگیره که slogan یا شعار سایت یا برند رو مشخص میکنه. در زیر اون هم یک دکمه قرار میدیم که کاربران رو به بخشی از سایتمون منتقل کنیم تا اطلاعات بیشتری در مورد چیزی مشخص بدست بیارن.

برای اضافه کردن تصویر مورد نظرمون به عنوان پس زمینه ردیف دوم، باید بجای استفاده از ویژگی background-color از ویژگی background-url استفاده کنیم، بصورت زیر:

میبینید که برای ویژگی background-url آدرس یک تصویر رو قرار دادیم تا بعنوان پس زمینه section یا ردیف مورد نظر قرار بگیره. با استفاده از ویژگی background-size هم کاری کردیم که این تصویر در هر سایزی، کل عنصر Parent که همون section میشه رو بپوشونه و هم اندازش بشه. با استفاده از ویژگی background-repeat هم گفتیم در جهت طولی و عرضی نمیخایم تکرار بشه. حالا مثل قبل باید یک mj-column درون این section قرار بدین، بصورت زیر:


	
		
	

میبینید که ستون مورد نظر رو قرار دادیم. برای قرار دادن متن شعار برند، مثل گذشته میتونین یک mj-text اضافه کنید و متن مورد نظرتون رو درونش قرار بدین:


	
		
			Slogan here
		
	

میبینید که با استفاده از ویژگی align اون رو center یا وسط چین کردیم و رنگ و سایز و نام فونت اون رو هم تغییر دادیم. با استفاده از ویژگی padding-right و padding-left و padding-top و padding-bottom میتونیم فاصله المنت مورد نظر رو از بترتیب، راست و چپ و بالا و پایین مشخص کنیم و المنتها رو از هم دورتر کنیم و در مکان مورد نظرمون قرار بدیم.

در نهایت برای قرار دادن دکمه، یک mj-button بصورت زیر قرار میدیم:


	
		
			Slogan here
		

		
			Promotion
		
	

میبینید که برای المنت mj-button مورد نظر، یک ویژگی background-image قرار دادیم که با استفاده از اون رنگ دکمه رو مشخص کردیم. همچنین با استفاده از ویژگی href هم آدرس لینک دکمه رو مشخص کردیم که با کلیک بر روی اون به این آدرس خواهیم رفت. خروجی تا اینجای کار در مرورگر بصورت زیر خواهد بود:mjml basic template 4

میبینید که تا اینجای کار قالبمون خیلی زیبا شده. حالا میریم ردیف بعد رو بسازیم.

محلی که توضیحاتی مقدماتی در مورد محصول یا شرکتمون میدیم

در این ردیف ما یک عنوان داریم و همچنین یک متن توضیحی داریم و در آخر هم یک دکمه برای مطالعه بیشتر قرار میدیم. در ابتدا درون ردیف یا section سوم، یک column با طول ۴۰۰ پیکسل قرار میدیم. علت ۴۰۰ این هست که نمیخایم این ستون کل ردیف رو پوشش بده. بصورت زیر:


	
		
	

حالا باید دو تا المنت mj-text و یک المنت mj-button قرار بدیم، بصورت زیر:


	
		
			My Awesome Text
		

		
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
		

		
			Learn more
		
	

توضیحات المنتها و ویژگی‌های بالا رو قبلا خدمتتون عرض کردیم. اگه کل کدها رو تا اینجا با استفاده از ابزار mjml به html تبدیل کنیم و اون رو در مرورگر باز کنیم، خروجی بصورت زیر میشه:mjml basic template 5

خب اینم از ردیف سوم. ادامه کار رو در جلسه بعد در خدمتتون هستم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0