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

mjml

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

در جلسه قبل تا ردیف سوم رو بصورت کامل ساختیم و در این جلسه قصد داریم این قالب رو به پایان برسونیم.

یک ردیف که از دو ستون تشکیل شده و هر کدام محتوی چیزی هستن

این ردیف از دو ستون تشکیل شده. یکی از اونا شامل یک تصویر و دیگری شامل متن می‌باشد. جهت صفحات یا Direction درون mjml بصورت پیش فرض از چپ به راست هست و هر ستونی که در ابتدا قرار بگیره، در سمت چپ قرار میگیره. بصورت زیر دو ستون رو قرار میدیم:



	
	
		
	

	
	
		
	

حالا باید درون ستون اول تصویر مورد نظرمون رو قرار بدیم. برای قرار دادن تصویر از المنت mj-image استفاده میکنیم. چون این المنت هیچ فرزند دیگه ای نداره، لازم نیس که تگ بسته شونده یا closing tag برای اون بکار برد و میشه با قرار دادن / در انتهای اون، کار رو به پایان رسوند. همچنین با استفاده از ویژگی src آدرس تصویر مورد نظر رو مشخص میکنیم و با استفاده از width هم عرض تصویر رو قرار میدیم. بصورت زیر:



	
	
		
	

	
	
		
	

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



	
	
		
	

	
	
		
			Find amazing places
		

		
			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.
		
	

حالا اگر خروجی رو در مرورگر مشاهده کنید، بصورت زیر خواهد بود:mjml basic template 6

میبینید که ردیف ۴ هم به راحتی ساخته شد. حالا میریم سراغ ردیف پنجم.

بخش آیکونها

در اینجا شما باید سه ستون قرار بدین و درون هر کدوم آیکون مورد نظر خودتون رو قرار بدین. چون ما برای ستونها بصورت دستی عرضشون رو مشخص نمیکنیم، پس عرض اونا بصورت اتوماتیک و توسط mjml مشخص میشه و مقدار مساوی رو به اونا اختصاص میده:


	
		
	

	
		
	

	
		
	

بهمین راحتی. حالا اگر خروجی رو در مرورگر ببینید، بصورت زیر خواهد بود:mjml basic template 7

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

بخش شبکه‌های اجتماعی

ما برای قرار دادن شبکه‌های اجتماعی در قالب ایمیل از المنت mj-social استفاده میکنیم که تقریبا همه شبکه‌های اجتماعی معروف رو در خودش جا داده. ما در اینجا از سه شبکه Facebook و Google Plus و Linkedin استفاده میکنیم. کدهای این Section بصورت زیر هستن:


	
		
	

میبینید که درون ویژگی display اسم شبکه‌های اجتماعی مورد نظر رو قرار دادیم و mjml بصورت اتوماتیک آیکون و بقیه چیزای لازم رو قرار میده. این المنت ویژگی‌ها دیگه هم داره که بعدا بصورت دقیق اونا رو بررسی میکنیم. فعلا فقط ظاهرش برامون مهمه. با این کد، این قالب به پایان میرسه. کد کدهای mjml بصورت زیر هستن:


	
		

			
			
				
					
						My Company
					
				
			

			
			
				
					
						Slogan here
					

					
						Promotion
					
				
			

			
			
				
					
						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
					
				
			

			
			

				
				
					
				

				
				
					
						Find amazing places
					

					
						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.
					
				
			

			
			
				
					
				

				
					
				

				
					
				
			

			
			
				
					
				
			


		
	

اگر این کدهارو به HTML تبدیل کنیم، بصورت زیر خواهند شد:




  








    
    
  


  
My Company
Slogan here
Promotion
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 برای ساخت ایمیلهای واکنشگرا (جلسه 8) - طراحی یک قالب ساده - قسمت 3
Find amazing places
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.
آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 8) - طراحی یک قالب ساده - قسمت 3
آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 8) - طراحی یک قالب ساده - قسمت 3
آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 8) - طراحی یک قالب ساده - قسمت 3

میبینید که کدها چقد پیچیده هستن و mjml همه این کارهای سخت رو برای ما انجام داده. خروجی در مرورگر بصورت زیر هست:mjml basic template 8

میبینید که چقد زیبا این قالب نمایش داده میشه. اگه یادتون باشه گفتم که mjml یکی از مزیتهاش واکنشگرا یا Responsive بودنش هست. حالا اگر سایز مرورگر رو کم کنیم و اون رو ببینیم، خروجی بصورت زیر هست:mjml basic template 9

میبینید که بخوبی واکنشگرا شده و المنتها تغییر مکان میدن.

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

موفق باشید

یا علی

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











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

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

نظر دهید

پاسخ دهید

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