آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه ۵) – شروع کار با mjml

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم. در این آموزش میخایم در مورد mjml و ساختار ایمیلها در اون بحث کنیم.

این قالب یک ایمیل واکنشگرا هست:mjml structure

شبیه به یک قالب HTML عادی، ما میتونیم ایمیلهامون رو Grid بندی کنیم. محتوای ایمیل در mjml درون تگ mjml-container قرار میگیره و همه المنتهای دیگه درون اون قرار میگیره. پس mjml-container رو اگه بخایم درون عکس نمایش بدیم، بصورت زیر هست:mjml structure 2

شما میتونین درون mjml-container تگهای mjml-section قرار بدین که درون عکس بصورت زیر هست:mjml structure 3

درون هر mjml-section، تعدادی mjml-column قرار میگیره که هر کدوم از اونا یک ستون رو درون ردیف بوجود میاره. بصورت زیر:mjml structure 4

Column‌ها همون بخشی هستن که ایمیل ما رو واکنشگرا میکنن. اونا بصورت اتوماتیک مکان خودشون رو تغییر میدن تا درون هر دستگاهی اعم از Mobile و Desktop بخوبی نمایش داده بشن.

برای زیبایی بیشتر درون mjml فقط میتونین از ۴ ستون درون یک ردیف استفاده کنید و بیشتر از ۴ تا مجاز نیستید.

در اینجا مواردی که باید با اونا برای ادامه کار آشنایی داشته باشید رو خدمتتون بیان میکنم.

Column Sizing یا مشخص کردن اندازه ستونها

سایزبندی اتوماتیک:

همونطور که در بالا اشاره کردیم، درون هر Section یا ردیف، تعدادی Column یا ستون قرار میگیره. (حداکثر ۴ ستون)

رفتار پیش فرضی که موتور تبدیل کننده mjml از اون تبعیت میکنه، اینه که فضای هر Section رو بین همه ستونهایی که درون اون قرار میدید، پخش میکنه. حداکثر Width هر ردیف یا Section میتونه ۶۰۰ پیکسل باشه. هر المنتی که درون هر ردیف قرار میگیره، عرضش به اندازه عرض همون ردیف میشه و width اون برابر با ۱۰۰  درصد هست.

فرض کنید که ما چنین کدی داریم:


	
		
			
				
					
				

				
					
				
			
		
	

چون درون ردیف یا section بالا، دو تا Column قرار دادیم، پس موتور mjml برای هر کدوم از ستون‌ها عرض برابر با ۵۰ درصد یا همون ۳۰۰ پیکسل رو قرار میده. اگه بجای دو تا ستون از ۳ تا ستون استفاده کنیم بجای ۵۰ درصد، عرض هر کدوم ۳۳ درصد میشه و اگر ۴ تا ستون بزاریم، عرض هر کدوم ۲۵ درصد میشه.

سایزبندی دستی یا Manual:

اگر شما قصد داشته باشید که بیشتر از ۴ ستون درون هر ردیف قرار بدین و یا اینکه عرض هر کدوم رو بصورت دستی تغییر بدین، میتونین اون رو بصورت دستی انجام بدین ولی دیگه موتور mjml اون رو بصورت اتوماتیک انجام نمیده.

کد زیر رو در نظر بگیرید:


	
		
			
				
					
				
				
					
				
			
		
	

همونطور که در کد بالا میبینید، عرض یا width ستون اول رو برابر با ۳۰۰ پیکسل قرار دادیم. شاید شما فرض کنید که ستون دوم هم ۳۰۰ پیکسل باشه ولی اینطور نیست. اگر شما width یکی از ستونها رو بصورت دستی انتخاب کنید، دیگه باید همه رو بصورت دستی مشخص کنید و این کار دیگه بصورت اتوماتیک انجام نمیشه. همیشه این رو در نظر داشته باشید که عرض یا width هر ردیف بیشتر از ۶۰۰ پیکسل نمیشه.

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

موفق باشید

یا علی

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











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

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

نظر دهید

پاسخ دهید

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