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

mjml

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

اگر خاطرتون باشه در جلسه قبل ساخت قالب خبرنامه رو شروع کردیم و سه ردیف از اون رو با هم دیگه ساختیم و یاد گرفتیم. در این قسمت قصد داریم ساخت این قالب رو به پایان برسونیم. همونطور که میدونید قسمت مربوط به Editor دو تا ردیف یا Section لازم داره. یکی برای عنوانش و دیگری برای تصویرش. برای قرار دادن عنوان بصورت زیر عمل میکنیم:


  
    
      Explore our new features
    
  

میبینید که یک Section قرار دادیم و رنگ پس زمینه اون رو هم مشخص کردیم. بعد از اون با استفاده از mj-text یک متن رو قرار دادیم و اون رو وسط چین یا center کردیم. درون ویژگی color میتونیم رنگ فونت رو قرار بدیم. برای قرار دادن رنگ میتونیم از hex color یا hsl یا rgb استفاده کنیم. خروجی در مرورگر تا اینجا بصورت زیر هست:newsletter template 4

حالا بریم سراغ ردیف بعد که درون اون یک تصویر ادیتور قرار میگیره. کدهای اون بصورت زیر هستن:


  
    
  

میبینید که با استفاده از mj-image یک تصویر رو قرار دادیم. آدرس تصویر رو درون ویژگی src قرار دادیم. خروجی در مرورگر بصورت زیر خواهد بود:newsletter template 5

حالا میریم سراغ ردیف بعد. این ردیف هم دو ستونه هست و مثل قبل یک تصویر در سمت چپ و یک متن در سمت راست قرار میگیره. کدهای اون بصورت زیر هست:


  
    
  
  
    
      Right on time!
    
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    
  

توضیح کدهای بالا شبیه به کدهای قبلی هست. خروجی بصورت زیر میشه:newsletter template 6

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


  
    Stay in touch!
    
  

میبینید که در ابتدا یک متن کوتاه قرار دادیم و بعد از اون با استفاده از mj-social برای دو شبکه اجتماعی twitter و facebook، آیکونهاشونو قرار دادیم. با استفاده از ویژگی mode هم نحوه قرار گیری اونا رو vertical یا عمودی در نظر گرفتیم. خروجی در مرورگر بصورت زیر خواهد بود:newsletter template

کل کدهای mjml سازنده این قالب بصورت زیر هستن:


  
    

			
			
				
					

					
				
			

	    
			
			  
			    
			      Here is what you've missed
			    
			    
			  
			

	    
	    
	      
	        
	      
	      
	        
	          Sed ut perspiciatis
	        
	        
	          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
	        
	      
	    

	    
			
			  
			    
			      Explore our new features
			    
			  
			

	    
			
			  
			    
			  
			

	    
			
			  
			    
			  
			  
			    
			      Right on time!
			    
			    
			      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
			    
			  
			

	    
	    
	      
	        Stay in touch!
	        
	      
	    

    
  

خروجی HTML اون بصورت زیر خواهد شد:




  








    
    
  


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

Here is what you've missed

آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 10) - طراحی قالب خبرنامه - قسمت 2
Sed ut perspiciatis
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
Explore our new features
آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 10) - طراحی قالب خبرنامه - قسمت 2
آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 10) - طراحی قالب خبرنامه - قسمت 2
Right on time!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
Stay in touch!

بهمین راحتی.

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

موفق باشید

یا علی

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











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

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

نظر دهید

پاسخ دهید

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